エンジニアブロガーに必須なシンタックスハイライトをWordPressに導入する

Wordpressでブログを書いているエンジニアの方でまだシンタックスハイライトを導入していない、もしくは検討している方におすすめしたいのがPrism.jsです。


Prism.jsとは?

Prism.jsは軽量かつ拡張性のある現代のWeb標準を考慮したシンタックスハイライトです。数千のウェブサイトで使われており、あなたが毎日訪問するいくつかサイトにも含まれています。


  • とても簡単

    prism.cssとprism.jsに含まれる適切なHTML5のタグコード(code.language-xxxx)を使うだけです。


  • 直感的

    言語クラスはあなたが複数のコードから断片的に定義した言語だけが引き継がれます。


  • 羽のように軽い

    コア部分は縮小・圧縮され2KBです。言語は1つ追加するごとに0.3-0.5KB、テーマはおよそ1KBです。


  • 劇的に早い

    利用可能であれば、Webワーカーとの並列処理をサポートします。


  • 拡張可能

    新しい言語を定義するか、既存の言語を拡張します。 Prismのプラグイン構造のおかげで新しい機能が追加されました。


  • 簡単なスタイリング

    すべてのスタイリングは.comment、.string、.propertyなどの分かりやすいクラス名のCSSで行われます。


引用元:Prism


Prism.jsのメリット


  1. プラグインではない

    Wordpressを続けていく中で、今後一番効いてくるメリットになります。プラグインというのはそもそもWordpress本体の処理に合わせて、プラグイン独自の処理を介入させ機能を提供します。そのため本体の更新が行われたら、プラグインもそれに合わせ更新する必要あるのです。しかし、プラグインがずっと更新される保証はありません。また、プラグインの処理が介入するということはそれだけ処理が多くなり、表示速度が遅くなる原因にもなります。

    プラグインなしで実装できる機能は、なるべくプラグインを利用しないのがベストです。


  2. ファイルが軽量

    必要な言語、機能だけがファイルに書き出されるので追加するファイル容量が少なく済みます。


  3. 拡張機能が充実

    上記2点が良いとしても、必要な機能がないと意味ないですよね。でも、Prism.jsには必要な機能を好みに合わせて拡張することができます。



必要なファイルをダウンロード

Prism.jsを実装するのに必要なJavaScript、CSSの2ファイルを下記からダウンロードします。

Download ▲ Prism

デザイン、必要な言語や機能を選択する必要があるので順を追って説明します。


圧縮レベルを選択


  • Development version:開発バージョン

  • Minified version:圧縮バージョン

JavaScriptを圧縮するかしないかの違いです。こだわりがない場合は「Minified version」を選択しましょう。

※CSSは圧縮されません


テーマを選択

テーマが全7種類が用意されています。僕のブログは白が基調なのでCoyを選択しました。ブログのイメージ、デザインに合うテーマを選択すると良いでしょう。


言語を選択

使用する言語を選択します。デフォルトでチェックされている4つに加え、必要な言語を選択します。


  • Markup(HTML、XML、SGMLなど)

  • CSS

  • C-like

  • JavaScript

追加する場合はもう一度この作業をする必要があるので、利用する可能性がある言語はチェックしておいたほうが良いでしょう。


プラグイン(機能)を選択

使用するプラグインを選択します。各機能の説明を記載しておきます。

プラグイン
概要

Line Highlight
指定した行もしくは行範囲をハイライトする。

Line Numbers
行番号を表示する。開始番号が指定可能。

Show Invisibles
タブや改行のような不可視文字を表示する。

Autolinker
コメント内のMarkdownリンクを解析し、URLやメールをクリック可能なリンクに変換する。

WebPlatform Docs
HTMLタグやCSSプロパティなどをWebPlatform.orgへのリンクに変換する。リンク先は新しいタブで開かれる。

Custom Class
Prismデフォルトのクラスに接頭辞を付与する(.commentは.namespace--commentになる )もしくは、あなたの定義済みのもの(.editor__commentまたは.comment_7sh3aのような)と入れ替えることができる。

File Highlight
外部ファイルを取得し、Prism.jsでハイライトする。ウェブサイト自体で使われる。

Show Language
コードブロック内にカーソルを合わせると、ハイライトされている言語を表示する。

JSONP Highligh
JSONPで内容を取得し、興味がある内容をハイライトする。(例えばGitHub/GistsまたはBitbucket API)

Highlight Keywords
CSSで特定のキーワードをハイライトする。

Remove initial line feed
開始行の空白を削除する。

