こんな人にオススメです!
- ソースコードをカラフルにして見栄えを良くしたい。
- プラグインの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にアクセスします。
このサイトから、2つのファイルをダウンロードします。
- JSファイル
- CSSファイル
ダウンロードの手順はこんな感じです。
- テーマ(デザイン)を選択する。
- 使用する言語を選択する。
- 追加したい機能を選択する。
この三項目から、必要なデータだけを選択してダウンロードします。
こういった必要最小限のファイルだけ取得する仕組みが、プラグインには無い軽量化に繋がっているのでしょう。
ファイルのダウンロード
1. テーマ(デザイン)を選択する
はじめに、ベースとなるデザインの選択からです。
デザインは、全部で7種類用意されています。
この中から好きなテーマを選びます。イメージにピッタリあったテーマがなくても、後からCSSを編集すればデザインのカスタマイズも可能です。
トップページでデザインを選択したら、Downloadボタンを押します。
今回は、DEFAULT(デフォルト)テーマを選択しました。
現在は、テーマを変更して「COY」を使用しています。
2. 使用する言語を選択する
次の画面では、使用する言語を選択します。
デフォルトで、次の4つにはあらかじめチェックが入っています。
- Markup
- CSS
- C-like
- JavaScript
WordPressではPHPファイルも扱うので、PHPにも追加でチェックを入れてあげましょう。
ファイルの圧縮バージョン・非圧縮バージョンも選べますが、高度なカスタマイズをする予定がない限り、圧縮バージョン(Minified version)のままでOKです。
3. 追加したい機能を選択する
次に、追加したい機能を選択します。
画面下部の「Plugins」の欄までスクロールしてください。
今回は、Line Highlight とLine Numbers を選択しました。
Line Highlight は、指定した行の背景色を変更して、目立たせる(ハイライト)処理をするプラグインです。
Line Numbers は、コードに行番号を加えてくれるプラグインになります。
この他にも、たくさんのプラグインが用意されていますが、名前からおおよその機能が想像つくと思います。
お好みで必要なプラグインを追加してください。
プラグインの選択が終わったら、ダウンロードボタンを押してダウンロード開始です。
なお、ファイルはJSとCSSの2つに分かれているので、両方を取得する必要があります。
ちなみに、この画面でファイルの大きさも確認できますが、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″で2〜3行目と7行目を指定していますが、実際にはマイナス5行目から始まっているので、マイナス4〜3行と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をオススメします。
使い心地も、クイックタグさえ設定してしまえば、プラグインに引けを取りません。
新しくシンタックスハイライターをお探しなら、ぜひ一度お試しください。