「Highlighing Code Block」のプラグイン「Treeview」を導入したらコードブロックのテーマカラーが反映されない時の解決方法

コードを表示させたい時に便利なHighlighing Code Blockというプラグインを使っているのですが、「階層構造」もアイコンなんかで表示できたら見やすいかなぁ…と思い、色々調べていたところ、とても分かりやすい記事を発見！！

【Highlighing Code Block】Treeviewを入れて階層構造コードを見やすくしてみた

私のブログではプログラミング関連の投稿が多いので、コードを載せるときにはHighlighing Code Blockというプラグインを使ってコードを書いています。 ハイライトできる言語も豊富だったり、やろうと思えば自分で色をカスタマイズがで

www.teru2teru.com

こちらの記事を参考に「Treeview」というプラグインを導入して、階層構造にアイコンを表示させることが出来ました。ありがとうございます！（以下が見本です）

root_folder/
├── main/
│   ├── test.mov
│   ├── javascript.js
│   ├── picture.jpg
└── documents/

任意のテーマカラーが一部反映されない

しかし、ここで謎の現象が起きてしまいました…。

prism.comからデータをダウンロードする際に、テーマカラーを「TOMORROW NIGHT」にしたのですが、

• コードブロック内の「背景色」がデフォルトになる
• コードの各行の「背景色」がデフォルトになる
• CSSなどのプロパティの「値」の文字色がデフォルトになる

上記の3箇所で、デフォルトカラーが反映されてしまう現象が起きてしまいました…。

prism.cssを編集する

そのため、ダウンロードしてきたprism.cssを編集する必要があります。
編集自体はとても簡単で、各プロパティの値の後ろに「!important」（使用したプロパティを最優先で使用するための指示）を付けてあげるだけです。

code[class*=language-],
pre[class*=language-]{
    color:#ccc!important; /* ← CSSなどのプロパティの「値」の文字色 */
    background:none!important; /* ← コードの各行の「背景色」 */
・
・
・
}

pre[class*=language-]{
・
・
・
}:not(pre)>code[class*=language-],
pre[class*=language-]{
    background:#2d2d2d!important /* ← コードブロック内の「背景色」 */
}

これでひとまず任意のテーマカラーが反映されました！

コードの言語表示を好きな色に変更する

右上に表示される言語表示ですが、こちらもデフォルトカラーが反映されてしまいますので、気になる方は任意のテーマカラーに合わせて好きな色に変更しちゃいましょう。

言語表示のスタイルについては以下のようにprism.cssの最後尾に追記します。
（ダウンロードしてきたprism.cssの中に言語表示部分のスタイルの記述が見つけられず、追記する方法にしました…。もし他に方法がありましたらコメントなどで教えて頂けますと嬉しいです。）

.hcb_wrap>pre:before {
    background-color:#000!important; /* ← 言語表示の背景色 */
    color:#fff /* ← 言語表示の文字色 */
}

prism.js/prism.cssは以下サイトよりダウンロードできます。

Download ▲ Prism

prismjs.com