WordPressでシンタックスハイライトならPrism.jsが軽量＆多機能でベストチョイス

公開日:2017年2月21日 / 更新日:2017年3月27日

こんな人にオススメです!

  • ソースコードをカラフルにして見栄えを良くしたい。
  • プラグインのCrayon Syntax Highlighterが重いので、他に乗り換えたい。
  • highlight.jsは軽くて良いけれど、行番号が表示されないのが不満。

WordPressには、ソースコードを色分け表示するプラグインがたくさんありますが、中でも人気の高いのがCrayon Syntax Highlighter。

しかしこのプラグイン、高機能な反面、サイトの表示速度が重くなったりします。

この問題を解消するため、先日、本サイトではCrayon Syntax Highlighterよりも動作が軽いと評判のhighlight.jsに乗り換えましました。

関連記事：『highlight.js導入で軽量化！Crayon Syntax Highlighterが重いと感じたら必読です』

highlight.jsの使用で、表示スピードに不満は無くなったのですが、唯一残念な点は、highlight.jsに行番号を表示する機能がないこと。

そこで今回は、行番号も表示できる軽量&多機能なシンタックスハイライターPrism.jsのご紹介と、その導入方法を解説します。

Prism.jsとは？

Prism.jsは、シンタックスハイライトを手軽に導入できるJavaScriptライブラリです。

公式サイトhttp://prismjs.comより無料でダウンロードできますが、特徴は軽くて多機能な点。

行番号だけではなく、指定した行のハイライトやコピーボタンなどの機能が豊富に用意されていて、必要なものだけを簡単に追加できます。

ひとつデメリットをあげるなら、WordPressのプラグインと違って、導入に一手間かかる点ですが、手順通り行えば、問題無くご使用いただけます。

この記事の後半では、Prism.jsを簡単に利用する小ネタもご紹介していますので、ぜひお試しください。

Prism.jsの導入方法

何はともあれ、Prism公式サイトhttp://prismjs.comにアクセスします。

http://prismjs.com

このサイトから、２つのファイルをダウンロードします。

  • JSファイル
  • CSSファイル

ダウンロードの手順はこんな感じです。

  1. テーマ（デザイン）を選択する。
  2. 使用する言語を選択する。
  3. 追加したい機能を選択する。

この三項目から、必要なデータだけを選択してダウンロードします。

こういった必要最小限のファイルだけ取得する仕組みが、プラグインには無い軽量化に繋がっているのでしょう。

ファイルのダウンロード

1. テーマ（デザイン）を選択する

はじめに、ベースとなるデザインの選択からです。

デザインは、全部で７種類用意されています。

この中から好きなテーマを選びます。イメージにピッタリあったテーマがなくても、後からCSSを編集すればデザインのカスタマイズも可能です。

トップページでデザインを選択したら、Downloadボタンを押します。

今回は、DEFAULT（デフォルト）テーマを選択しました。

現在は、テーマを変更して「COY」を使用しています。

2. 使用する言語を選択する

次の画面では、使用する言語を選択します。

デフォルトで、次の４つにはあらかじめチェックが入っています。

  • Markup
  • CSS
  • C-like
  • JavaScript

WordPressではPHPファイルも扱うので、PHPにも追加でチェックを入れてあげましょう。

ファイルの圧縮バージョン・非圧縮バージョンも選べますが、高度なカスタマイズをする予定がない限り、圧縮バージョン（Minified version）のままでOKです。

3. 追加したい機能を選択する

次に、追加したい機能を選択します。

画面下部の「Plugins」の欄までスクロールしてください。

今回は、Line Highlight とLine Numbers を選択しました。

Line Highlight は、指定した行の背景色を変更して、目立たせる（ハイライト）処理をするプラグインです。

Line Numbers は、コードに行番号を加えてくれるプラグインになります。

この他にも、たくさんのプラグインが用意されていますが、名前からおおよその機能が想像つくと思います。

お好みで必要なプラグインを追加してください。

プラグインの選択が終わったら、ダウンロードボタンを押してダウンロード開始です。

なお、ファイルはJSとCSSの２つに分かれているので、両方を取得する必要があります。

ちなみに、この画面でファイルの大きさも確認できますが、Prism.jsのトータルファイルサイズは18.09KBしかありません！

他のシンタックスハイライターと比較してみると…

  • 「highlight.js 」は約190KB ＝ Prism.jsの10倍
  • 「Crayon Syntax Highlighter」は約4700KB ＝ Prism.jsの259倍

いかがでしょう？

ファイルサイズが、めちゃくちゃ小さいくありませんか？

一概に、ファイルサイズだけで処理速度を比較する事はできませんが、高速化が期待できるのはお分かり頂けたと思います。

ファイルのアップロード

ダウンロードした二つのファイルを、FTPソフトでテーマディレクトリにアップロードします。場所はこんな感じが多いのではないでしょうか。

  • テーマディレクトリ/css/prism.css
  • テーマディレクトリ/js/prism.js

アップロードができたら、ファイルを呼び出す記述を加えます。

functions.phpに以下のコードを追記してください。

/*---------------------------------------------------------*/
/* Prism.jsの呼び出し */
/*---------------------------------------------------------*/
add_action( 'wp_enqueue_scripts', 'my_files' );
function my_files() {
 	//Prism.jsのスタイルシートとJSの呼び出し
 	wp_enqueue_style( 'prism-style', get_stylesheet_directory_uri() . '/css/prism.css' );
 	wp_enqueue_script( 'prism-script', get_stylesheet_directory_uri() . '/js/prism.js', array('jquery'), '20170221', true );
}

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

