【Prism.js】wordpressのソースコードを一発でコピーするシンタックスハイライターの導入方法

WordPressで5つのサイトを運営している「ちゃん」（@cyan_customizer）です。

ワードプレスのテーマやプラグインをカスタマイズする方法を解説するサイト運営を考えていると、「キレイにソースコードが表示できないかな～」と思うことはありませんか？

ソースコードを表示する方法は「<pre><code>ソースコード</code></pre>」のように<pre>要素と<code>要素で囲めば表示されますが、ワードプレスそのままの設定で表示すると非常に味気ないソースコード表示になってしまいます。

//下記がソースコードだよ
body{
	color: #505050;
}

[cc id=12]上のソースコードがデフォルト状態の表示なのでさみしいですね[cc id=653]

デザイン性がある程度高い方がブログやサイトを読んでもらいやすいので、ソースコードをキレイに表示させるために「シンタックスハイライター」を導入することで解決できます。

では、どうやってシンタックスハイライターを利用するのか解説していきます。
[cc id=736]

プラグインなしで実装する主な「シンタックスハイライター」

WordPressで「こんな機能があれば便利なのに」と思えば、ほとんどがプラグインを探せば解決できます。シンタックスハイライターも有名なプラグイン「Crayon Syntax Highlighter」を導入すれば簡単にキレイにソースコードを表示することが出来ます。

ですが、プラグインはサイト表示速度を遅くしてしまう可能性もあるので、私はプラグインはあまり使わない派です。
[cc id=12]特にCrayon Syntax Highlighterは重いことも有名ですよね[cc id=653]

ちゃちゃっとプラグインで導入したい人はワードプレス内のプラグインで「Crayon Syntax Highlighter」と検索するか、下のリンク先からzipファイルをダウンロードしてください。
[keni-linkcard url="https://ja.wordpress.org/plugins/crayon-syntax-highlighter/" target=”_blank”]

プラグインを使わないでソースコードをキレイに見せるためには「JavaScriptのライブラリ」を利用すれば簡単です。

シンタックスハイライターのライブラリは数多く公開されていますが、中でも3つが有名です。

プラグインではないので、自分でファイルをダウンロードしてライブラリの中から必要なcssファイルとjsファイルを、WordPressの中にアップロードすることになります。少し手間はかかることは覚悟してください。
[cc id=12]難しくはありませんよ[cc id=653]

私は「google-code-prettify」を使っていたのですが、サイト訪問者がソースコードをボタン一つでコピーできるようにしたくなり、このページで解説する「prism.js」に乗り換えました。

prism.jsはカスタマイズもしやすくおすすめですが、リストに挙げた3つの中でカスタマイズを考えない人であればgoogle-code-prettifyが1番導入しやすいシンタックスハイライターだと私は思います。

「Prism.js」をおすすめする特徴

私がPrism.jsを使いやすくておすすめする特徴が6つあります。

少しでもWordPressを軽くするには容量をなるべく少ない方が良いですが、Prism.jsは軽量なのが非常に有名です。

私が以前使っていた「google-code-prettify」も重くないシンタックスハイライターで、利用するCSSファイルとjsファイルの合計容量は約100KBです。

ですが、Prism.jsでは使う言語やプラグインで変わりますが、約30KB前後でかなり軽量なライブラリで収まります。

あとコピーボタンを自分でjsファイルをカスタマイズしなくても実装できるのは、私が求めていた機能なので後で解説したいと思います。

あとの特徴は、他のシンタックスハイライターでも実装できる内容ですが、Prism.jsの方が簡単に利用できるようになっているので、次の項目の導入方法や使い方で詳しく解説していきます。

Prism.jsは導入する方法

Prism.jsの導入は簡単で、ダウンロードしたファイルをWordPress内に設置すれば出来上がりです。

しかし、初めてjsファイルやCSSファイルを触る人もいるかもしれないので、私なりの導入方法を解説したいと思います。

ここで1つ注意点ですが、WordPressをカスタマイズする時はそれぞれのWordPressテーマにある「子テーマ」に導入するようにしてください。

親テーマに導入してしまうと、アップデートなどで親テーマを書き換えると今までのカスタマイズが一瞬で消えてしまうことになりますよ。
[keni-linkcard url="https://cyan-blog.com/keni8-install/" target="_blank"]

Prism公式サイトのダウンロードページでカスタマイズ

Prism公式サイトからダウンロードできるようになっています。
Prism公式サイト

公式サイトに入ると右上の「DOWNLORD」のボタンをクリックすると、シンタックスハイライターを自分の好みにカスタマイズできるページに移動します。

