私のブログではプログラミング関連の投稿が多いので、コードを載せるときにはHighlighing Code Blockというプラグインを使ってコードを書いています。
ハイライトできる言語も豊富だったり、やろうと思えば自分で色をカスタマイズができるのでとても重宝しています。
少し欲張って「階層構造もハイライト表示とかしたいなぁ…」と思って色々と調べてみると、ハイライトではありませんがTreeviewというプラグインを導入することで、階層構造にアイコンが表示できることがわかりました。
root_folder/
├── a first folder/
│ ├── holidays.mov
│ ├── javascript-file.js
│ ├── some_picture.jpg
└── documents/今回はそのやり方についてご紹介します。
Treeviewの設定
Highlighing Code Blockでは、Prismサイト（https://prismjs.com/download.html）から ハイライトする言語の追加や、他の便利な機能 を追加することができます。
上記のサイトからファイルをダウンロードし、WordPressに設定することで機能が使えるようになります。
今回はTreeviewというプラグインを使用したいので、上のサイトからPlugins -> Treeview にチェックを入れ、ファイルをダウンロードします。
⚠️ もし既にPrismファイルを設定している方は、Prismファイル内にダウンロードした設定URLが記載されているので、URLリンクをクリックし TreeViewにチェックを入れてから再度ダウンロードしてください。
ファイルがダウンロードできたら、WordPressで利用できるように指定フォルダにダウンロードファイルを格納していきます。
Prismファイルの設置
さて、Prismファイルの格納先ですが、WordPressの「設定 → [HCB]設定 → 独自カラーリングファイル（or 独自prism.js）」の項目にあるパスを見にいきます。
下記画像の、赤線が引いてある部分が配置するフォルダパスになります。
私の場合は、ConoHa WINGというサーバーを使用していますので、該当サーバーの「ファイルマネージャー」というところからフォルダパスに移動します。
移動したら、ダウンロードしたファイル（それぞれprism.jsとprism.cssという名前にしています）を配置します。
ファイル配置後は、Highlithing Code Blockプラグインの設定をします。
WordPressの「設定 → [HCB]設定 → 独自カラーリングファイル」と「独自prism.js」に先ほど配置したファイル名を記載し、使用する言語セットに treeview: "Tree" と加えて 「変更を保存」ボタンを押します。
設定が完了したらあとは記事を書いて確かめるだけです。
記事を書くブロックに /highlighing code block と入力し、専用のブロックを作ります。そして先ほどの階層構造のコードを記載していきます。
最後に、言語設定部分を Tree に変更すると完了です。先ほど上で紹介したような階層構造にアイコンが表示されます。
root_folder/
├── a first folder/
│ ├── holidays.mov
│ ├── javascript-file.js
│ ├── some_picture.jpg
└── documents/
上が画像、下が記事内に組み込んだコードになります。
コマンド慣れしている方はアイコンがあって逆に見にくいと感じるかもしれませんが、私はアイコンがあった方が一目でわかるので良いと思いました。
長くなってしまいましたがこちらで完成です。
参考：https://prismjs.com/plugins/treeview/
〜 補足 – 上級者向け 〜
これだけでも重宝するんですが、VSCodeを使っている方や、プログラミングする方にとっては少々簡素すぎると感じたりします。
そんな時はPrism.jsとPrism.cssをカスタマイズすることで、名前や拡張子によって様々なアイコンを表示させることが可能です。
私の場合はDockerfileがフォルダ判定されてしまい少々分かりづらかったので、Dockerfileの時は専用のアイコンを表示するようにしました。
my_custom/
├── docker/
│ ├── Dockerfile
│ ├── docker-compose.yml
└── src/もしファイルがおかしくなっても、Prismファイル上部にあるURLで復元できるので是非やってみてはいかがでしょうか。
自分だけのオリジナル設定を作成してみてください。
まとめ
Highliging Code Blockはカスタマイズしやすく、言語も豊富なのでブログを書くときはかなり重宝しています。
こちらを利用してソースコードをQiita風に設定している記事もありますので、是非こちらも参考にしてみてください。
この記事が誰かの役に立てますように。