prism.jsでソースコードをハイライト表示する

   

テーマの関係でWP Code Highlight.jsが上手く表示できなかったため、再度良いものがないか調べてたところ、Prismを発見。
JavaScript+CSSなので、WordPressだけでなく、通常のWebサイトでも使用可能です。
また追加機能(プラグイン)で行番号表示も可能です。これは凄い!!
唯一大変だったのは、既存のハイライト表示プラグイン(Crayon Syntax Highlighterなど)からの移行作業でした。

導入方法

Prism.js のダウンロード

Prismからダウンロードして使用します。

  1. DOWNLOADボタンをクリック
    あらかじめテーマを選択(青枠)しておくことも可能です
    prism.js step1
  2. Compression level:
    通常はサイズの小さくなるMinified versionを選択
    prism.js step2
  3. Themes
    事前に選択していない場合は、希望のテーマを選択
  4. Languages
    ソースコードをハイライト表示したい言語を選択
    “all”だとサイズが大きくなるため注意
    prism.js step3
  5. Plugins
    使用するプラグインを選択します
    どんな内容かは、各プラグインをクリックすれば参照できます
    prism.js step4
  6. 選択が完了したらトータルサイズが確認できます
    prism.js step5
  7. DOWNLOAD JSボタンをクリック
  8. DOWNLOAD CSSボタンをクリック
    prism.js step6

WordPress への適用

  1. 使用しているテーマフォルダまたは子テーマフォルダに、ダウンロードしたprism.jsprism.cssを格納します
    prism.js step7
  2. 同じフォルダにあるfunctions.phpに以下を追加します(ファイルがなければファイルを追加します)
<?php
function prism_js() {
wp_enqueue_style( 'prism', get_bloginfo( 'stylesheet_directory' )  . '/prism.css', array(), null, 'all');
wp_enqueue_script( 'prism', get_bloginfo( 'stylesheet_directory' ) . '/prism.js', array(), false, false );
}

add_action( 'wp_enqueue_scripts', 'prism_js' );
使用しているテーマによっては正しくハイライト表示されない場合があります。

Webサイトへの適用

headタグに以下を追記します。

<head>
    <link rel="stylesheet" href="prism.css" type="text/css" />
    <script src="prism.js"></script>
</head>

記述方法

<pre><code class="language-xxxx"></code></pre>

で記述します。xxxxは言語です。Supported languagesを参照して下さい。
htmlxmlmarkupですが、htmlxmlと記述しても内部で変換してくれるようです。

おまけ

Plugins > Command Line 使用時の記述方法

<pre class="command-line" data-prompt="C:\>"><code class="language-none">dir
</code></pre>

実行結果

dir

 - 未分類 ,