ダウンロードページでテーマや言語、あとは行表示やコピーボタンを実装できるプラグインを選べるようになっています。

2つの圧縮レベルを選ぶ

まず初めにダウンロードするファイルの圧縮レベルを「デベロップメントバージョン」と「ミニファイバージョン」の2つから選びます。
[cc id=695]で、どっちを選べば良いの？[cc id=653]
どちらを選ぶか迷うかもしれませんが、自分でjsファイルやCSSファイルをカスタマイズする必要が無い人は「ミニファイバージョン」を選択すれば良いです。
[cc id=12]ミニファイの方が最適化されたファイルなので軽いです[cc id=653]

私はCSSファイルをカスタマイズするので「デベロッパーバージョン」を選択します。少しはファイルが大きくなりますが、デベロッパーバージョンもかなり軽量なので気にする必要はありません。

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

Prism.jsにはソースコードを表示するテーマがあらかじめ用意されているので、テーマの中から好みのデザインを選択するだけで、自分でCSSをカスタマイズしなくてもキレイにハイライトすることが出来ます。

テーマの種類は現在は8種類用意されているので、初めのころより種類は増えています。

テーマはサイトの雰囲気で変わりますが、「DEFAULT（デフォルト）」「DARK（ダーク）」「SOLARIZED LIGHT（ソーラライズ ライト）」の3種類は優しい色彩なので女性向けなどのサイトに向いていると思います。

残りの5つは個性的や暗めの色彩なので目立つハイライトが特徴です。私はサイトの色と違いがある方が目立つと思ったので「TOMORROW RIGHT（トゥモロー ライト）」を選びました。

言語を選ぶ

言語と言っても日本語や英語などではなく、Prism.jsで選ぶ言語は「プログラミング言語」です。

デフォルトで選ばれている言語は上の4つの言語ですが、サイトで解説する言語をチェックすればハイライト出来る言語が増やすことが出来ます。
[cc id=12]基本的に4つがあれば良いと思います[cc id=653]
まだまだプログラミングは初心者な私ですが、今後のことも考えて下の種類の言語をあらかじめ選択して、新たなプログラミングを解説できるようにしておきました。

[cc id=12]すべての言語を解説する可能性は低いかな（笑）[cc id=653]

プラグインを選ぶ

プラグインと言ってもWordPressのプラグインではなく、Prism.jsの便利な機能を追加することが出来ます。

すべてチェックしても良いですが、少しでも軽くしたいのであれば使う機能に絞って選ぶ方が良いです。

上に挙げたリストの上位3つは基本的に付けることが一般化している内容で、「〇〇行目を変更したよ」「このソースコードはCSSだよ」と分かりやすくするには最低限必要なプラグインです。

「Copy to Clipboard Button」は私がPrism.jsに乗り換えた理由の1つですが、コピーボタンを押せばソースコード全文を1発でコピーできるようになります。訪問者さんの利便性を高めるのには最適なプラグイン。

最後の「Unescaped Markup」は特殊文字の「<」や「&」などをうまく表示させるために、「<」「&」などにエスケープしなくても表示できるプラグインです。

最終段階：CSSファイルとjsファイルをダウンロード

好みのカスタマイズが終了すれば、CSSファイルとjsファイルを別々にダウンロードします。

jsファイルをダウンロードする時に危険なファイルと注意が出るかもしれませんが大丈夫なので、そのままダウンロードしてください。

ダウンロードされるファイル名は「prism.js」「prism.css」なので分かりやすいはずです。
[cc id=12]ここでPrism公式サイトで行う作業は終了です[cc id=653]

WordPressにPrism.jsを設置する手順

Prism.jsを無事にダウンロード出来れば、ここからは自分のサイトやブログにPrism.jsを設置して使えるようにします。
[cc id=695]えっ、まだすることあるの？[cc id=653]
設置するのは面倒と思うかもしれませんが、アップロードするのは簡単作業なので解説していきます。

WordPressの任意の場所に「prism.js」「prism.css」をアップロード

Prism公式サイトからダウンロードした2つのファイルをWordPressにアップロードすれば使えるようになりますが、決まった場所にアップロードする必要はありません。自分が「覚えやすい」「いつ見ても分かりやすい」2つのことに注意だけすれば、任意の場所にアップロードしましょう。

1つだけ絶対に守ってもらいたいのが、親テーマに直接アップロードだけは避けて子テーマにアップロードしてください。

