cocoonで使えるソースコードの埋め込みプラグインを検証したけど不具合もある件

wordpress編

こんにちは

ブログでテーマなどのカスタマイズ記事を書くときに、ソースコードを表示
することがありますが、cocoonにはもともとその機能が用意されています。

け~さん
け~さん

ただ、cocoonで用意されているものでは、機能面と
デザインに少し物足りない感があった。

そこで、今回は代表的なソースコード埋め込みプラグイン4つを使ってみて
デザイン見やすさ、不具合などを検証してみました。

今回試したソースコード埋め込みプラグイン
  • CodeMirror Blocks
  • Highlighting Code Block
  • SyntaxHighlighter Evolved
  • Enlighter
(*注 この記事はテーマにcocoonを使ってる方向けに書いてます。)

crayon-syntax-highlighterも試しましたが、cocoon以外のテーマ
(lightning、Luxeritas)でも不具合により使えませんでした。
しばらく更新されてないようです。

スポンサーリンク

cocoon標準のソースコード表示機能

cocoonで始めから使えるソースコードの表示機能です。

設定は、ダッシュボード⇒cocoon設定⇒コードで行えます。

ここでは、行番号の表示やハイライトスタイルを選択することができます。

け~さん
け~さん

おじさんは、背景が白っぽい方が見えやすい気がするので
スタイルにgithubを選択しています。

使用例

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

シンプルで見やすくていいのですが、フォントがいまいちなのと、コピー
タグが欲しい。

はるこ
はるこ

余分なプラグインをインストールしたくない方は、
cocoonの標準機能で十分かもしれません。

highlighting code block

最も利用者が多く、評価の高いHighlighting Code Blockから紹介します。

cocoonでHighlighting Code Blockが使えない時

cocoonでHighlighting Code Blockを使うと、うまく表示されないことがあり
ます。これは、cocoonの「サイト高速化」の設定が原因です。

cocoon設定⇒高速化⇒JavaScript縮小化から

上図のように、JavaScript縮小化にチェックを入れている場合は、下の枠の中に
除外候補として、prism.jsを書き込みます。

これでHighlighting Code Blockでコードが表示できるようになります。

け~さん
け~さん

縮小化にチェックを入れていない場合は、なにも
しなくてもいい。

使用例

スクリーンショットです。

こちらもシンプルで見やすいんですが、ソースコードの行が増えてくると、
番号とのずれが出てきます。

どうもこの症状は、テーマにcocoonを使っていると顕著に表れる
ようです。LightningやLuxeritasではあまりずれが見られなかっ
た。また、このずれを解消するのに、プラグインのstylecssをいじ
る方法もありますが、ここでは割愛します。

Syntaxhighlighter Evolved

Syntaxhighlighter Evolvedもわりとメジャーなプラグインですが、cocoonでは
ご覧のようにうまくコードが表示できませんでした。

スクリーンショットです。
け~さん
け~さん

LightningやLuxeritasではまともに表示されますので、
テーマの相性でしょうか?試行錯誤したけど解決
できませんでした。

Enlighter

このプラグインも先ほどの Syntaxhighlighter Evolved同様、うまく表示
できませんでした。

やはり、他のテーマ LightningやLuxeritasでは問題なく表示されます。

スクリーンショットです。

Codemirror-Blocks

最後は、わりと新しめのプラグイン Codemirror-Blocks です。

cocoonでCodemirror-Blocksを使うためには

Codemirror-Blocksもcocoonではうまく表示できないことがあります。

これもcocoonのサイト高速化の設定が原因です。

解決するには、cocoon設定⇒サイト高速化⇒ JavaScript縮小化のチェックを
外すだけです。

スクリーンショットです。

シンプルで分かりやすい表示画面、コードのコピーもボタン一つで
簡単にできます。

け~さん
け~さん

個人的におすすめはこのプラグインかなぁ。

番外編CodePenを使う。

CodePenはプラグインではありませんが、ソースコードを表示できる
ウェブアプリです。

はるこ
はるこ

ソースコードとプレビューが同時に表示されるので
視覚的にも分かりやすく便利。

はるこ
はるこ

CSSボタンやResultボタンを押してみてね!

CodePenを記事に表示するには

まずはCodePenにアクセス(ログイン)して、ソースコードを記述します。

CodePenの使い方については下記を参照してください。↓

コードを記述したら、画面上段のSAVEボタンを押す。

すると、画面右下にEmbedボタンが表示されるのでそれをクリック

Embed This Penの画面が出たら、①Iframeを選んで②Copy Codeをクリック
する。

コピーしたコードを、ブロックエディタをコードエディター編集にして
コピペで完了。

はるこ
はるこ

クラシックエディタならテキストエディタ上に
コピペします。

まとめ

今回は、cocoonで使えそうなソースコードの埋め込みプラグイン4つ+α
を紹介しました。

(*この記事を書いた後、Codemirror-blocks以外は削除しました。)

念のためにおじさんのwordpress使用環境を書いときます。
この記事を書いてる時点(021年7月27日)では最新だと思います。

  • WordPressバージョン 5.8
  • Cocoonバージョン 2.3.3.11
  • サーバー     Xserver
  • PHPバージョン  7.4.13

結論

と言うわけで結論ですが、wordpressのテーマにcocoonを使ってる方は、

ソースコードの表示におすすめ
  • cocoonの標準機能を使う。
  • プラグインならCodemirror-blocks
  • CodePenで代用する。

になります。

cocoonでソースコードプラグインを導入しようか?と考えている方の
参考にしていただければ嬉しいです。

それでは

コメント

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