PHP7.3にしたらCreyon爆死。Prism.jsに乗り換えたら超快適になった件

Creyon syntaxhighlighterを使っていましたが、サーバー引っ越しのついでにPHP7.3に上げたら正常にページが真っ白になるバグが出現。

有志の方々がバグ修正をしてくれましたが、これもソースコードのコピーが禁止になるバグが発生したりと不安定。思い切ってCreyonを卒業することにしました。

同じようなプラグインでsyntaxHighlighterEvoltedがありますが、ネットでの評判が今ひとつ悪くプラグインを増やすこと自体があまり良くないようなので、今回はPrism.jsというJavascriptとCSSを導入することにしました。

Prism導入の流れ
Prismのセットアップ手順
Prism.jsの使い方
トラブル防止のための工夫
まとめ

Prism導入の流れ

Prismのセットアップ手順

Prism.jsはWordpressプラグインではないので、セットアップが必要です。ちょっと面倒ですが、手順どおりに進めればそれほど難しくありません。

Prism.jsの機能選択

Prism.jsの公式サイトで、自分が使いたい言語と好みの外観を選びます。このときに行番号追加やコピーボタンの追加など欲しい機能があればチェックしてダウンロードします。

Prism.jsは欲しい機能だけを選んで導入できるので、ファイルサイズが無駄に大きくならないことも魅力の一つです。

私がチョイスは下記のとおりです。

Themes(外観）
- Coy
Languages(プログラム言語)
- HTML
- CSS
- C-like
- JavaScript
- C
- C++
- PHP
- SQL
- Visual Basic
- vim
- Bash+Shell
Plugins (拡張機能)
- Line Highlight
  - 行の強調表示ができます。
- LineNumbers
  - 行ナンバーを表示できます。
- CommandLine
  - コマンドと実行結果をわかりやすく表示できます。
- Copy to Clipboard Button
  - ソースコードをコピーするボタンを自動で設置します。
- Toolbar
  - Copy to Clipboard Button を入れると勝手にチェックされます

Prism.jsとPrism.cssのダウンロードとWordpressへのアップロード

compression level(圧縮レベル）とCoreは最初の状態、Languagesとpluginsの欲しい機能にチェックを入れたら、下段のDOWNLOAD JSとDOWNLOAD CSSをそれぞれ押下して、jsファイルとCSSファイルをローカルPCにダウンロードします。

ダウンロードしたファイルを FTPソフトでWordpressのテーマフォルダ以下jsフォルダ、cssフォルダへアップロードします。

私の場合はテーマをcocoonにしていますので、アップロード先は下記の通り

wp-content/themes/cocoon-child-master/js
wp-content/themes/cocoon-child -master/css

cocoonの子テーマにはjsとcssディレクトリがないので、FTPソフトなどを使って新たに作ってそこに納めます。

function.phpの編集

WordPressの外観→テーマエディタから右側のメニューからfunciton.phpを選んで空白に下記のコードを貼り付けます。

//Prism.js(syntaxHighlighter)を適用するためのコード
function my_enqueue_scripts() {
  $theme_uri = get_stylesheet_directory_uri();
  wp_enqueue_script( 'prism-js', $theme_uri . '/js/prism.js', array('jquery'), false, true );
  wp_enqueue_style( 'prism-css', $theme_uri . '/css/prism.css');
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

これでPrismのセットアップは完了です。

もし、子テーマのディレクトリではなく親テーマのディレクトリにjsファイルとCSSファイルを入れた場合は、上記3行目を下記に書き換えます。

$theme_uri = get_template_directory_uri();

Prism.jsの使い方

Prism.jsはプラグインのようにダッシュボードで設定できません。使用するには投稿の編集画面カスマムHTMLの中で、<pre><code> </code></pre>の中にソースコードを記述します。

プログラム言語の切り替え

プログラミング言語を指定するにはcodeタグ内のクラス要素に下記の言語コードを記述します。（下記以外の言語はPrismオフィシャルHPを参照ください）

プログラミング言語	言語コード（codeタグに記載する）
html	language-html
CSS	language-css
C-like	language-clike
JavaScript	language-js
C	language-c
C++	language-cpp
PHP	language-php
SQL	language-sql
Visual Basic	language-vb

下記はhtmlの言語を指定した例で、codeタグに”language-html”を指定しています。

 <pre><code class="language-php">//コードを記述</code></pre>

最初にPrismをダウンロードしたときに選んだ言語しか動作しないので、追加したい場合はPrism.jsをダウンロードしなおす必要があります。

行番号の追加

行番号を追加するには、 preタグ内のクラス要素で“line-numbers”を指定します。

<pre class="line-numbers"><code class="language-php">
//コードを記述
</code></pre>

行の開始番号を指定する

行の開始番号を指定するにはpreタグに下記のようにdata-start=”開始番号”を指定します

<pre class="line-numbers" data-start="5"><code class="language-php">
//コードを記述
</code></pre>

行の強調表示

コード内に強調したい行があった場合preタグ内に下記のように data-line=”行番号”を指定します。

<pre class="line-numbers" data-line="2"><code class="language-php">
//コードを記述
</code></pre>

コマンドラインを表示する

preタグのクラス要素にcommand-lineを追加、実行結果をdata-output要素に行番号で指定します。

<pre class="command-line" data-output="2-8,10-13"><code class="language-bash">
ipconfig
Windows IP 構成
イーサネット アダプター イーサネット:
メディアの状態. . . . . . : メディアは接続されていません
接続固有の DNS サフィックス . . . . .: 
イーサネット アダプター イーサネット 2:
IPv4 アドレス . . . . . . [以下省略]
</code></pre>

ipconfig
Windows IP 構成
イーサネット アダプター イーサネット:
メディアの状態. . . . . . : メディアは接続されていません
接続固有の DNS サフィックス . . . . .: 
イーサネット アダプター イーサネット 2:
IPv4 アドレス . . . . . . . . . . . .: 192.168.24.16
サブネット マスク . . . . . . . . . .: 255.255.255.0
dir
 ドライブ C のボリューム ラベルがありません。
 ボリューム シリアル番号は 02F5-E5CE です
 C:\Users\x のディレクトリ
2019/11/16  12:45    [DIR]    Documents