ソースコードの埋め込み用プラグインを試す

WordPress

ブロックエディタ(Gutenberg)に対応した、コードの埋め込みをするプラグインを探してみましたので、その結果をまとめます。

プラグインの世間での評判を調べてみる

いくつかのブログをチェックしてみたところ、「Highlighting Code Block」の評判が比較的高いという感じです。

次からそれぞれリポートします。コードは、すべてプラグインを実際に使用しています。また、ソースコードはコピー&ペーストしただけの状態です。各プラグインはインストール後、 ブロックインサーターの「フォーマット」カテゴリから選択できました。

ブロックエディタ標準の「ソースコードブロック」

次は、ブロックエディタ標準の「ソースコード」を使用した例です。単色で行番号も表示されないという、極めてシンプルなものとなっています。

右サイトバーで「言語」が選択できますが、選択をしても変化しませんでした。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>PHP Code Example</title>
</head>
<body>
    <h1>PHP コードサンプル</h1>
 
    <p><?php echo 'Hello World!'; ?></p>
 
    <p>コード表示のサンプルです</p>
 
    <div class="foobar">
        This    is  an
        example of  smart
        tabs.
    </div>
 
    <p><a href="http://wordpress.org/">WordPress</a></p>
</body>
</html>

Highlighting Code Block

一番人気っぽい「Highlighting Code Block」です。ブロック最下にオプション指定欄があり、「言語」の選択、「ファイル名」の設定、「data-line属性値」でハイライト行(以下は3-6行をハイライトにしています)の指定ができます。

ブロック選択中、 右サイトバーで「行番号」の表示の有無が指定できます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>PHP Code Example</title>
</head>
<body>
    <h1>PHP コードサンプル</h1>
 
    <p><?php echo 'Hello World!'; ?></p>
 
    <p>コード表示のサンプルです</p>
 
    <div class="foobar">
        This    is  an
        example of  smart
        tabs.
    </div>
 
    <p><a href="http://wordpress.org/">WordPress</a></p>
</body>
</html>

インストールすると管理メニュー(右サイトバーのメニュー)の「設定」に[HCB設定]メニューが追加され、そこで、フォント、フォントサイズ、などの設定ができます。ちなみに、コードが反転表示しているのは「コードカラーリング(フロント側)」を「Dark」にしているためです。 設定画面は日本語表記です。

管理メニュー→設定→[HCB]設定

SyntaxHighlighter Evolved

「SyntaxHighlighter Evolved」です。ブロック選択中、 右サイトバー(日本語表記)で「コード言語」「行番号」の有無、「最初の行番号」「ハイライト行」(以下は3-6行をハイライトにしています)「URLをクリック可能にする」といった指定もできます。

「コード言語」を指定しないと、「プレーンテキスト」が選択されていて、コードの色分けがなされないようなので要注意です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>PHP Code Example</title>
</head>
<body>
    <h1>PHP コードサンプル</h1>
 
    <p><?php echo 'Hello World!'; ?></p>
 
    <p>コード表示のサンプルです</p>
 
    <div class="foobar">
        This    is  an
        example of  smart
        tabs.
    </div>
 
    <p><a href="http://wordpress.org/">WordPress</a></p>
</body>
</html>

インストールすると 管理メニュー の「設定」に「SyntaxHighlighter」メニューが追加され、 そこでテーマ(反転しているのは「Midnight」を選択しているためです)をはじめとするいろいろな設定ができます。設定画面は日本語表記です。

SyntaxHighlighterの設定画面

Enlighter

「Enlighter」です。ブロック選択中、 右サイトバーで「Language」(言語)、「Speciallines」(特別な行)でハイライト行(以下は3-6行をハイライトにしています)、 Lineoffset(最初の行番号)、「Theme」(テーマ)といった指定もできます。

そのほか、コード表示時に右上のアイコンを選択すると、別ウィンドウでソースを表示したり、生コード(色のない単色表示)に切り替えることができます。

表示中、カーソル行がハイライト表示されるのも、ちょっといい感じですね。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>PHP Code Example</title>
</head>
<body>
    <h1>PHP コードサンプル</h1>
 
    <p><?php echo 'Hello World!'; ?></p>
 
    <p>コード表示のサンプルです</p>
 
    <div class="foobar">
        This    is  an
        example of  smart
        tabs.
    </div>
 
    <p><a href="http://wordpress.org/">WordPress</a></p>
