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

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

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のデフォルトのシンタックスハイライトを比較すると、かなりの違いがあることが分かります。

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

 

 

Advertisement

 

 

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のデモページで選んでみてください。

 

 

Advertisement

 

 

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のデモページを見てお好みのスタイルに変更できます。

 

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がレンダリングブロックしたときの解決方法

 

レンダリングブロックしてなくてもサイトの表示速度が上がる可能性もあるので試してみてはいかがでしょうか。

WordPressテーマカテゴリの最新記事