ソースコードを表示する際は、一般的にシンタックスハイライターと言う機能を使います。
このサイトで採用しているテーマ「Cocoon」では、標準でシンタックスハイライター「highlight.js」が完備されているので、それはそれとして使えるのですが、ちょっと機能アップして「Prism.js」を導入してみようと思います。
「Prism.js」を入手する
「Prism.js」は、WordPressプラグインではなく、JavasctiptとCSSファイルが提供されます。
WordPressだけではなく、Webページ全般で使えるものとなってます。
プラグインのように気軽にインストールとはいきませんが、
順序通りに行っていけば、決して難しくはありません。
「Prism.js」のサイトへアクセス
上記のサイトへアクセスします。
「Prism.js」の導入したいテーマを決める
「Prism.js」で提供されているテーマ(外観)は、
DEFAULT、DARK、FUNKY、OKAIDIA、TWILIGHT、COY、SOLARIZED LIGHT、TOMORROW NIGHT
の８種類です。
それでは、テーマごとのサンプルを見てみましょう。
テーマDEFAULTのサンプル
テーマDARKのサンプル
テーマFUNKYのサンプル
テーマOKAIDIAのサンプル
テーマTWILIGHTのサンプル
テーマCOYのサンプル
テーマSOLARIZED LIGHTのサンプル
テーマTOMORROW NIGHTのサンプル
テーマが決まったら、
①「Prism.js」の公式Webページの右の該当するテーマをクリックします
②「DOWNLOAD」をクリックします。
例では、テーマ「COY」にしています。
ハイライト表示させるソースコードの言語を選択する
開いたページの「Languages」の項目から
表示させる予定のソースコードの言語を選択します。
（複数選択です）
種類が沢山あるので選ぶのが大変ですが、
Web関係のhtml,css,javascript,phpであればそのままでもOKかも
ハイライト表示させるソースコードの言語を選択する
開いたページの「Languages」の項目から
表示するであろうソースコードの言語を選択します。
（複数選択です）
種類が沢山あるので選ぶのが大変ですが、
Web関係のhtml,css,javascript,phpであればそのままでもOKかも
プラグインを選択する
コードを表示するだけならそのままでも使えますが、
さらなる機能を付加させることが出来ます。
同ページの「Plugins」の項目から
付加する機能にチェックを入れます。
例として、
Line Highlight（指定行をハイライトする）
Line Numbers（ソースの左に行番号を自動で振る）
Copy to Clipboard Button（クリップボードへコピーするボタン表示）
Toolbar （コピーボタンを表示させるためのツールバーの表示）
を選択しました。
「Prism.js」をダウンロードする
テーマ、言語、プラグインの選択が終わったら
同ページ下方からカスタマイズされたJavascriptとCSSを入手できます。
「DOWNLOAD JS」をクリックして prism.js
「DOWNLOAD CSS」をクリックして prism.css
を入手します。
Javascript(.js)ファイルは、一応スクリプトなので、
ブラウザによっては警告が出る場合がありますが、
保存をクリックしてダウンロードを続行します。
サーバーへ「Prism.js」をアップロードする
入手したprism.jsとprism.cssファイルをサーバーの適当な場所へアップロードします。
（FTPクライアントツールなどを用いたり、サーバーの管理画面から出来る場合もあります)
例としては、WordPressがインストールされているフォルダーにある
「wp-content」の直下に「prism」と言うフォルダを作成してその中にアップロードしました。
WordPressの設定
入手したprism.jsとprism.cssファイルは、WordPressのタグの中で毎回読み込まれる必要があります。
headタグ内で「Prism.js」を読み込み指定
WordPressの管理メニューの「外観」の
「テーマエディタ」または、「テーマ編集」ページから
head-insert.php（Cocoonの場合）へ次のコードを追加します。
<link rel="stylesheet" href="アップロードしたフォルダまでのパス/prism.css">
<script src="アップロードしたフォルダまでのパス/prism.js"></script>
「アップロードしたフォルダーまでのパス」とは、例の場合は、
「../../../../wp-content/prism」になります。
WordPres側のコード表示機能を無効化
WordPressのテーマで、コードをハイライトする機能が実装される場合は、
その機能を無効化する。
テーマ「Cocoon」を例として解説します。
WordPressの管理メニューのCocoon設定の
ソースコードの設定ページ（「コード」タブを選択）
ハイライト表示の「ソースコードをハイライト表示」のチェックを外す。
「Prism.js」でコードの表示方法
投稿記事のテキストモード入力で
次のように入力すると表示出来ます。
<pre ㋐>
<code ㋑>ここからソースコードを
記述します。
：
：
</code></pre>
㋐は付加機能で
「class=”line-number”」を入力すると行番号を表示できます。
㋑は、ソースコード言語指定で
htmlは、「class=”language-Markup”」
html以外は、「class=”language-言語名”」
ソースコードでhtmlタグは、文字実態参照にする必要があります。
< → <
> → >
に変換して入力します。
例として、
行番号表示ありで、HTMLのソースコードは投稿の編集ページのテキストモード入力で
でこんな感じで入力することになります。
<pre class="line-numbers">
<code class="language-markup"><!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
</code></pre>
その結果表示は以下のようになります。
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
「Prism.js」の総評
WordPressで現在使用中のテーマ「Cocoon」には、コード表示が実装されているのですが、敢えて「Prism.js」を利用するかいが有ったと実感できるスクリプトです。
コードを簡単にコピー出来る点もそうですが、何より見やすくなった感じです。
