「Highlighting Code Block」よりも「highlight.js」がおすすめ！という話

コードの表示は「highlight.js」がおすすめです。
超シンプルで軽くてSEO的にも良い。

「Highlighting Code Block」が最近は人気ですが、
こちらよりもおすすめしたい。

１、highlight.jsがおすすめな理由

自分でCSSとjsを設置して使うので、カスタマイズ性が良い。
（プラグインでは無い）

プラグインの「Highlighting Code Block」は有効化すると、
全てのページにおいて専用のCSSとjsを読み込むので遅くなってしまう。
必要なページだけ読み込むようにもできますが、それでもやや重ため。
（詳細：「Highlighting Code Block」を使う記事だけCSSを読み込む方法）

「highlight.js」は「js」と「css」を手動で設置するだけで使える。
容量も少なく、必要なページだけ読み込むことも簡単。
ページ表示速度も速くなりGoogleからも怒られない。

２、設置方法

簡単に説明します。

１、公式HPからダウンロードする
２、「highlight.min.js」と「styles」にあるお好きなCSSをサーバーへアップ
３、下記コードをhead内にコピペ（CSS・フォルダ名は各自変更を）

<?php if(is_single() && !empty($post->sosu)): ?>
<link rel="stylesheet" href="/highlight/agate.min.css">
<script src="/highlight/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<?php endif; ?>

※各CSSのサンプルはこちら
※CDNを使う場合はこちら
※CSSの量は少ないので既存のCSSの中に書いても良い

記事ページでかつ、カスタムフィールド「sosu」に値がある場合だけ表示します。
ソースコードを書く記事だけ「sosu」に1でも入れておけばいい。
このあたりはお好みで設定ください。

３、highlight.jsの良くない点

CSSデザインがどれもいまいちなよう思える。

どれもカラフルすぎる。
もっとシンプルなのが良いのですが無い。
そのため、自分でCSSをカスタマイズする必要があります。

自分もかなり変更して、Qiitaに近い色合いにしました。
CSSを見ればかなり簡単だとわかるので、是非やってみてください。
このサイトので良ければパクってください。