軽量なシンタックスハイライトJSライブラリ「highlight.js」をWordPressで使う
あなたが使っているテキストエディタのように、ブログ記事上に載せたコードをシンタックスハイライト(色づけ)してくれる軽量JavaScriptライブラリ「highlight.js」をサクッとWordPressで使ってみましょう。
highlight.js とは
highlight.js
は、Web上に載せたコードをお好みのカラースキーマでシンタックスハイライティングできるイカした軽量JavaScriptライブラリです。jQueryいらずで軽量・言語の自動判別が可能・マイナー言語にも対応などの特徴があります。このブログでも使っています。
以下は実際に動作している例です。
/* これはSCSS */
.posts__item-description {
font-size: 1.4rem;
margin-bottom: 1.4rem;
@media #{$mobile} {
display: none;
}
}
.posts__item-cat {
@extend %cat;
display: inline-block;
line-height: 3rem;
margin-right: 1rem;
}
/* これはPHP */
function shizuku_footer_styles_deregister() {
if ( !is_admin() ) {
wp_deregister_style( 'yarppRelatedCss' );
}
}
add_action( 'wp_footer', 'shizuku_footer_styles_deregister' );
イカしてますね。
WordPressへの導入方法
ダウンロード・もしくはCDNを利用
highlight.jsは以下のサイトからダウンロードすることができますが、CDNを利用することも可能です。CDN版では22のメジャーな言語にしか対応していないので、これ以外の言語もハイライトしたい場合は、使用したい言語にチェックを入れてダウンロードボタンからダウンロードします。
https://highlightjs.org/download/
functions.phpを編集してインストール
使用しているテーマのfunctions.phpに以下のコードを追加します。
/* functions.php */
function hljs_load() {
if ( is_singular() ) {
wp_enqueue_style( 'hljs-style', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/default.min.css' );
wp_enqueue_script( 'hljs-script', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js', array(), null, true );
wp_add_inline_script( 'hljs-script', 'hljs.initHighlightingOnLoad();' );
}
}
add_action( 'wp_enqueue_scripts', 'hljs_load' );
CDNを利用しない場合やカラースキーマを変えたい場合は適宜書き換えてください。カラースキーマの一覧はこちら(https://github.com/isagalaev/highlight.js/tree/master/src/styles)。CDNから利用する場合はファイル名の”.css”の前に”.min”を追加すればOKとのこと。
wp_add_inline_script
関数はWordPress 4.5以降で利用できます。
使い方
ハイライトしたいコードを <pre><code>CODE</code></pre>
という風に囲むことで利用できます。この際言語は自動的に判別されますが、間違っている場合はcode
要素に”html”や”css”などのクラスを付与することで言語を指定することが可能です。
また、同じくcode
要素に”nohighlight”クラスを付与することで、シンタックスハイライトを無効化できます。
その他の用法は公式サイトの usage をご覧ください。
他にもシンタックスハイライトができるプラグインはいくつかあるかと思いますが、highlight.jsは軽量で対応言語も多いので扱いやすくて気に入っています。テック系ブログにおすすめ。う〜ん、イカすぜ!