• このエントリーをはてなブックマークに追加

プラグインWP Code Highlight.jsでソースココードを素早く表示

葉(よう)葉(よう)

どうも。葉です。ブログを運営する中でプログラムのソースコードを記事内に記入したいことってありますよね?

そんな時に、シンプルでブログ表示速度への負担の少ないソースコード表示方法があったら良いなぁ。。。なんて思いませんでしたか?

そんな悩みを解決してくれるのが、今回紹介するWordPressプラグイン「WP Code Highlight.js」です。シンプル、軽い、導入が簡単の三拍子が揃っているので初心者の方でも気軽に使うことができますよ。

ということで「WP Code Highlight.js」を導入してソースコードを表示する方法を1つ1つ丁寧に解説してきます。

コードの表示方法をCrayon→WP Code Highlight.jsにくら替えした理由!

「WP Code Highlight.js」の使い方の解説の前に、今回僕が「WP Code Highlight.js」を導入することにした理由とその過程をお話します。

他のシンタックスハイライトとの比較を紹介しているのでそれなりには役立つと思います。

ちなみに、シンタックスハイライトというのは、テキストを分類ごとに異なる色やフォントで表示するものです。ソースコードを表示するときには、シンタックスハイライトを使うことで綺麗で見やすくなります。

葉(よう)葉(よう)

「そんなのどうでもいいよ!さっさと使い方を教えて!」という方は次章の「WP Code Highlight.jsの導入」へ進んでください。

僕は、もともとWordPressにソースコードを表示させる方法としてプラグイン「Crayon Syntax Highlighter」を使っていました。

機能性も十分だし、デザインも気に入っていたのでですが、表示速度が遅いということだけが少し気になっていたんです。

そこで、WordPressプラグインP3でブログへの負荷を計測してみたところ、次のようにプラグイン1つで0.16秒(全体の15%)ものロード時間がかかっていることがわかりました。

Crayon Syntax Highlighterロード時間

ブログ表示速度は、検索エンジンの表示ランキングや離脱率にも影響してくるので、「可能な限り早くしたい!」と思い、「Crayon Syntax Highlighter」からのくら替えを決意しました。

シンタックスハイライトの比較をしました!

ただ、今後、シンタックスハイライトを何度も変更するなんて面倒なことはしたくないので、しっかりと比較してからくら替え先を決めました。

Crayonの代替に検討したのは次の4つ

くら替え先として検討したのは次の4つです。

  • プラグイン「SyntaxHighlighter Evolved」
  • Google Code Prettify
  • highlight.js
  • プラグイン「WP Code Highlight.js」
葉(よう)葉(よう)

「表示速度・導入の簡単さ」重視で比較しました。(2016年5月時点)

プラグイン「SyntaxHighlighter Evolved」

  • 「Crayon Syntax Highlighter」よりもシンプルで軽い。
  • 他の3つに比べると重い。
  • 他の3つより機能は豊富。

Google Code Prettify

  • WordPressプラグインではない。
  • 表示速度が早い。
  • 行番号が表示できる。
  • ここ数年更新していない。

highlight.js

  • WordPressプラグインではない。
  • 表示速度が早い。
  • 一番シンプル。右側の行表示もない。
  • 行番号が表示できない
  • 対応言語が多い

プラグイン「WP Code Highlight.js」

  • 「highlight.js」をプラグインで使える
  • Crayonからの移行が簡単

   シンプルで導入も簡単な「WP Code Highlight.js」に決定

最後まで「Google Code Prettify」と「WP Code Highlight.js」で悩みましたが

  • 「highlight.js」が更新され続けていること(2016年5月時点)
  • 「WP Code Highlight.js」も更新され続けていること(2016年5月時点)
  • プラグインなので導入が簡単

の3点より「WP Code Highlight.js」を導入することにしました。

「WP Code Highlight.js」の導入

だいぶ前置きが長くなってしまいましたね。ここからは、プラグイン「WP Code Highlight.js」の導入方法を1つ1つ丁寧に解説していきます。

まず、WordPress管理画面の左メニューより「プラグイン→新規追加」をクリックします。

WP Code Highlight.jsのインストール1

プラグインの検索窓に「WP Code Highlight.js」と入力し、「エンターボタン」を押します。

WP Code Highlight.jsのインストール2

WP Code Highlight.jsの「今すぐインストール」をクリックします。

WP Code Highlight.jsのインストール3

「プラグインを有効化」をクリックします。

WP Code Highlight.jsのインストール4

以上で、ソースコードをシンタックスハイライトで表示させるプラグイン「WP Code Highlight.js」のインストール・有効化は完了です。

WP Code Highlight.jsのインストール5