親テーマ内にアップロードするとテーマ自体のアップデートですべてが書き換わってしまうので、すべてのカスタマイズが0に戻ってしまいます。ほとんどのWordPressテーマは子テーマが準備されていますので、子テーマは初めから適用するように設定するようにしてください。
[keni-linkcard url="https://cyan-blog.com/keni8-install/" target="_blank"]

アップロードする時はFTPソフトを利用しますが、私はXサーバーを利用しているので「ファイル管理」からいつもアップロードしています。ソフトを別に用意しなくても良いので簡単です。

子テーマ内に「jsフォルダ」「CSSフォルダ」を作り、フォルダ内にそれぞれのファイルをアップロードすればいつでも見失うことはないのでおすすめです。

サイトにPrism.jsを適用させる

2つのファイルをアップロードしただけではソースコードはハイライト出来ません。

「header.php（ヘッダー）」「footer.php（フッター）」のPHPファイルにjsファイルとCSSファイルを読み込むように指示を書き込む必要があります。

<link rel="stylesheet" href="子テーマまでのパス/css/prism.css">
<script src="子テーマまでのパス/js/prism.js"></script>

私が使っている賢威では、後から追加するCSSファイルやjsファイルのコードを埋め込みできる機能があるので、わざわざ子テーマにヘッダーやフッターのphpファイルを作る必要はありません。

他の有名なテーマでも同様の機能がある場合が多く、簡単に導入できるので利用しましょう。

[cc id=12]記述が終われば、あとは実際にソースコードで利用できるので設定は終わりです[cc id=653]

Prism.jsの基本的な使い方

ソースコードを表示する時には「<pre><code>ソースコード</code></pre>」で囲めば十分ですが、Prism.jsを使うにはいくつかの守る記述方法があります。

記述を守らないとハイライトされないので、質素なコード表示になるので注意してください。

ハイライトさせるだけの記述方法

行番号もいらないし指定行のハイライトもいらない場合、コードをキレイに見せるだけの記述する基本の形があります。

<pre>
<code class="language-言語名">
ソースコード
</code>
</pre>

単純にハイライトするだけであれば、code要素の中に言語名を指定する「class="language-言語名"」を記述して、ソースコードの言語名を入力すれば良いです。

言語名はダウンロードしたときの言語名なので「html」「css」「c」「javascript」などです。

少し古いPrism.jsの解説サイトではhtmlの言語を指定する時は「markupと記述しなければダメ」と書いていますが、今はhtmlと書いても大丈夫なので覚えやすくなっています。

行番号の表示と指定行をハイライトする記述方法

行番号がある方が解説サイトの場合は便利なので、今から開設する記述方法が便利だと思います。合わせて指定行をハイライト（色を変える）すればより訪問者が分かりやすくなります。

<pre class="line-numbers" data-line="2,3-5">
<code class="language-言語名">
ソースコード
</code>
</pre>

code要素ではなくてpre要素にclass名そ記述します。「line-numbers」が行番号表示で、「data-line」が指定行のハイライト効果になります。

data-lineは1行だけの指定はもちろん出来ますが、複数の行をまとめてハイライトをするのも可能です。上のソースコードでは「3-5」と指定しているので「3行目～5行目」をハイライトする指定になります。

AddQuictag利用でコードの記述やエスケープが簡単になる

Prism.jsを使う上で絶対ではありませんが、WordPressプラグイン「AddQuictag」は是非インストールした方が使いやすくなります。

<pre><code></code></pre>だけであれば手打ちでも十分できますが、class名を毎回手打ちするのはかなり面倒なので、AddQuictagで基本の記述を記録させておけば簡単に呼び込みことが出来ます。
[cc id=12]皆さん知っているプラグインですね[cc id=653]

上の内容よりも便利なのが、特殊文字「<」「>」などを一発でエスケープできるボタンを追加できるのがAddQuictagです。

「htmlentities」横のチェックに印をして保存すれば良いです。

赤枠内の左側「HTML Entities」が特殊文字をエンティティと言われるコードに変換してくます。逆に右側「Decode HTML」はエンティティのコードを特殊文字に戻すボタンになっています。

違うサイトからコピーしてきたソースコードを簡単にエスケープできるので、必ず導入した方が良いおすすめの機能になります。

まとめ

Prism.jsはコード解説サイトにはおすすめのライブラリなので、ぜひ導入してほしいと思います。

私は多少CSSをカスタマイズしている可能性があるので、デフォルトの表示の状態とは違うかもしれませんが、自分でカスタムしやすい特徴もあるPrism.jsです。

軽いシンタックスハイライターを探している人は特におすすめです。