シンタックスハイライトの色は変更できる？カスタマイズ方法も！（配色：ダークモード：テーマ切り替えなど）

シンタックスハイライトの色は変更できる？カスタマイズ方法も！（配色：ダークモード：テーマ切り替えなど）

コードを読みやすく見せるシンタックスハイライトは、色を自由に変更できる場合がほとんどです。

エディタやWebサイト、ブログの表示環境に合わせて配色を整えると、可読性だけでなく作業効率やサイト全体の印象も変わります。

一方で、見た目だけを優先した配色は、コメントや文字列が見分けにくくなったり、ダークモードで目が疲れたりする原因にもなります。

この記事では、シンタックスハイライトの基本からテーマの選び方、CSSによる色変更、ダークモードへの対応までを順番に紹介します。

シンタックスハイライトの色変更の基本

それではまず、シンタックスハイライトの色変更について解説していきます。

色を変更できる主な場所

シンタックスハイライトとは、プログラミング言語の予約語、文字列、コメント、関数名などを種類ごとに色分けして表示する仕組みです。

Visual Studio CodeやWordPressのコード表示、Prism.js、highlight.jsなどでは、テーマまたはCSSの設定を変更することで配色を調整できます。

変更する場所は大きく分けると、エディタの設定画面、テーマファイル、追加CSS、プラグインの管理画面の四つです。

自分が編集している画面の色を変えたいのか、読者が見る記事内のコードブロックを変えたいのかを最初に切り分けると、作業の迷いを減らせます。

たとえばVS Codeではカラーテーマを選択し、Webサイトでは読み込んでいるCSSテーマを差し替える方法が一般的です。

WordPressの記事内で使うケースでは、テーマやコードハイライト用プラグインの設定に加え、外観の追加CSSで微調整することもあります。

色分けされる要素の種類

コードの色は、単純に文字単位で決まっているわけではありません。

構文解析によって付与されたクラス名やトークン名をもとに、キーワード、関数、数値、文字列、コメントなどへ異なるスタイルが当てられます。

要素	表示例	配色で意識したい点
キーワード	function、const、return	本文との差を出しつつ、派手すぎない色を選びます。
文字列	“hello”	引用符を含めて認識しやすい色が向いています。
コメント	// メモ	薄くしすぎると読めなくなるため注意が必要です。
関数名	render()	呼び出し箇所を追える程度のコントラストを保ちます。
数値	120、true	文字列や変数名と混同しない配色が便利です。
タグと属性	div、class	HTMLでは入れ子構造を見失わない色設計が重要です。

テーマごとに使われるクラス名は異なるため、色だけを見て判断せず、開発者ツールで対象のHTMLとCSSを確認すると確実です。

キーワードだけを強く目立たせるのではなく、コード全体の階層が自然に読めるかを基準にすると、実用的な配色になります。

変更前に確認したい読み込み方式

色を変更する前に、どのライブラリが構文ハイライトを生成しているのか確認しましょう。

Prism.jsではtoken keywordやtoken stringのようなクラスが使われることが多く、highlight.jsではhljs-keywordやhljs-stringなどのクラスが使われます。

WordPressテーマ独自のコードブロックでは、独自クラスやブロックエディタのスタイルが優先されていることもあります。

複数のテーマCSSを同時に読み込むと、意図しない色が適用される場合があります。

変更後の見た目が安定しないときは、CSSの読み込み順と、より詳細なセレクタが存在しないかを確認してください。

配色テーマの選び方

続いては、配色テーマの選び方を確認していきます。

ライトテーマに向く色設計

白または淡い背景でコードを表示するライトテーマでは、文字色と背景色の明暗差を確保することが大切です。

本文と同じ黒一色にするとコードの構造が埋もれますが、原色を多用しすぎると長いサンプルコードで視線が散ります。

一般的には、本文に近い濃いグレーを基本色にし、キーワードを青系、文字列を緑系、数値を紫系、コメントを落ち着いたグレー系に分けると読みやすいでしょう。

ライトテーマではコメントの文字色を薄くしすぎないことが特に重要です。

解説記事ではコメントに補足説明が書かれることも多いため、背景が白でも十分に読める濃さを残す必要があります。

ダークモードに向く色設計

ダークモードでは、黒に近い背景と鮮やかな文字色の組み合わせが定番です。

