Prism.jsという軽量なSyntaxHighlighterの使い方

2017年9月24日ブログ運営

ソースコードのシンタックスハイライトにCrayon Syntax highlighterというプラグインを使用していたのですが、どうやらこのプラグインは非常に重いそうです。

Luxeritasテーマ開発者のるな様が、Crayon Syntax highlighterをコケおろしてました笑(有名だけど個人的に使いたくないWordPressプラグインTOP3 | Thought is free)

そこで、代替となるスクリプトがないか調べていたのですが、結果、Our Code WorldというサイトでおすすめされていたPrism.jsというスクリプト(Top 5 : Best code syntax highlighter javascript plugins)を使用してみることにしました。

軽量な上にhtml5の書き方を意識しているらしいです。

Prismを使用する前の準備

公式サイトにThird Party Tutorialsとして掲載されていた以下サイトのやり方に従っています。英語が読める方は以下サイトをご参照ください。

How To Implement Prism.js Syntax Highlighting Into Your WordPress Site – Crambler

prism.jsとprism.cssのダウンロード

PrismのDownload画面からPrism.jsとPrism.cssのダウンロードを行ないます。

Compression levelとThemesの選択

Compression Levelは、知識のある方以外は、minified versionを選びましょう(こちらの方がファイルサイズが小さい為)。

Themesの欄で、使いたいテーマにチェックをいれます(どのテーマを使用するかで、ソースコードにどんな色付けがされるのかが変わります)。

私はOKAIDIAを選びました。

シンタックスハイライトを利用したい言語を選択

使用する言語にチェックをいれます。

使用するプラグインを選択

使用するプラグインにチェックをいれます。私はLine Highlight(特定の行をハイライトできるようにする)とLine Numbers(コード行を表示できるようにする)というプラグインを使用することにしました。

最後に、”DOWNLOAD JS”ボタンと、”DOWNLOAD CSS”ボタンを各々クリックし、prism.jsとprism.cssをダウンロードします。

ダウンロードしたJavascriptとCSSを設置

以下の子テーマの場所に設置します。

  • wp-content/themes/(子テーマの名前)/prism.js
  • wp-content/themes/(子テーマの名前)/prism.css

もしもJavascriptやCSS用のディレクトリを別途作りたいという方は、以下のように保管することもできます(あくまで一例です)。

  • wp-content/themes/(子テーマの名前)/js/prism.js
  • wp-content/themes/(子テーマの名前)/css/prism.css

functions.phpを編集

以下の子テーマのディレクトリにあるfunctions.phpを編集します。

wp-content/themes/(テーマの名前)/functions.php

そこに以下のコードを記載します。

<?php
    // Function to add prism.css and prism.js to the site
    function add_prism() {

      // Register prism.css file
      wp_register_style(
        'prismCSS', // handle name for the style so we can register, de-register, etc.
        get_stylesheet_directory_uri() . '/prism.css' // location of the prism.css file
      );

      // Register prism.js file
      wp_register_script(
        'prismJS', // handle name for the script so we can register, de-register, etc.
        get_stylesheet_directory_uri() . '/prism.js' // location of the prism.js file
      );

      // Enqueue the registered style and script files
      wp_enqueue_style('prismCSS');
      wp_enqueue_script('prismJS');
    }

    add_action('wp_enqueue_scripts', 'add_prism');
?>

設置場所を子テーマ直下ではなく、(子テーマ)/css/prism.css, (子テーマ)/js/prism.jsにした人は以下の修正が必要です。

  • wp_register_styleの中にあるget_stylesheet_directory_uri() . '/prism.css'get_stylesheet_directory_uri() . 'css/prism.css'に修正
  • wp_register_scriptの中にあるget_stylesheet_directory_uri() . '/prism.js'get_stylesheet_directory_uri() . 'js/prism.js'に修正

結果として、以下のようなコードになります。

<?php
// Function to add prism.css and prism.js to the site
function add_prism() {

  // Register prism.css file
  wp_register_style(
    'prismCSS', // handle name for the style so we can register, de-register, etc.
    get_stylesheet_directory_uri() . 'css/prism.css' // location of the prism.css file
  );

  // Register prism.js file
  wp_register_script(
    'prismJS', // handle name for the script so we can register, de-register, etc.
    get_stylesheet_directory_uri() . 'js/prism.js' // location of the prism.js file
  );

  // Enqueue the registered style and script files
  wp_enqueue_style('prismCSS');
  wp_enqueue_script('prismJS');
}

add_action('wp_enqueue_scripts', 'add_prism');
?>

Prism.jsの基本的な使い方

色付けしたいコードを、以下のように<pre><code>~</pre></code>で囲みます。

<pre><code class="language-javascript">
    var myObject = {
      property1: "something",
      property2: 5,
      property3: true
    };
</code></pre>

は含めません
codeタグにclass="language-xxxx"という形式で使用する言語を指定するだけで、Syntax Highlightされます。

例えば、phpであればclass="language-php"、pythonであればclass="language-python"、htmlであればclass="language-markup"といった具合で指定を行います。

使用できる言語と指定の仕方はPrism公式サイトのSupported-languagesに一覧が記載されています。

Prism.jsではhtml5の仕様書に準拠した書き方が可能

上記の書き方は、html5の文法的に正しい書き方となります。軽量な上に、文法的に正しい書き方ができる点はPrism.jsの良いところ。

HTML5の仕様書を見ると、コードの掲載の仕方として以下のような記載があります。

There is no formal way to indicate the language of computer code being marked up.
Authors who wish to mark code elements with the language used, e.g. so that syntax highlighting scripts can use the right rules, can use the class attribute, e.g. by adding a class prefixed with “language-” to the element.

4.5 Text-level semantics — HTML5

ザックリと訳すと(拙訳で申し訳ないですが)、

「正式には、マークアップされているコードに使用した言語を示すやり方はありません。しかし、code要素を書く際に使用言語を示したい場合(例えば、シンタックスハイライトのスクリプトがちゃんと認識できるようにする為など)は、class属性を使用することができます(例えば、code要素に"language-"で始まるclassを追加する)。」

くらいでしょうか。

使用言語を示すために、code要素のclass属性にclass="language-xxxx"を入れることが記されていますね。

例として挙げられているコードサンプルはこんな感じ。

<pre><code class="language-pascal">var i: Integer;
begin
   i := 1;
end.</code></pre>

4.5 テキストレベルセマンティック — HTML5 日本語訳

これはまさに、Prism.jsでシンタックスハイライトする時の文法ですね。

要するに、以下のような形式でコードを指定することは、html5の仕様に準拠した書き方となります。

<pre><code class=”language-xxxx”>~</code></pre>

Prism.jsで使用できるプラグインの使い方

使ったものだけ。

Line Numbers:コード行を表示する

Line Numbers ▲ Prism pluginsを使用。

以下のように、preタグのclass属性にline-numbersを指定することで使用できます。

<pre class="line-numbers">
  <code class="language-markup">
  (コード)
  </code>
</pre>

Line Highlight:特定の行をハイライトする

Line highlight ▲ Prism pluginsを使用。

以下のように、preタグにdata-line属性をつけることで使用できます。

<pre data-line="1-2,5,9-20">
  <code class="language-markup">
    (コード)
  </code>
</pre>

data-line属性を1-2,5,9-20と書いた場合は、1~2行目と5行目と9~20行目をハイライトします。