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

WordPress
スポンサーリンク

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

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

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

スポンサーリンク

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 JSDOWNLOAD 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

トラブル防止のための工夫

記事にHTMLブロックを入れるとレイアウト崩れや表示速度の低下など、トラブルが発生する場合があります。下記の項目に気を付けて執筆しましょう。

preタグ、codeタグはしっかり閉じましょう

preやcodeの終了タグを忘れてしまうと、投稿ページのレイアウトが崩れるか、エラー表示が出まくります。レイアウト崩れが起こった場合は、終了タグを忘れていないかチェックしましょう。

表示させるソースコードの特殊文字はしっかりエスケープ

syntax higliteさせたいソースコードで特殊文字が使われている場合はしっかりエスケープしましょう。

最も危険なのは < です。レイアウトが崩れたり、表示が遅くなったり、GoogleSearchConsoleのカバレッジとして怒られたりといろいろです。&も次に危険なのでこの2つは要注意です。

syntax系のプラグインを削除しておく

SynataxHighlight系のプラグインを削除し忘れていると、思ったように表示されないなどのエラーが想定されるので必ず削除しましょう。

まとめ

Creyonはかなり前から更新が止まっているプラグインです。Prismは導入が難しそうだったので、手が出なかったのですが案外簡単でした。

使い方も超簡単で手軽、当サイトのSyntaxHighlighterはPrismで決まりです。

この記事がなにかのお役に立てたら幸いです。

コメント

タイトルとURLをコピーしました