Prism（プリズム）の使い方－WordPressサイトにコードを簡単にシンタックスハイライト表示できる人気ツール

Prism（プリズム）の使い方

ここでは、Prism（プリズム）の具体的な利用手順等について、1つずつ、確認を進めて参ります。

Prism（プリズム）を使って、WordPress（ワードプレス）でコードをシンタックスハイライト表示する方法

Prism（プリズム）を利用すれば、WordPress（ワードプレス）サイト上で、各種プログラミング言語のコードを、簡単にシンタックスハイライト表示することが出来るようになります。
実際の導入手順は以下の通りです。

Prism（プリズム）の公式サイトにアクセス

まずは、Prism（プリズム）の公式サイトにアクセスします。
URLは以下の通りです。

https://prismjs.com/

「ダウンロード」をクリック

画面右上に表示されている、「ダウンロード」のバナーをクリックします。

圧縮レベルの選択

開発向けバージョンを選択すると、ファイルサイズがやや大きくなります。
ひとまずは、最小版を選択しておけばOKです。

テーマの選択

気になるテーマがあれば、切り替えて表示を試してみましょう。
特段こだわりがなければ、「デフォルト」を選択しておけばOKです。

対応するプログラミング言語の選択

対応したいプログラミング言語を選択します。
あとで付け足したい場合、改めてJSとCSSをダウンロードすれば良いだけですから、ひとまずは、最低限の言語選択で良いでしょう。

プラグインの選択

続いて、プラグインの選択を行います。
人気の高いプラグインとしては、

• 一部の行をハイライト表示できる、「Line Highlight」
• 行番号を左側に表示できる、「Line Numbers」
• クリップボードにコードをコピーできるようにする、「Copy to Clipboard Button」

などがあります。

なお、「Copy to Clipboard Button」プラグインにチェックを入れると、自動的に「Toolbar」プラグインにもチェックが入りますが、こうした関係は、プラグイン同士の依存関係によるものです。

JSファイルとCSSファイルをダウンロード

ここまでの選択に沿ってカスタマイズされたJSファイル、及びCSSファイルをダウンロードします。

ダウンロードしたファイルを、WordPressの子テーマフォルダに配置

ダウンロードしてきたJSファイル、及びCSSファイルを、FTPソフトなどを使用して、ワードプレスの子テーマフォルダに配置します。

子テーマの「functions.php」にコードを追加

子テーマの「functions.php」に、以下のコードを追加します。

function add_prism() {
    // Prism CSSを子テーマのルートから読み込む
    wp_enqueue_style('prismCSS', get_stylesheet_directory_uri() . '/prism.css');
    // Prism JSを子テーマのルートから読み込む
    wp_enqueue_script('prismJS', get_stylesheet_directory_uri() . '/prism.js', array(), false, true);
}
add_action('wp_enqueue_scripts', 'add_prism');

コードを記述してみてテストする

実際にコードを記述してみて、テストをしてみましょう。
なお、実際の記述の際は、コードを、「code」タグで囲み、更にその外側を、「pre」タグで囲みます。
具体的には、以下のような要領です。

<pre><code class="language-php">ここにコードを貼り付けます。</code></pre>

プラグインに関する記述

JS及びCSSのダウンロードの際、追加プラグインを適用している場合、以下の要領で、プラグインに関する記述を加えます。
※なお、以下の例は、行番号を左側に表示する、「Line Numbers」プラグインを有効化させています。

<pre class="line-numbers"><code class="language-php">ここにコード</code></pre>

HTMLコードを表示したい場合は実体参照も

同じ要領で、HTMLタグを表示してあげたい場合、そのままタグを入力すると、その部分がコードとして扱われ、大幅な表示崩れ等を引き起こします。
このため、HTMLタグを表示したい場合は、一部の文字列（例：大なり記号や、小なり記号）について、実体参照のためのエスケープシーケンスを施す必要があります。
とはいえ、手入力で処理をしていると大変です。
その場合、株式会社コニファ様が提供しておられる、こちらのツール の利用が便利です。

Prism（プリズム）の概要・公式サイト等

公式サイト

https://prismjs.com/

Twitterアカウント

https://twitter.com/prismjs