LION MEDIAのシンタックスハイライトにhighlight.jsを使う方法

WordPressテーマ「LION MEDIA」のデフォルトのシンタックスハイライトしたソースコードの可読性が良くないと思ったことはないでしょうか？

LION MEDIAの使い方やLION MEDIAのカスタマイズのやり方を記事内で説明するときに使うCSSやPHP、JavaScriptなどのプログラミング言語を強調表示したシンタックスハイライトはhighlight.jsを使うことでパワーアップします。

LION MEDIAでhighlight.jsを使う方法は簡単にできます。良ければ読み進めてみてください。

1. LION MEDIAのシンタックスハイライト
- 1.1. LION MEDIAデフォルトとhighlight.jsの比較
2. highlight.jsをLION MEDIAで使う方法
- 2.1. CDNライブラリをheadとbodyで読み込む
- 2.2. CDNをfunctions.phpから読み込む
3. LION MEDIAで実際にコードをハイライトさせる使い方
4. highlight.jsを使い始めたら確認しておくべきこと

LION MEDIAのシンタックスハイライト

まずはWordPressテーマのLION MEDIAにhighlight.jsを使わないデフォルトのシンタックスハイライトがどんな感じなのかを見てください

LION MEDIAのデフォルトのままシンタックスハイライトすると、上記画像の表示になります。

寂しい印象が強くなってしまいます。

しかしLION MEDIAのデフォルトからhighlight.jsに変更すると、テキスト中のソースコードを、その分類ごとに異なる色やフォントで表示できるようになるので可読性が高くなるし、イケてるナウいやつへとカスタマイズされます。

LION MEDIAデフォルトとhighlight.jsの比較

highlight.js実装後

LION MEDIAデフォルト

highlight.jsを使ってシンタックスハイライトした画像とLION MEDIAのデフォルトのシンタックスハイライトを比較すると、かなりの違いがあることが分かります。

比較することで違いのわかる男、もしくは違いのわかる女になれたかと思います。

highlight.jsをLION MEDIAで使う方法

highlight.jsをLION MEDIAで使う方法は2つあります。

highlight.jsをCDN経由で使う方法
highlight.jsのライブラリをWebサーバーにアップロードする方法

上記の2つの方法なのですが、LION MEDIAでサーバーにアップして使う方法だと私は実装ができませんでした。

それなのでhighlight.jsを簡単に実装が可能なCDNを使う方法で説明をしたいと思います。

CDNとは（ContentDeliveryNetwork)の略でWebコンテンツをインターネット経由で配信するために最適化されたネットワークのこと。

Webサーバーにアップロードする方法はWebサイトを画面に表示するためにHTMLやCSSファイルをサーバーからダウンロードする必要がありますが、CDNを経由する方法だとサーバー分散できて負荷が不安定になる可能性を減らすことができます。

そしてCDNの方法でLION MEDIAにhighlight.jsを使う方法はLION MEDIAのheadから読み込む方法とfunctions.phpで読み込む方法があります。

それぞれ実装しやすいと思ったほうでhighlight.jsをLION MEDIAに使ってみてください。

CDNライブラリをheadとbodyで読み込む

LION MEDIAにhighlight.jsを使用するために必要なことは、スタイルの1つと共にライブラリにリンクして呼び出すこと、そしてそれを実行するinitHighlightingOnLoadです。

公式 highlight.jsのサイト

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

highlight.jsのコードをLION MEDIAに貼り付けるファイル場所

header.phpの</head>直上にstylesheetとJavaScript
footer.phpの</body>直上にinitHighlightingOnLoad

関連【HTML】headタグの場所を見つけて意味を理解する

関連ワードプレス bodyタグの場所がどこにあるかを覚える

それからLION MEDIAでシンタックスハイライトするときのhighlight.jsのデザイン変更はMonokaiというデザインならstylesheetの「default.min.css」を「monokai.min.css」に変更します。変更のときには「.css」の前に「min」を追加することを忘れないようにしてください。

公式 highlight.jsデモページ

highlight.jsのデモページで89種類のスタイルを見ながら選べるのでhighlight.jsのデモページで選んでみてください。

CDNをfunctions.phpから読み込む

もう一つの方法はLION MEDIAの子テーマ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' );

子テーマのfunctions.phpに貼り付けるときは「default.min.css」の部分をhighlight.jsのデモページを見てお好みのスタイルに変更できます。