ブログ初心者・Web制作の情報サイト
シンプルで高速なコード色分けスクリプト Prism.js が使いやすかった

シンプルで高速なコード色分けスクリプト Prism.js が使いやすかった

この記事ではシンタックスハイライト(コードの色分け)を行う Prism.js について紹介します。

WordPressでコードの色分けをしたいけどどれがいいのか分からない方や、プラグインを入れると重くならないか心配、そんな方には Prism.js がおすすめです。

Prism.js はシンプルで動作がとても速いのでWEBページを重くすることなくコードの色分けを行ってくれます。

コードをリッチに装飾すればページの見た目が格段に向上しますよ。

Prism.js の特徴

Prism.js とはシンタックスハイライト(コード色分け)機能をもつスクリプトでJavascriptで書かれています。

Prism.js はとにかくシンプルで軽くて速いです。ここではそんな Prism.js の特徴について紹介します。

Prism

Prism.jsの導入方法についてはこちら

導入がシンプルで簡単

Prism.js はシンプルでとても簡単に導入可能です。実際の導入の流れは以下のようになります。

  • 言語とプラグインを選択しファイルをダウンロード
  • ダウンロードしたファイルを読み込む
  • コードにCSSのクラスを付与する

これだけでシンタックスハイライトされます。とても簡単 (^^

色分けされるコードの例

//Show Prism features
add_shortcode('prism_features', function() {
    $prism = 'Prism is a ';
    $prism .= 'Dead simple, ';
    $prism .= 'Intuitive, ';
    $prism .= 'Light as a feather, ';
    $prism .= 'Extensible, ';
    $prism .= 'Blazing fast, ';
    $prism .= 'and Easy styling.';

    return $prism;
});

軽量で動作が速い

Javascriptと聞くと重くなるんじゃないかと思う人もいると思いますが Prism.js の動作は導入前と違いが分からない程高速です。

Prism.js のコアファイル容量は 6.8 kbyte ほどしかありません。追加する言語の定義ファイルは1つあたり0.3 – 0.5 kbyte で自分で選択可能なため最終的なファイルサイズを抑えることができます。

実際に使ってみても全く読み込み速度の変化が感じられず非常に軽快なのです。

公式サイトでもその速さや軽量さが宣伝されています。

Prism:特徴

これ以上無いほどシンプルで羽のように軽く猛烈に速い!

サポートする言語を自分で選べる

Prism.js ではサポートしたい言語の定義ファイルを自分で選択することができます。無駄な定義ファイルを入れなくて済み、読み込み時間を短縮できるのは嬉しいです。

選択自体はチェックマークを入れるだけで簡単です。言語に関しても種類が多く大抵のものは見つかります。

Prism:言語選択

テーマ色が豊富

全部で8種類あるテーマを紹介します。

[i-font box]Default:シンプルな色調

Prismテーマ:default

[i-font box]Dark:茶色ベース

Prismテーマ:Dark

[i-font box]Funky:かなり変わった感じの異彩を放つテーマ

Prismテーマ:Funky

[i-font box]Okaidia:Sublime Textのデフォルトのような感じ

Prismテーマ:Okaidia

[i-font box]Twilight:濃い黒背景が特徴の落ち着いた色合い

Prismテーマ:Twilight

[i-font box]Coy:白と水色のストライプ

Prismテーマ:Coy

[i-font box]Solarized Light:陽が差すような明るい色合い

Prismテーマ:Solarized Light

[i-font box]Tomorrow Night:ダークでシックな色調のテーマ

Prismテーマ:Tomorrow Night

プラグインが充実しており多彩な機能を追加できる

必要に応じてプラグインを追加することができます。導入は言語の定義ファイルと同じくチェックマークを入れるだけです。

おすすめのプラグインは後で紹介します。

Prism.js のプラグイン

Prism.js の導入方法

ここでは Prism.js の導入方法について説明します。導入方法はとても簡単で大まかな流れは以下のようになります。

  1. サポートする言語を選択する
  2. 追加したいプラグインを選択する
  3. ファイルをダウンロードして読み込む

順番に説明していきます。

テーマと言語を選択する

使用したいテーマと言語を選択します。Compression Level などデフォルトでいくつかチェックが入ってますが特に拘りがなければそのままでOKです。

好きなテーマを選びましょう。外観の確認画面はページの一番下に表示されます。

Prism:テーマ選択

次に言語を選択します。数多くの言語がありますが普段自分が使用するものだけチェックすればOKです。

Prism:言語選択2

WordPressで使う場合はデフォルトの設定に加えてPHPにチェックを入れておきましょう。

選択する言語の例

  • Markup + HTML + XML + SVG + MathML
  • CSS
  • C-like
  • JavaScript
  • C#
  • Ruby
  • PHP

プラグインを選択する

プラグインは付加機能なので必要なければ選ばなくてもかまいません。ここでは代表的なものだけ紹介します。

  • Line Numbers:行番号の表示
  • Show Language:コードブロックの中にコードの言語を表示
  • Copy to Clipboard Button:コードをコピーするボタンを表示

Prism.js を読み込む

Prism.js を使用するためにはページにスクリプトとCSSを読み込ませる必要があります。

<!DOCTYPE html>
<html>
<head>
    <link href="themes/prism.css" rel="stylesheet" />
</head>
<body>
    <script src="prism.js"></script>
</body>
</html>

WordPressであればアクションフックを使用して登録することもできます。この場合はfunctions.phpに記述します。

functions.phpの編集方法と注意点

add_action('wp_enqueue_scripts', function() {
    wp_enqueue_style(
        'prism-css',
        get_stylesheet_directory_uri(). '/js/prism.css',
        array(),
        202004251415,
    );
});

add_action('wp_footer', function() {
    wp_enqueue_script(
        'prism-js',
        get_stylesheet_directory_uri(). '/js/prism.js',
        array(),
        202004251415,
    );
});

Prism.css は wp_enqueue_scripts にフックして head に出力し、Prism.js は ページの表示に影響が出ないように wp_footer にフックして body の最後に出力しています。

これで Prism.js の読み込みが完了しました。

Prism.js の使い方と注意点

ここでは Prism.js の使い方について説明します。使い方は簡単ですがいくつか注意する点があるのでそれについても解説します。

使い方

使い方は<code>もしくは<pre>要素に language-xxxx クラスを追加するだけです。

xxxxの部分には言語の種類を書きます(例:language-php)。またショートハンドとして lang-xxxx と書いてもOKです。

<pre class="language-html">
    <code>コード</code>
</pre>

色分けをしたくない場合は language-none と書くと元の文字色のまま出力されます。

<pre><code>要素でのみ使用可能

知っておいて欲しいのは Prism.js で色分けできるのは <code>要素のみということです。推奨されるマークアップは<code>を含む<pre>要素です。

WordPressであればコードブロックを使用すれば大丈夫です。

IE6-10はサポート外

IE6-10 はサポートされません。ただこれらのブラウザ全体の数パーセント程度ですし、もし Prism.js が動かなかったとしてもコードは表示されるためあまり問題は無いでしょう。

Prism.js のプラグイン

ここでは Prism.js で使える便利なプラグインとその使い方について紹介します。

プラグインを使えば行数の表示言語名の表示コピーボタンといった機能を追加できます。それ以外にも様々なプラグインがあるのでシンタックスハイライト以外にもう少し機能が欲しいときはプラグインを確認してみましょう。

プラグインを追加すると Prism.js にコードが追加されます。追加や削除を行いたいときは新たに Prism.js を(必要であれば Prism.cssも)ダウンロードして下さい。

全てのプラグインは下記ページで確認できます。

Prism:プラグイン

Line Numbers

コードの左に行番号を表示するプラグインです。

使用方法は<pre>要素にline-numbersクラスを追加します。

<pre class="language-none line-numbers">
    <code>コード</code>
</pre>

ページ内の全てのコードに適用したいときは<body>タグにline-numbersクラスを追加すればOKです。

Show Language

言語の名前をコードブロック内右上に表示するプラグインです。設定の必要はなく入れるだけで動作します。

Copy to Clipboard Button

コードをコピーするボタンを表示するスクリプトです。

Prism:コピーボタン表示

最後に

コードの色分けを行うスクリプト Prism.js の導入方法と使い方について紹介しました。

Prism.js は軽量、高速を謳っているだけあってとても動作が軽くストレスがありません。そして綺麗なシンタックスハイライト機能を提供してくれます。

シンタックスハイライトされるとコードがとても見やすくなりますし、何より自分自身のモチベーションも上がります。まだ使ったことがない方はぜひ使ってみてはどうでしょうか。