WordPress:シンタックスハイライトするならPrism.js

WordPressでソースコードを色分けして表示(シンタックスハイライト)するプラグインとして人気が高いのが「Crayon Syntax Highlighter」ですが、このプラグインは高機能な反面、サイトの表示速度が遅くなることがあります。

そこで今回紹介したいのは、軽量かつ多機能なシンタックスハイライター「Prism.js」です。

Prism.jsとは

「Prism.js」は、シンタックスハイライトができるJavaScriptライブラリです。

特徴は、動作が軽く、かつ多機能な点です。主な機能としては、行番号表示・指定行のハイライト・ツールバーの表示などがあり、これ以外にも豊富な機能が用意されています。

ちなみに、実際の表示は以下のようになります。

<pre class="line-numbers"><code class="language-css">h1 {
border-bottom: solid 3px black;
/*線の種類(実線) 太さ 色*/
}</code></pre>

Prism.jsの導入方法

導入方法は、WordPressのプラグインに比べると一手間かかりますが、以下の流れで導入できます。

公式ダウンロードサイトへアクセス

Prism.js公式サイトへアクセスし、サイト上部の「Download」ボタンをクリックします。

カスタマイズ画面が表示されるので、各設定項目を設定します。

圧縮レベルの選択

高度なカスタマイズをする予定がない限り、「Minified version」のままでOKです。

テーマを選択

ベースとなるデザインを選択します。

デザインは、7種類用意されているので好きなテーマを選びます。
イメージに合ったテーマがなくても、CSSを編集すれば後からデザインのカスタマイズも可能です。ちなみに、上記の表示サンプルは「Tommorow Night」です。

使用言語を選択

よく使う言語にチェックを入れましょう。

ちなみに、私は以下を選択しました。

  • Markup
  • CSS
  • C-like
  • JavaScript
  • Bash
  • Batch
  • PHP
  • PowerShell
  • Vim

追加機能を選択

追加したい機能を選択します。
お好みで必要なプラグインを追加してください。

ちなみに、私は以下を選択したました。

  • Line Numbers
  • Show Language
  • Toolbar
  • Command Line

他にもたくさんのプラグインが用意されています。各プラグインの名前のリンクをクリックすると、機能について説明したページが表示されるので、どんな機能か想像がつくと思います。

ファイルのダウンロード

ファイルはJSとCSSの2つに分かれているので、両方ダウンロードします。

WordPress環境にファイルをアップロード

ダウンロードした二つのファイルを、テーマディレクトリ(子テーマがある場合は、子テーマディレクトリ)直下にアップロードします。

アップロードができたら、ファイルを呼び出す記述を「functions.php」に追記してください。

function my_prism() {
    wp_enqueue_style( 'prism-style', get_stylesheet_directory_uri() . '/prism.css' );
    wp_enqueue_script( 'prism-script', get_stylesheet_directory_uri() . '/prism.js', array('jquery'), '1.9.0', true );
   }
add_action('wp_enqueue_scripts', 'my_prism');

これで、Prism.jsが利用できるようになりました。

まとめ

以下の投稿で、いくつか表示方法をご紹介しています。

WordPress:Prism.jsでいろいろな表示
Prism.jsでのコードハイライト方法のご紹介です。 ちなみに、Prism.jsの導入方法は、こちらで紹介しています。 CSS...