highlight.jsでSyntax highlight

Unity Logo
UnityでのNuget利用
2015年11月21日
Wordpress logo
Jetpackの紹介記事
2015年11月22日

highlight.jsでSyntax highlight

Wordpress logo

Syntax highlightは技術系ブログではほぼ必須なのですが結構重たくなってしまいます。
そこで比較的軽量、cdnから読み込むだけで実行可能なhighlight.jsを導入してみます。

一番簡単な導入はheader.phpに

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

上記を追加するだけ。

公式サイトからダウンロードする事でcdnを使わず自サイトに設置することもできます。
また、こちらからハイライトスタイルを選んで読み込むことでスタイルを変更することも可能です。
デモで実際の表示を確認しながら選ぶ事もできるので参考までに。

ちなみに筆者の使っているテンプレートではpreにwhite-space pre-wrapが指定されていたり、codeにwhite-space nowrapが指定されていてうまく表示されませんでした。
これらはオーバーライドするか削除しましょう。

またちょっとしたTipsとしてjsかスタイルシートどちらかをfooter.phpで読み込む等で読み込みのオーバーヘッドを減らせると思うのでアクセス数の多いサイトでは気休め程度にやってみると良いかもしれません。

Kei
Kei

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です