ただし、背景を完全な黒にして文字を純白にすると明暗差が強くなり、長時間読むと目が疲れることがあります。

背景は濃紺や濃いグレー、基本文字は少し明るさを抑えた白灰色にすると、落ち着いた画面を作りやすくなります。

キーワードに青、文字列に黄緑、関数名に水色、数値にオレンジなどを配置すると、暗い背景でも判別しやすくなります。

蛍光色を多用しないことも、見やすいダークテーマを作るコツです。

一部分なら印象的でも、コード全体に高彩度の色が並ぶと、情報量が多く感じられてしまいます。

アクセシビリティを意識した比較

配色を決める際は、好みだけでなくコントラスト比にも目を向けましょう。

色覚の違いがある読者にも情報が伝わるよう、赤と緑だけで意味を区別するような設計は避けるのが無難です。

色に加えて太字、背景色、下線、記号などを補助的に使うと、分類がより伝わりやすくなります。

確認項目	ライトモード	ダークモード
背景	白に近い明るい色	濃いグレーや濃紺
基本文字	濃いグレー	白に近いグレー
コメント	背景と十分に差のある灰色	暗く沈みすぎない灰色
境界線	淡いグレーで区切る	背景より少し明るい色で区切る
注意点	淡色文字による視認性低下	高彩度によるちらつき感

テーマの切り替え後は、短いコードだけでなく、コメントや入れ子が多い長めのコードでも確認してください。

一見きれいに見える配色でも、実際の利用場面では読みにくいことがあります。

CSSによるシンタックスハイライトのカスタマイズ

続いては、CSSによるシンタックスハイライトのカスタマイズを確認していきます。

コードブロック全体の背景と文字色

最初に整えたいのは、preタグとcodeタグで囲まれたコードブロック全体のデザインです。

背景色、基本文字色、余白、角丸、横スクロールの設定をそろえると、テーマ変更後も表示のバランスを保ちやすくなります。

コードブロックの余白が狭すぎると窮屈に見え、広すぎると記事の流れが途切れて見えます。

スマートフォンでの表示も考え、左右のpaddingは画面幅に応じて見直すとよいでしょう。

背景色だけを変えても、コード内のトークン色が以前のテーマのままでは統一感が出ません。

全体の土台を整えた後、キーワードや文字列の色を順番に調整する流れが効率的です。

Prism.jsのトークンカラー

Prism.jsを利用している場合、構文要素にはtokenというクラスと、keyword、string、commentなどの分類クラスが付与されます。

そのため、対象クラスに色を指定すれば、必要な部分だけをカスタマイズできます。

たとえばキーワードを青系、文字列を緑系、コメントをグレー系に指定すると、一般的な開発環境に近い見た目になります。

ただし、WordPressのテーマCSSやキャッシュ系プラグインの最適化設定によって、編集内容の反映に時間がかかることがあります。

反映されないと感じたら、ブラウザキャッシュ、サイトキャッシュ、CSSの読み込み順を順に確認してください。

highlight.jsと独自テーマの上書き

highlight.jsでは、hljsというクラスを起点にして各要素へスタイルが設定されます。

hljs-keyword、hljs-string、hljs-commentなどのクラスを確認し、現在使われているテーマの後に独自CSSを読み込む方法が基本です。

テーマファイルを直接編集すると、アップデート時に変更が失われる可能性があります。

WordPressなら子テーマ、追加CSS、独自スタイルシートなど、更新で消えにくい場所に記述する運用が安心です。

既存テーマを丸ごと書き換えるより、必要な色だけを上書きするほうが保守しやすいでしょう。

特に複数人でサイトを管理する場合は、変更したセレクタと色の意図をメモしておくと、将来の調整が楽になります。

ダークモードとテーマ切り替えの設定

続いては、ダークモードとテーマ切り替えの設定を確認していきます。

端末設定に合わせる自動切り替え

利用者の端末設定に合わせて配色を変える場合は、prefers-color-schemeを利用したCSSが役立ちます。

ライトモードを標準にし、端末がダークモードの場合だけ背景色とトークン色を上書きする設計にすると、自然な切り替えを実現できます。

この方法はJavaScriptを使わずに対応できるため、表示負荷を抑えたいサイトにも向いています。

自動切り替えでは、訪問者が意図的に選んだテーマを保持できない場合があります。

