対象

以下記事で対応した QuuQデザイン が対象
※ 過去記事：デザイン変更

Blogger Prismの表示改善

Bloggerにソースコード等を表示する際 Prism を使用しているが (過去記事：Blogger #10：ソースコードをきれいに載せたい(2))、以下の表示が見づらくなっている。

class="lang-bash"指定時の
・オプション（-F, -P, -A, -i など）

・ダブルクォーテーション "" やシングルクォーテーション '' で囲まれた文字列部分

(2026.09.28)
class="lang-powershell"指定時の
・ハイフン(-)

(2026.10.03) class="lang-javascript"指定時の予約語・キーワードのフォントサイズが小さい

(2026.10.11)
class="lang-php"指定時の$から始まる変数名が反転してしまう。

対応

Prism.jsでコマンドのオプション（-F, -P, -A, -i など）に .token.parameter クラスが割り当てられ、背景色が灰色または反転表示のスタイルが適用されている。
CSSで .token.parameter のスタイル（背景色や文字色）を上書きすることで見やすく調整する。

/* パラメータの反転（背景色）を解除し、適度な文字色を設定 */
.token.parameter {
  background: none !important; /* 背景色の反転を削除 */
  color: #a6e22e !important;   /* お好みの文字色を指定（例: 黄緑色） */
}

ダブルクォーテーション "" やシングルクォーテーション '' で囲まれた文字列部分は、Prism.js では .token.string というクラスが割り当てられている。
こちらも同様に、背景色の解除と文字色の設定をCSSに追加することで調整する。

/* 文字列（" " や ' ' で囲まれた部分）の反転を解除し、見やすい色に変更 */
.token.string {
  background: none !important; /* 背景色の反転を削除 */
  color: #e6db74 !important;   /* お好みの文字色（例: 黄色・ベージュ系） */
}

PowerShellのハイフン

(2026.09.28)
PowerShellの場合は、ハイフン - を含むパラメータ部分（-Recurse や -Filter など）に .token.parameter または .token.operator クラスが適用されているか、ハイフン部分単体にクラスが割り当てられているケースが多い。
以下のように punctuation（記号）や operator（演算子）も含めて反転を解除することで対応する。

/* PowerShell等のパラメータやハイフン記号の反転を解除 */
.token.parameter,
.token.operator,
.token.punctuation {
  background: none !important;

JavaScriptの予約語・キーワードフォントサイズ

(2026.10.03)
function や const などの予約語・キーワードに .token.keyword クラスが割り当てられているが .token.keyword のフォントサイズを親要素と同じサイズ（または固定サイズ）に上書きすることで対応する。

.token.keyword {
  font-size: inherit !important;
  background: none !important;
  vertical-align: baseline !important;
}

PHPの変数カラー

(2026.10.11)
PHPの場合、$ から始まる変数名には .token.variable クラスが割り当てられている。
背景色を解除し、適度な文字色を指定することで反転を解消する。

/* PHP等の変数の反転を解除 */
.token.variable {
  background: none !important; /* 背景色の反転を削除 */
  color: #fd971f !important;   /* お好みの文字色（例: オレンジ系） */
}

これまでの設定も含めて、背景反転が起きやすいトークン要素を一括で解除する場合は以下のようにまとめると管理しやすくなる。

/* 各種トークンの背景反転を一括解除 */
.token.parameter,
.token.string,
.token.operator,
.token.punctuation,
.token.variable {
  background: none !important;
}

/* 変数（$variable）の文字色 */
.token.variable {
  color: #fd971f !important;
}