Prism.jsの使い方

利用するには、表示したいコードをpre,codeタグで囲みます。この時、使用している言語別にクラスを与える必要があります。

PHP
<pre><code class=”language-php”>…</code></pre>
CSS
<pre><code class=”language-css”>…</code></pre>
JavaScript
<pre><code class=”language-js”>…</code></pre>
MarkUp
<pre><code class=”language-markup”>…</code></pre>

また、行番号を表示したり、特定行のハイライト処理をしたい時には、

行番号
<pre class=”line-numbers”><code class=”language-php”>…</code></pre>
特定の行をハイライト
<pre data-line=”2-3, 7″><code class=”language-php”>…</code></pre>

とpreタグにクラス付けしてください。

特定行のハイライトは、ハイフン（ – ）を使えば連続した行を、コンマ（ , ）を使えば離れた行を選択できます。

また、開始行の番号も指定できます。マイナスからのスタートもOKです。

開始行の指定
<pre class=”line-numbers” data-start=”-5″><code class=”language-php”>…</code></pre>

具体例として、先ほどfunctions.phpに追記したコードに全部適用させてみます。

タグの囲み方サンプル
<pre class=”line-numbers” data-line=”2-3,7″ data-start=”-5″><code class=”language-php”>
/*———————————————————*/
/* Prism.jsの呼び出し */
/*———————————————————*/
add_action( ‘wp_enqueue_scripts’, ‘my_files’ );
function my_files() {
//Prism.jsのスタイルシートとJSの呼び出し
wp_enqueue_style( ‘prism-style’, get_stylesheet_directory_uri() . ‘/css/prism.css’ );
wp_enqueue_script( ‘prism-script’, get_stylesheet_directory_uri() . ‘/js/prism.js’, array(‘jquery’), ‘20170221’, true );
}</code></pre>

実際に表示すると…

/*---------------------------------------------------------*/
/* Prism.jsの呼び出し */
/*---------------------------------------------------------*/
add_action( 'wp_enqueue_scripts', 'my_files' );
function my_files() {
 	//Prism.jsのスタイルシートとJSの呼び出し
 	wp_enqueue_style( 'prism-style', get_stylesheet_directory_uri() . '/css/prism.css' );
 	wp_enqueue_script( 'prism-script', get_stylesheet_directory_uri() . '/js/prism.js', array('jquery'), '20170221', true );
}

こんな感じで表示されます。

気をつけて欲しいのは、行のハイライト処理は行数の絶対値に適用される点です。

data-line=”2-3,7″で２〜３行目と7行目を指定していますが、実際にはマイナス5行目から始まっているので、マイナス４〜３行と1行目がハイライトされています。

それから、デフォルトのCSSだと行のハイライト色があまり目立ちません。なのでCSSを少しだけ変更しています。

prism.css の .line-highlight{ } の background-colorプロパティを修正してあげれば、どんなテーマでも変更できるはずです。

.line-highlight {
position: absolute;
left: 0;
right: 0;
padding: inherit 0;
margin-top: 1em; /* Same as .prism’s padding-top */

/*
background: hsla(24, 20%, 50%,.08);
background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
*/
/*オリジナルスタイル*/
background-color: rgba(255,255,86,.2);
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;

pointer-events: none;

line-height: inherit;
white-space: pre;
}

ただ、これだとタグにいちいちクラスを書き込むのが、かなり面倒ですね。

そこで簡単に機能が使えるように、次は管理画面をカスタマイズしていきます。

管理画面のカスタマイズ

カスタマイズといっても作業は簡単です。

管理画面のテキストモードに、クイックボタンを追加します。

ボタンを押せば、あらかじめ登録しておいたタグを挿入する機能を設定するのです。

functions.phpに以下のコードを追記します。

/*---------------------------------------------------------*/
/* テキストモードでタグを追加 */
/*---------------------------------------------------------*/
function appthemes_add_quicktags() {
    if (wp_script_is('quicktags')){
?>
 <script type="text/javascript">
 QTags.addButton( 'eg_pre_code', 'prism.js', '<pre class="line-numbers" data-line="" data-start=""><code class="language-php">', '</code></pre>', '', '', 201 );
 </script>
<?php
 }
}
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );

どうですか？うまく追加できましたか？

ボタンを一度押すと、

<pre class=”line-numbers” data-line=”” data-start=””><code class=”language-php”>

とタグが挿入され、もう一度押せば</code></pre>の閉じタグが挿入されます。

行番号の表示が不要なら、class=”line-numbers”を削除してください。また、言語は一番利用頻度が高そうな、PHPをデフォルトで設定しました。違う言語の時には、class=”language-言語”を書き換えてください。

まとめ

少し長くなってしまいましたが、Prism.jsの紹介と導入方法でした。

Crayon Syntax Highlighterからhighlight.jsへ、そしてPrism.jsへと渡り歩いた感想ですが、三つの中では、デザインと軽さの観点から、ダントツでPrism.jsをオススメします。

使い心地も、クイックタグさえ設定してしまえば、プラグインに引けを取りません。

新しくシンタックスハイライターをお探しなら、ぜひ一度お試しください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です