WordPressテーマ「LION MEDIA」のデフォルトのシンタックスハイライトしたソースコードの可読性が良くないと思ったことはないでしょうか?
LION MEDIAの使い方やLION MEDIAのカスタマイズのやり方を記事内で説明するときに使うCSSやPHP、JavaScriptなどのプログラミング言語を強調表示したシンタックスハイライトはhighlight.jsを使うことでパワーアップします。
LION MEDIAで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です。
<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のデモページで89種類のスタイルを見ながら選べるのでhighlight.jsのデモページで選んでみてください。
CDNをfunctions.phpから読み込む
もう一つの方法はLION MEDIAの子テーマfunctions.phpに下記コードを貼り付けます。
「wp_enqueue_style」と「wp_enqueue_script」の関数を使用して読み込みするのでWordPress的に推奨されてる読み込み方法でhighlight.jsを使用できます。
/* 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のデモページを見てお好みのスタイルに変更できます。
LION MEDIAで実際にコードをハイライトさせる使い方
LION MEDIAにhighlight.jsのスタイルシートとJavaScriptを配置したら次は実際に記事内でソースコードをシンタックスハイライトさせる使い方です。
<pre><code>…</code></pre>
<pre><code>この中にソースコード</code></pre>記述した中にハイライトさせたいソースコードを書くと強調表示が適用できます。
上記は<pre><code>タグ内のコードを見つけて自動的に言語を指定できます。ですが自動検出がうまくいかない場合は次のようにclass属性をつけることで言語を指定できます。
<pre><code class=”html”>…</code></pre>
ちなみにWordPressの旧エディタを使用してる場合は<pre><code>タグを記述してハイライトさせますが、グーテンベルグでは<pre><code>タグを記述しなくてもソースコードブロックを出して記述すると自動でシンタックスハイライトされました。
highlight.jsを使い始めたら確認しておくべきこと
LION MEDIAにhighlight.jsをCDN経由で実装して使う場合だけなのか分かりませんが、私のLION MEDIAの環境ではレンダリングブロックをしていました。
それなのでLION MEDIAにhighlight.jsが使えるようになってから最初にレンダリングブロックをしていないか確認をしてください。
確認してhighlight.jsのstyle.cssとJavaScriptがレンダリングブロックしてたときは解決方法を下記にリンクしていておいたので読んでみてください。
関連 highlight.jsがレンダリングブロックしたときの解決方法
レンダリングブロックしてなくてもサイトの表示速度が上がる可能性もあるので試してみてはいかがでしょうか。