サイト全体にテーマ切り替えボタンを設置するなら、ユーザーの選択を優先する仕組みも検討したいところです。

手動切り替えボタンとの連携

手動のテーマ切り替えでは、body要素などにdark-modeやis-darkといったクラスを付け、CSSで配色を切り替える方法がよく使われます。

コードブロックもサイト全体のテーマに連動させることで、ページ内に白い領域だけが残る違和感を抑えられます。

JavaScriptでクラスを切り替える場合は、再読み込み後も選択を維持できるよう、ブラウザの保存機能を使う設計が便利です。

テーマ切り替えの対象は本文背景だけでなく、コードブロック、コピー按钮、行番号、スクロールバーまで含めて確認しましょう。

細部がライトテーマのままだと、完成度が下がって見えるだけでなく、ボタンの文字が読めないなどの問題につながります。

テーマ切り替え時の確認ポイント

ダークモード対応では、パソコンだけでなくスマートフォンとタブレットでも表示を確認します。

画面幅が狭い端末では、コードブロックの横スクロールと余白が使いやすいか、長い行が切れていないかを重点的に見ましょう。

確認場所	チェック内容
背景と文字	基本文字、コメント、記号が背景に埋もれていないか確認します。
リンクとボタン	コピー機能や関連リンクの文字色が読めるか確認します。
横スクロール	スマートフォンでコードを最後まで確認できるかを見ます。
切り替え直後	一瞬だけ別のテーマが表示されないかを確認します。
保存状態	再訪問や再読み込みでも選択したテーマが保たれるか確認します。

見た目のテストは、実際のHTML、CSS、JavaScript、PHPなど複数の言語で行うと安心です。

言語によって使われるトークンが異なるため、一種類のコードだけでは色不足に気付きにくいことがあります。

読みやすいコード表示の実践ポイント

続いては、読みやすいコード表示の実践ポイントを確認していきます。

行間と文字サイズの調整

コードブロックは本文より少し小さな文字で表示されることがありますが、小さくしすぎるとスマートフォンで読みにくくなります。

特に日本語コメントを含むサンプルでは、英数字だけのコードよりも窮屈に感じやすいため、行間を十分に確保するとよいでしょう。

等幅フォントを使うと桁がそろい、インデントや表形式の値を追いやすくなります。

文字サイズ、行間、余白は配色と同じくらい可読性に影響する要素です。

テーマを変更した直後に読みにくさを感じた場合、色ではなくフォントサイズやline-heightが原因であるケースも少なくありません。

行番号とコピー機能の扱い

長いコードには行番号が役立ちます。

解説文で特定の行を案内できるため、初心者向けの記事や手順書では特に便利な機能です。

一方で、短いサンプルに毎回行番号を付けると、かえって情報量が増えて見えます。

コードをコピーするボタンも便利ですが、背景と同化すると存在に気付かれません。

アクセシビリティの観点では、色の変化だけで完了を知らせず、コピー済みなどの文字表示も加えると伝わりやすくなります。

記事内デザインとの統一

シンタックスハイライトは、コードだけを独立して美しく見せるためのものではありません。

記事の本文、見出し、表、注釈ボックスとの関係を考えることで、ページ全体が読みやすくなります。

たとえばサイトのブランドカラーが青系なら、キーワードに近い青を使いながらも、リンク色と完全に同じにしない工夫ができます。

コードブロックの枠線、角丸、余白も、サイト内のボックス装飾とそろえると自然です。

配色の正解は一つではなく、読者が内容を迷わず理解できるかが最終的な判断基準になります。

デザインを決めたら、実際の記事へ複数のコード例を配置し、読者目線でスクロールしながら違和感がないか確かめてください。

シンタックスハイライトの色変更のまとめ

シンタックスハイライトの色は、エディタのテーマ設定、Prism.jsやhighlight.jsのテーマCSS、WordPressの追加CSSなどで変更できます。

ライトモードでは文字の濃さを保ち、ダークモードでは高彩度の使いすぎを避けると、長いコードも読みやすくなります。

また、背景色だけでなく、キーワード、文字列、コメント、関数名、行番号、コピー機能までまとめて調整することが大切です。

配色を変更した後は、パソコンとスマートフォンの両方で実際のコードを確認することをおすすめします。

テーマ切り替えに対応させ、サイト全体との統一感も整えれば、コードを掲載する記事の品質をさらに高められるでしょう。