【コピペOK】Highlighting Code Blockで”VScode風”の色合い(配色)を再現してみた【css】

こんにちは、コンポタ課長です。

皆さんは「Highlighting Code Block」というプラグイン、使っていらっしゃいますでしょうか?

(HTMLやPythonなどの)ソースコードをキレイに表示してくれる」というステキなプラグインなのですが、

テーマ(カラーリング)が「Light」と「Dark」しかない!

このプラグイン、他のと比べると「色合いのカスタマイズ機能」(シンタックスハイライト)が弱くて、カスタマイズの幅が狭いんですよね

でも、

コンポタ課長
コンポタ課長

変にバグもなくて、軽くて使いやすいし、できればこのプラグインで色合い変えたいな~

と思いまして、今回の記事を書くに至りました。

ということで、さっそく本題に入りましょう!

ちなみに上記の「Dark」テーマはこんな感じの色合いです。

Pythonのソースコード

かなり有名なプラグインなので、この色合いを見たことある方もいらっしゃるのでないでしょうか。

Highlighting Code Blockの色合いをVScode風にしてみた

デザイン、色合いを変える様子

目標は”VSCode”風

今回は、VSCode風の色合いを目指してカスタマイズしてみようと思います

Visual Studio Code – コード エディター | Microsoft Azure
ほぼすべての言語で動作し、任意の OS で実行される強力なコード エディターである Visual Studio Code を使用して、Azure 上で編集、デバッグ、デプロイを行います。

VScode(visual-studio-code)とはMicrosoftが作った色々できる便利なエディターで、筆者は普段これを使ってコーディングをしているのですが、

これのデフォルトのテーマ(Dark+)がもうとにかく見やすい配色なのです

VSCodeでPythonのソースコードを開いた時の様子
VSCodeでJavaScriptのソースコードを開いた時の様子

使ったことがある人にはわかってもらえると思うのですが、自然にコーディングに集中できるといいますか、他人のソースコードを読むことさえも全然苦になりません。

初めてVSCodeを使ったときは「色が付いてるだけでこんなに読みやすくなるのか」と驚いたものです。

こんな環境でコーディングしている中で、エラー調査で見つけたネットの記事のソースコードがモノクロだった時の絶望感ったら!!見づら過ぎて内容が全然頭に入ってきません;;

ただのモノクロのコード。見づらい…

もっと見やすいソースコードの記事が増えてほしい!

ということで、今回はHighlighting Code BlockをVScode風にすることを目指して作業していきたいと思います。

どんな感じになるのか?(画像で紹介)

今回の記事でどんな感じの色合いにできるか?の結果を先にお見せしたいと思います

以下がHighlighting Code BlockをVScode風にカスタマイズした結果です。

Highlighting Code Blockをカスタマイズした様子(Python)
Highlighting Code Blockをカスタマイズした様子(JavaScript)

比較として、先ほど載せたVSCodeの画面がこちら。

VSCodeでPythonのソースコードを開いた時の様子(再掲)
VSCodeでJavaScriptのソースコードを開いた時の様子(再掲)

どうでしょうか。全く同じではないですが、かなり見やすい色合いではないかと思います。
(色合いが全く同じでないのは、Highlighting Code BlockがVSCodeほど詳細にPythonのコードを解析していないためです。もっと解析してほしい…)

いつも慣れ親しんだVSCode風の色合いで、デフォルトよりも読みやすいと思います。

またブログの記事では「ソースコードブロックの背景は暗くても記事全体は明るい背景」というパターンも多いかと思いますので、文字の色もVSCodeと全く同じではなく視認性が上がるよう調整しております

いかがでしょう、カスタマイズしてみたくなりましたか?

コンポタ課長
コンポタ課長

とても簡単に実現できますので、さっそく手順を見ていきましょう!

Highlighting Code Blockの色合いをVScode風に変える手順

作業をする人

今回はなるべく作業をカンタンにするため、cssを変更する手法でカスタマイズすることにします。

Highlighting Code Blockの色合いを変える手順
  1. style.cssを開く
  2. 記述を追加する(コピペOK)

順番に見ていきましょう。

1. style.cssを開く

まずはcssファイルの編集画面を開きましょう。

WordPressの管理画面から「外観」→「テーマエディター」(環境によっては「テーマファイルエディター」)と選択します

style.cssというファイルを開いていることを確認してください。

2. 記述を追加する(コピペOK)

次に、以下の内容をコピーして、

/* VSCode */
.hcb_wrap.hcb_wrap code, .hcb_wrap.hcb_wrap pre { color: #9cdcfe!important; background: #1e1e1e!important;}/* 全体 */
.token.keyword { color: #c586c0!important;}/* 予約語 */
.token.keyword.def { color: #569cd6!important; font-style: initial!important;}/* 予約語def */
.token.string { color: #ce9178!important;}/* 文字列 */
.token.comment { color: #7ba85f!important;}/* コメント */
.token.class-name {color: #38cdae!important;}/* クラス名 */
.token.function { color: #dcdcaa!important;}/* 関数 */
.token.operator, .token.punctuation { color: #c8c8c8!important;}/* 演算子・記号(句読点) */
.token.number { color: #bcd2b0!important;}/* 数字 */
.token.boolean { color: #569cd6!important;}/* ブール */
.token.interpolation .token.punctuation { color: #569cd6!important;}/* リテラル内の記号(句読点) */
.token.builtin { color: #e3e3e3!important; font-style: initial!important;}/* 組み込み */

先ほどの画面に貼り付けます(ペースト)

人によってはすでに記述があるかもしれませんが、下に追加する形で貼り付けてください

後は「ファイルを更新」ボタンを押して内容を保存します

作業はこれだけです!

結果

再掲ですが、結果は以下のようになります。

Highlighting Code Blockをカスタマイズした様子(Python)(再掲)
Highlighting Code Blockをカスタマイズした様子(JavaScript)(再掲)

今回のcssでは文字色や背景色を指定しているだけなので、文字コードを変えてやればさらに自分好みにカスタマイズできます

とても簡単なのでぜひ挑戦してみてください!

ちなみに当ブログでも今回のcssを更にカスタマイズした配色を使っています。

まとめ:簡単な手順でソースコードをVScode風に表示できました!

資料をまとめている様子

とても簡単な手順でHighlighting Code Blockの色合いをVScode風にカスタマイズできました!

よくネット上でソースコードをモノクロなまま公開している記事を結構な頻度で見かけますが、個人的にはめちゃくちゃ見づらいので是非とも色を付けて公開してほしいですね。

正直筆者はソースコードがモノクロだったら、見た瞬間にブラウザバックしてしまうほど見る気が削がれてしまいます。
(それでも他に有益な情報がなくて結局その記事に戻ってきてしまうことが多いですが(笑))

どうしても読まなきゃいけないときは内容をVSCodeにコピペして読んだりしているほどで、筆者ほどではないとしても「モノクロだと読みづらい…」と感じる人は多いんじゃないかと思います。

ソースコードが読みやすいだけで「いいサイトだな」と思ってもらえる確率はかなり上がるんじゃないでしょうか。
(Qiitaとかもソースコードが読みやすくて、筆者は「いいサイトだな」と思います)

色を付けるだけでも読者の心証はかなりよくなると思いますので、是非Highlighting Code Blockを使っている皆さんはカスタマイズしてもらえればと思います!

それでは!

タイトルとURLをコピーしました