</body>
</html>

インストールすると 管理メニュー に「Enlighter」が追加され、 そこでテーマ(反転しているのは「Dracula」を選択しているためです。ちなみに以前は「Mocha」というテーマを選択していましたが、いつの間にか無くなってましたので変更させていただきました)をはじめとする設定ができます。設定画面は英語表記です。

管理メニューに追加されたメニュー
上のタブでさまざまな設定が可能(ただし英語表記)

Code Syntax Block

「Code Syntax Block」というプラグインを見つけました。これは、 ブロックエディタ標準の「ソースコード」を拡張するタイプです。

このプラグインをインストールした後で、ブロックエディタ標準の「ソースコード」ブロックを作ってみると、 右サイトバーで「Language」(コードの言語を指定)、「Show line numbers」(行番号の有り無し)、「Title for Code Block」(タイトル)の指定ができます。設定画面は英語表記です。

テーマの変更はできず、次の一種類のみですが、Prism(以前、一般的に使われていたコード用プラグイン)互換となっているようで、カスタマイズもできるようです(未確認)。ハイライト行を指定する機能はないようです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>PHP Code Example</title>
</head>
<body>
    <h1>PHP コードサンプル</h1>
 
    <p><?php echo 'Hello World!'; ?></p>
 
    <p>コード表示のサンプルです</p>
 
    <div class="foobar">
        This    is  an
        example of  smart
        tabs.
    </div>
 
    <p><a href="http://wordpress.org/">WordPress</a></p>
</body>
</html>

ちなみに、同様にブロックエディタ標準の「ソースコード」を拡張するタイプとして「Code Prettify」というプラグインもありましたが、他のプラグインとの相性が悪い(影響してしまう)ので導入をやめました。

CodeMirror Blocks

ここからは、追加で見つけたプラグインです。

新たに、「CodeMirror Blocks」というプラグインを発見しましたが、これもなかなかの優れものです。

右サイトバーの「CodeMirror Panel Settings」の「Langage Label」で、1行目(下記オレンジ枠部分)の表示指定ができます。その下の「CodeMirror Settings」で言語名と、テーマが40種類ぐらいから選べます。

その下の「Line Settings」では、行番号の有り/無し、選択中の行のハイライト化をするか/しないか(表示中行クリックした部分がハイライト表示される)、行の折り返しの有り/無し、表示中のコード編集ができる/できない(下記サンプルは「コード編集ができる」を指定しているので、実際に試してみてください)といった設定ができます。ハイライト行を指定する機能はないようです。

右上のボタンは左から、コードの実行、フルスクリーン化、コードのコピーの機能があります。コードの実行をクリックすると、コードブロックの下に結果が表示されるのが、なかなかユニークです(こちらもぜひ、試してみてください)。

上記のオプションが管理メニュー(右サイトバーのメニュー)の「CodeMirror Blocks」からも設定できるのが気が利いていると思います。設定画面は英語表示です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>PHP Code Example</title>
</head>
<body>
    <h1>PHP コードサンプル</h1>
 
    <p><?php echo 'Hello World!'; ?></p>
 
    <p>コード表示のサンプルです</p>
 
    <div class="foobar">
        This    is  an
        example of  smart
        tabs.
    </div>
 
    <p><a href="http://wordpress.org/">WordPress</a></p>
</body>
</html>

このプラグインですが、下画面のようにWordPressの編集中も実際と同じように色分け表示される(他のプラグインは単色表示です)ので違和感が少ないです。ここポイント高いですね。

WordPress編集中の画面がすでに色分けされているのが嬉しい

まとめ

「Highlighting Code Block」は、何も考えないでそれなりの表示をしてくれる点で、一番バランスがいいように思います。「SyntaxHighlighter Evolved」は、見せ方に凝れるプラグインといった感じです。「Enlighter」はより高機能ですが、設定項目が多すぎて使いこなすのに余計なエネルギーが必要となるでしょう。「Code Syntax Block」は 「Highlighting Code Block」よりもさらに何も考えたくない人にお勧めかもしれません。

なお、追加で見つけた「CodeMirror Blocks」も、「Highlighting Code Block」並みに使い勝手がいいと思いますし、他のプラグインにはない機能があって、おもしろいですよ。

コメント

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