WordPressのシンタックスハイライトをプラグインなしで！prism.jsがオススメ！

2016-08-04 WordPress

WordPressのシンタックスハイライトはプラグインのCrayon Syntax Highlighterを使ってました。きれいに表示されて便利なのですが、乗り換えることにしました。

理由は

WordPress高速化の観点からプラグインを減らしたい
記事作成時、MarkDownで下書き→投稿画面でシンタックスハイライト設定が面倒

だからです。

というわけで、プラグインなしでシンタックスハイライトを実現する方法を探したところ、prism.jsを見つけました。同様のものでhighlight.jsが有名なんですが、prism.jsの方が良さそうなのでこちらにしました。

1 prism.jsとは
2 prism.jsの使い方
3 Crayon Syntax Highlighterから乗り換える方法
4 まとめ

prism.jsとは

prism.jsとはJavaScriptとCSSがセットになったライブラリです。無料で利用できます。実際に利用したのが以下です。

JavaScript

function add(x,y) {
  return x + y ;
}
alert( add(1,2) );  // 3が出力される

コマンドライン

vagrant ssh
Last login: Sat May 14 23:42:18 2016 from 10.0.2.2
                   ___           ___           ___
      ___         /  /\         /  /\         /__/\
     /__/\       /  /:/        /  /:/        _\_ \:\
     \  \:\     /  /:/        /  /:/        /__/\ \:\
      \  \:\   /  /:/  ___   /  /:/  ___   _\_ \:\ \:\
  ___  \__\:\ /__/:/  /  /\ /__/:/  /  /\ /__/\ \:\ \:\
 /__/\ |  |:| \  \:\ /  /:/ \  \:\ /  /:/ \  \:\ \:\/:/
 \  \:\|  |:|  \  \:\  /:/   \  \:\  /:/   \  \:\ \::/
  \  \:\__|:|   \  \:\/:/     \  \:\/:/     \  \:\/:/
   \__\::::/     \  \::/       \  \::/       \  \::/
       ~~~~       \__\/         \__\/         \__\/

http://vccw.cc/

Initial code by Takayuki Miyauchi.
https://github.com/miya0001

かなり見やすいんじゃないでしょうか？Crayon Syntax Highlighterとも遜色ないです。行番号も表示できます。highlight.jsでは行番号は表示できません。コマンドライン専用の表示があり、複数言語、yamlなどの設定ファイルにも対応しています。

prism.jsの使い方

それでは早速使い方です。と言ってもとても簡単です。

本体をダウンロードする

公式サイトでダウンロードできます。トップページ右の方でテーマの円をクリックすると、見た目を確認できます。

ダウンロード画面でprism.jsとcssをダウンロードします。以下それぞれ選択します。

Compression level（通常版か圧縮版）
Themes（シンタックスハイライトテーマ）
Languages（言語、設定ファイル等）
Plugins（行番号表示、コマンドライン表示など）

それぞれお好みで選択してください。言語は画像に写っていない部分にまだまだあります。

Pluginsは私は以下を使用しています。

Line Highlight（特定行をハイライト）
Line Numbers（行番号表示）
Command Line（コマンドライン表示）

基本的な使い方

preタグとcodeタグで囲みます。codeタグのclassに"language-言語"と指定します。

<pre><code class="language-php"></code></pre>

公式サイト下部に言語指定方法が載っています。

行番号を設定

以下のように指定します。

<pre class="line-numbers">

特定行をハイライト

以下のように指定します。

<pre data-line="1-2, 5, 9-20">

カンマ区切りで複数指定できます。ハイフンで複数行の指定ができます。

コマンドライン表示

bash表示とWindowsプロンプト表示があります。

bash表示

<pre class="command-line" data-user="user" data-host="localhost" data-output="2-18"><code class="language-bash">

data-user（コマンド実行ユーザ、rootを指定すると出力行が#に変わります）
data-host（コマンド実行マシン、root@localhostという風に表示）
data-output（コマンド実行結果行、半角数字で指定）

Windows表示

<pre class="command-line" data-prompt="C:¥Users" data-output="2-18"><code>

data-prompt（コマンドプロンプト（実行ディレクトリ））

Crayon Syntax Highlighterから乗り換える方法

さて、これが一番めんどくさいですね。でも対応方法はあります。

Crayon Syntax Highlighterを使用して決まった書き方をしていれば、Search Regexというプラグインで一括で置換できます。

画像のように、決まった形式で投稿していれば一括で置換できます。

Search Regexの使い方

プラグインをインストール、有効化したらツールからSearch Regexを選びます。3つボタンがあり、SearchとReplaceは置換しません。Searchでヒットする内容、Replaceで置換される内容がプレビューできます。問題なければReplace&Saveで置換してください。

とりあえず<preで検索してみる

<preで検索してみてください(>は付けない)。ヒットしたものが置換対象になります。きれいに揃ってそうであれば一括で置換しましょう。置換の前にバックアップは忘れずに。

残念ながらバラバラの場合、少しずつ置換しましょう。それでもひとつずつ記事を開くよりは早いはずです。

まとめ

もし、WordPressのサイトが遅い場合、この対応で少しは速くなるかもしれません。prism.jsは軽いですし、言語対応の豊富さ、行番号表示等、機能的にも優れています。是非、試してみてください。高速化に興味がある方はWordPressを高速化！PageSpeed Insightsで高得点を目指す方法も合わせてご覧ください。