Previewer: Base
PreviewerのAPIを提供する。

Previewer: Color
CSSカラーためのPreviewer。

Previewer: Gradient
CSSグラデーションのためのPreviewer。

Previewer: Easing
CSS easing関数のためのPreviewer。

Previewer: Time
CSS timeのためのPreviewer。

Previewer: Angle
CSS角度のためのPreviewer。

Autoloader
自動的にコードブロックをハイライトするための言語をロードする。

Keep Markup
ハイライト表示中にカスタムマークアップを失われないようにする。

Command Line
コマンドラインプロンプトを表示する。

Unescaped Markup
エスケープせずにマークアップを記載する。

Normalize Whitespace
コードブロック内の空白を正規化する複数の操作をサポートする。

Data-URI Highlight
データURIコンテンツをハイライト表示する。

Toolbar
コードブロックの上部にボタンを簡単に登録できるツールバーを設置する。

Copy to Clipboard Button
クリックするとコードブロックをクリップボードにコピーするボタンを追加する。

ぼくは「Line Numbers」「Show Language」「Copy to Clipboard Button」「Remove initial line feed」を選択しました。


Download(ダウンロード)ボタンをクリック

最後にDownloadボタンをクリックします。

ダウンロード後、Prism.jsとPrism.cssの2ファイルが正常にダウンロードされていることを確認してください。

テキストファイルがダウンロードされたので、それぞれprismjs.min.jsprismjs.min.cssと変更しました。


Wordpressに反映

Prism.jsをWordPressに反映していきます。


ファイルをアップロード

ダウンロードした2ファイルをFTPでアップロードします。

アップロード先はテーマの構成に適したディレクトリに行います。僕が使っているストークは下記でした。

css・js : 〜/wp-content/themes/jstork_custom/以下

デフォルトでインストールされていたtwentyseventeenは下記になります。

css : 〜/wp-content/themes/twentyseventeen/assets/css/以下

js : 〜/wp-content/themes/twentyseventeen/assets/js/以下


functions.phpを修正

functions.phpに下記コードを追加します。

※functions.phpはテーマディレクトリにあります。

ex.〜/wp-content/themes/jstork_custom/functions.php

// css、jsを読み込み

add_action( 'wp_enqueue_scripts', 'prism_style' );
function prism_style() {
wp_enqueue_style( 'prism-css', get_stylesheet_directory_uri() . '/prism.min.css' );
wp_enqueue_script( 'prism-js', get_stylesheet_directory_uri() . '/prism.min.js', array('jquery'), '20180801', true );
}

// htmlタグを変換
add_filter('the_content', function($content) {
$content = preg_replace_callback('/<pre><code(.*?)>(.+?)<\/code><\/pre>/s', function($matches) {
$matches[2] = preg_replace(['/</', '/>/'], ['&lt;', '&gt;'], $matches[2]);
return '<pre><code'.$matches[1].'>'.$matches[2].'&lt;/code>&lt;/pre>';
}, $content);

return $content;
});

※functions.phpを開くと関数(function〜)がなく、機能別にファイルを読み込んでいる場合があります。その場合、JavaScriptやCSSの設定を行っているファイルに追記しましょう

// ファンクション

require_once('lib/admin/init.php');
require_once('lib/admin/manual.php');

require_once('lib/functions/asset.php');
require_once('lib/functions/head.php');
require_once('lib/functions/custom-post.php');
require_once('lib/functions/bzb-functions.php');
require_once('lib/functions/setting.php');
require_once('lib/functions/custom-fields.php');
require_once('lib/functions/category-custom-fields.php');
require_once('lib/functions/widget.php');
//require_once('lib/functions/lang.php');
require_once('lib/functions/postviews.php');
// require_once('lib/functions/json-ld.php');
require_once('lib/functions/social_btn.php');
require_once('lib/functions/show_avatar.php');
require_once('lib/functions/shortcode.php');
require_once('lib/functions/rss.php');

以上で準備完了です。


使い方

利用するときはコードを下記タグで囲みます。

<pre><code class="language-xxxx">...</code></pre>

xxxxに言語を指定するだけです。

Markup → markup

CSS → css

C-like → clike

JavaScript → javascript

行番号を表示する場合はpreタグにclass="line-numbers"を追加します。※ダウンロード時に「Line Numbers」プラグインを選択している必要があります。

<pre class="line-numbers"><code class="language-xxxx">...</code></pre>


まとめ

手軽に使え見栄え良く、コピー機能も便利ですのでまだ導入されてない方は検討してみてはいかがですか?