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

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行をハイライトにしています)の指定ができます。

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

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

<!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 Evolved

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

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

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

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

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

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

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

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

まとめ

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

コメント

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