記事へのソースコード埋め込み

記事へのソースコード埋め込み方法としては「SyntaxHighlighter Evolved」や「Crayon Syntax Highlighter」などのプラグインが有名だが、これがとにかく重いらしい。そこでプラグインを使わずにソースコード埋め込む方法もいくつかあるようで、例えばWordPressでコードをお手軽に表示するにはプラグイン要らずのGistがオススメ！シンタックスハイライトも最近の言語に即対応ではGitHUBを使った埋め込みが紹介されていた。ただこの方法はコード記載の度にGitにアクセスする必要があるため少し面倒。

そこで軽量なJavaScriptのライブラリを導入することにする。これまでHighlight.jsが人気だったようだが、行番号が取得できないこともあってPrism.jsなるものに乗り換えている人が多いらしい。なので自分もPrism.jsを導入してみる（名前も良いし……）。導入にあたってWordPressでシンタックスハイライトならPrism.jsが軽量＆多機能でベストチョイスとPrism.js シンタックスハイライターが素晴らしいを参考にした。

prism.jsのダウンロード

prism.jsのサイトにアクセスしてDOWNLOADをクリック。ページが切り替わって使用したいテーマ・言語・プラグインを選ぶことになる。尚、Compression level:はデフォルトでMinified versionが選択されているが、これは縮小・最適化したJavascriptのことで、スクリプトに手を加えないならこのままで良いらしい。

テーマは悩んだ結果、「COY」にしてみた。使用言語は以下。

プラグインは名前だけ見ても意味が分からないので、紹介ページをチェックしてみた。今回選んだものは以下の4点。

1. Line Highlight ← 指定した行をハイライト
2. Line Numbers ← 行番号の表示
3. Show Language ← 言語名の表示
4. ToolBar← 3.と連動して選択される

以上でTotal filesizeは48.05KB (86% JavaScript + 14% CSS) になった。最後に「DOWNLOAD JS」と「DOWNLOAD CSS」をクリックしてprism.js、prism.cssを保存する。

ファイルのアップロード

保存したprism.js、prism.cssをアップロードする。それぞれ以下のディレクトリ直下に置いた。

• prism.js　：wordpress/wp-includes/js
• prism.css　：wordpress/wp-includes/css

→ミス。テーマディレクトリ内にアップロードしなければならない。このミスで数時間ハマってしまった。以下が正しい（originは使用しているテーマ）。

• prism.js　：/themes/origin/js
• prism.css　：/themes/origin/css　←cssフォルダは無かったので作成した

FFFTPでのアップロードが初めてだったのでメモ。右側（転送先）でアップロードフォルダを開いておいて、左側（ローカル）でアップロードするファイルを選択し、アップロードボタンをクリックすれば良い。

prismの設置

functions.phpの最後（“?>”の前）に以下のコードを追加した。上述した参考サイトの記載をそのまま使いたかったため、テーマディレクトリ内にcssフォルダを作成している。

/*---------------------------------------------------------*/
/* 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 );
}

いくつかのサイトを見ていると、今回のようにfunctions.php内に記載すると紹介されているサイトもあれば、header.php内に記載すると紹介されているサイトもあった。結局WordPressで推奨されているのは前者で、この場合プラグインも含めてスクリプトファイルの重複や依存関係も考慮した上で出力させることができるらしい。それぞれに読ませるコード内容の記載が異なるが、中身の意味は全くわからないので深追いしないことにする（PHPは今後勉強……！！）。

prismの使用方法

テキストエディタに切り替えてコードをタグで囲めば良い。

単純に表示

pre,codeタグで囲むだけ。言語名はcやphpなど。

<pre><code class=″language-言語名″>……</code></pre>

行番号を追加

<pre class=″line-numbers″><code class=″language-言語名″>……</code></pre>

特定の行をハイライト

ハイフンを使えば連続した行を、コンマを使えば離れた行を選択できる。

<pre data-line=″2-3, 7″><code class=″language-言語名″>……</code></pre>

管理画面のカスタマイズ

管理画面のテキストモードにクイックボタンを追加した。functions.php内に上述した参考サイトで紹介されていた以下のコードを追加した（このコードをテキストモードに貼り付けるとレイアウトが崩れてしまうためここには記載できず。何かしら競合していると思われる）。

注意点

• コードは20行目までしか表示せず、残りはスクロールになる場合がある。全文をスクロールせずに表示するにはprism.css にある max-height を削除するか値を増やせばいい。
• コードは実態参照に変換しないと読み込まれないらしい。文字列 → 数値実体参照変換などでコードを変換してからアップする。
• インデントを表現する場合は、エディタ-ビジュアルで貼りつけた後、エディタ-テキストの方で半角スペースを入れて調整する。