「WP Code Highlight.js」の設定

次に、「WP Code Highlight.js」の設定を行っていきます。

WordPress管理画面の左メニューより「設定→WP Code Highlight.js」をクリックします。

WP Code Highlight.jsの設定1

すると、設定画面が開くので以下内容を参考に設定を行ってください。

CDNの設定

WP Code Highlight.jsの設定2

詳しい説明は省きますが、CDNを利用することでサイトの表示速度向上につながります。ここでは、「Public CDN:cdnjs(highlightjs.org recommend)」を選択してください。

CDNとは?
CDNとは、コンテンツ・デリバリ・ネットワークの略称で、ウェブコンテンツを配信するのに最適化されたネットワークの事を言います。

Packageの設定

WP Code Highlight.jsの設定3

ソースコードの対応言語数を選択できます。基本的には「Common」を選択しておけば問題ありません。

Color Scheme:highlight.js demoの設定

WP Code Highlight.jsの設定4

シンタックスハイライト(ソースコード表示)のデザインを変更できます。

デザインサンプルは、「highlight.js demo」にある「Styles」を参照してください。ちなみに私は、「Rainbow」を使っています。

Highlight.js Optionの設定

WP Code Highlight.jsの設定5

デフォルトのままで問題ありません。

  • Highlight.js Option – Tab replace:
  • Highlight.js Option – Class prefix:
  • Highlight.js Option – Use BR:
  • Highlight.js Option – Languages:

You can add some additional CSS rules for better display:

WP Code Highlight.jsの設定6

デフォルトのままで問題ありません。

CrayonやSyntax Highlighterから移行する場合

WP Code Highlight.jsの設定7

他のシンタックスハイライトから移行する場合は、以前利用していたシンタックスハイライトにチェックを入れておきましょう。そうすることで、「記事内のソースココード」を書き換えることなく「WP Code Highlight.jsのシンタックスハイライト」を使うことができます。

移行可能なシンタックスハイライトは次の3つです。

  • Syntax Highlighter Compatiable
  • Prettify Compatible
  • Crayon Syntax Highlighter Compatiable

※以前使っていたシンタックスハイライトは、無効化または、削除してください。

ショートコード利用の有無

WP Code Highlight.jsの設定8

こちらにチェックを入れると、 ソースココードを[code]~[/code]で囲むことでシンタックスハイライト表示ができるようになります。

個人的には、必要性を感じていないのでチェックは入れていません。

ソースコードを記事上で表示させてみる

ここからは、記事内にソースココードを表示させてみましょう。

WordPress管理画面の左メニューより「投稿→新規追加」をクリックし記事投稿画面に移動します。

WP Code Highlight.jsの使い方1

記事投稿画面で「テキスト」をクリックします。

WP Code Highlight.jsの設定9

方法1:<pre><code>~</code></pre>(表示が崩れた)

コードを記述する部分に次のコードを入力してくささい。

<pre><code>ソースコードを自動判定</code></pre>

すると、次のようなシンタックスハイライト表示になります。

ソースコードを自動判定

なお、入力する言語を指定したい場合は次のコードを参考にしてください

<pre><code class=”html”> 言語にHTMLを指定 </code></pre>

この場合の表示は次のようになります。見かけ上は、何も変わってないですね。笑

 言語にHTMLを指定 

※方法1を使用すると、なぜか、記述した部分より下の文章の行間が崩れました。実際、方法2を読み進めていくとシンタックスハイライト表示部分や引用部分の上下の表示感覚が広くなています。

これは、方法1でシンタックスハイライト表示を行ったことによる影響であり、方法2が悪いわけではありません。僕だけに起こった事象かも知れませんが、何かあると嫌なので方法1はあまりおすすめしません。

方法2:[code]~[/code](おすすめ)

2つ目の方法はショートコードを使用します。次のショートコードを記述してください。

[code]ソースコードを自動判定[/code]

すると、次のようにシンタックスハイライト表示になっているはずです。

ソースコードを自動判定

なお、入力する言語を指定したい場合は次のコードを参考にしてください。

[code lang="css"] 言語にCSSを指定 [/code]

すると次のような表示になります。こちらも表示自体は何も変化ありませんね。笑

 言語にCSSを指定 

まとめ

「WP Code Highlight.js」の導入から設定方法、使い方までを丁寧に解説しました。シンプルさを求めている人にはもってこいのプラグインなのでぜひ取り入れてください。

また、他のシンタックスハイライトとの比較しながら、私が「WP Code Highlight.js」を選んだ理由もお話させていただきました。

どのシンタックスハイライトを使おうか悩んでいる人に少しでも参考になっていたら嬉しいです。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

プラグイン