WordPressの記事でソースコードを表示させたい場合、ソースコードボックスを使えばOKです。
しかしデフォルトではシンタックスハイライト表示されていないので、読みにくいですよね。
そこで今回は、Prism.jsを使ってシンタックスハイライトする方法をまとめました。
この記事の目次
Prism.jsについて
Prism.jsはシンタックスハイライトを行うためのJavaScriptファイルです（CSSも付随しmす）。
WordPressのプラグインにもSyntax Highlighterはありますが、Prism.jsはより軽量で非プラグインである点が魅力的です。
JavaScriptファイルのダウンロード
公式サイトに行き、必要なファイルをダウンロードしましょう。
カラーテーマの選択
Prism.jsには複数のカラーテーマが用意されています。
ページの右側にある円をクリックすると、カラーテーマが切り替わります。自分の好きなものを選択しましょう。
好きな色を選択したら「Download」ボタンを押しましょう。
開発バージョンまたは軽量バージョンを選択
Downloadボタンを押すと画面が切り替わります。
自分でJavaScriptファイルを変更したいなら「Development version」を選びましょう。
私はダウンロードしたものをそのまま使うのでMinified versionにしました。
カラーテーマの選択
先ほど確認しておいたカラーテーマを選びましょう。
プログラミング言語の選択
自分がWordPressの記事で扱うプログラミング言語を選択してください。
.jsファイルを軽量にしたければ、あんまりたくさん選ばないようにしましょう。
プラグインの選択
行数を表示させたりするにはプラグイン（CSS）が必要になります。自分が使いたいものを選択してください。
| プラグイン名 | 機能 |
|---|---|
| Line Highlight | 指定した行を目立たせる。 |
| Line Numbers | 行番号を入れる。 |
| Show Invisibles | タブや改行などの不可視文字を表示させる。 |
| Autolinker | コード内のURLやメールアドレスをクリック可能なリンクにする。 |
| WebPlatform Docs | コードをWebPlattform Docsにリンクさせる。 |
| Custom Class | Prismのクラスを編集して、Prismをカスタムする。 |
| File Highlight | 外部ファイルを取得し、その内容をハイライトさせる。 |
| Show Language | コードボックスの右上にそのプログラミング言語が表示される。 |
| JSONP Highlight | JSONPを使ってコンテンツを取得し、その内容をハイライトさせる。 |
| Highlight Keywords | コード中の特定のキーワードに独自のCSSを設定できる。 |
| Remove initial line feed | コードブロック内のはじめに改行があれば削除する。 |
| Inlin color | コード中にカラーコードがあれば、その色を表示させる。 |
| Previewers | コードの結果がホバーでプレビューできる。 |
| Autoloader | 指定したプログラミング言語が自分のprism.jsにないとき、自動的にロードする。 |
| Keep Markup | コード中のマークアップ（HTML）が保持される。 |
| Command Line | コマンドラインをプロンプトとともに表示し、オプションでコマンドからの出力を表示する。 |
| Unescaped Markup | マークアップ（HTML）をエスケープせずに、コードとして表示させる。 |
| Normalize Whitespace | コードブロック内の不要な空白を削除する。 |
| Data-URI Highlight | データURIを強調表示する。 |
| Toolbar | コードブロック上部にボタンを設置する。 |
| Copy to Clipboard Button | クリップボードにコピーするボタンを追加する。 |
| Download Button | コードファイルをダウンロードするボタンを追加する。 |
| Match braces | 一致する括弧を色分けする。 |
| Diff Highlight | diffブロック（GitHub）内のコードを強調表示する。 |
| Filter highlight | 独自の条件を設定し、独自の表示をさせる。 |
| Treeview | ファイルシステムのツリー構造を見やすく表示させる。 |
構成が決まったらファイルをダウンロードする
必要な選択が終わったら「DOWNLOAD JS」、「DOWNLOAD CSS」をクリックしましょう。
Prism.jsをサイトに適用する
サーバーにデータをアップロードする
ダウンロードした.jsファイルと.cssファイルを自分のWordPressをインストールしたサーバーにアップロードします。
アップロードの方法はFTPでも良いですが、私はXserverを使っているのでXserverのファイル管理機能を使いたいと思います。
Xserverでの設定
まずはXserverにログインしましょう。
その他のレンタルサーバーを使っている方も操作方法は似ていると思います。
サーバーのファイル管理ができる画面に行きましょう。PHPAdminではありませんよ（こちらはWordPressのデータベースを管理するものです）。
Xserverにログインして「ファイル管理」
操作メニューのファイル管理ボタンをクリックしましょう。
こんな画面が開きます。
サイトのフォルダへ移動
私の場合はhistoroid.comのフォルダへ移動します。
ちなみに..のボタンは「上位のフォルダに戻る」の意味です。
次にpublic html→wp-content→themes→affinger5-childと移動します。
なおこのフォルダの構成はレンタルサーバー会社によって異なります。さらに私はAFFINGER5というテーマを使っているので、最後がaffinger5-childになっているだけです。
フォルダ名やその階層構造については、ここでは気にしなくて良いです。
ただし使用中のテーマフォルダの中には入れてください。WordPressの設定上、使用中のテーマフォルダがルートフォルダとして認識されるためです。
Prismデータ用のフォルダを作成
次に.jsと.cssファイルを入れるためのフォルダを用意します。
私はprismというフォルダを作成しました。
フォルダ名は何でも良いです。
フォルダを作るとこのように表示されます。
ではprismフォルダへ移動してください。
Prismファイルのアップロード
ではここで.jsファイルと.cssファイルをアップロードしましょう。
アップロードが終了したら、ここまでのパスをコピーしておきましょう。
このパスは後で使います。
「prismデータはどこにアップロードしてもいい」と書きましたが、このパスさえしっかりと分かっていればOKです。私は現在使用中のテーマの中にprismフォルダを作りましたが、それは単に覚えやすいためです。
これでサーバーサイドの設定は終わりです。
WordPress側での設定
アップロードした.jsファイルと.cssファイルを読み込むようにWordPress側で設定します。
function.phpを編集しますので、注意してください。
.phpファイルの編集画面へ移動する
WordPressの編集画面にある「外観」→「テーマエディタ」と進みます。
すると注意されますので「理解しました」をクリックしてください。
注意
function.phpによくわからない書き込みをすると、WordPressが表示されなくなりますが、サーバー側から修正できるのでとくに心配はいりません。
手元にオリジナルのfunction.phpを持っていなかったり、ダウンロードしてオリジナル版を得ることができないようであれば、しっかりとバックアップを取ってください。
この説明の意味がわからない場合もやめた方が良いと思います。
function.phpファイルの編集
function.phpを選択してください。
初期設定では、上のコードが書いてあるのみです。
下記のコードを追加してください。なおパスは自分がprismファイルを置いた場所に書き直してください。
function my_enqueue_scripts() {
$theme_uri = get_template_directory_uri();
wp_enqueue_script( 'prism-js', $theme_uri . '/prism/prism.js', array(), false, true );
wp_enqueue_style( 'prism-css', $theme_uri . '/prism/prism.css');
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );これで準備が整いました。
Prism.jsを使ってみる
いつもどおり記事編集画面へ進んでください。
ブロックメニューの「カスタムHTML」をクリック。
例えば以下のように入力します。
<pre><code class=’language-php’>xxxx</code></pre>のように囲めばOKです。
なおlanguage-phpのところは、lanugage-pythonのように言語によって変えてください。
<pre><code class="language-php">
<?php
$arr = [ "A", "B", "C" ];
foreach( $arr as $key=>$value ) {
echo $key . ":" . $value . PHP_EOL;
}
</code></pre>上のように入力すると、結果は以下のようになります。
<?php
$arr = [ "A", "B", "C" ];
foreach( $arr as $key=>$value ) {
echo $key . ":" . $value . PHP_EOL;
}以上です。これでソースコードを見やすく表示させることができるようになりました。
