Design Note

wordpressでシンタックスハイライトのプラグインはどれを選べば良い？

  • 2019年12月16日
  • 2019年12月17日
  • メモ

wordpressを使用する上で、コードをどう見せるかはみんなの課題の１つ。

複数あるシンタックスハイライトの機能を良い点（メリット）、悪い点（デメリット）について比較してみました。

今回比較した機能はこちらの機能です。

  • ○「Highlighting Code Block」
  • △「WP Code Highlight.js」
  • ○「Enlighter」
  • ×「SyntaxHighlighter Evolved」
  • △「code prettify」
  • △「Prism.js」
  • ×「Crayon Syntax Highlighter」

選択基準としては「導入のしやすさ」「利用者数」「更新度合い」「デザイン」

結果的に、本ブログでは「Enlighter」を採用しています。（途中から）

Highlighting Code Block

 

感想

  • シンプルいずベストなもの。見た目含めて。
  • コードブロックから抜け出すのが少し面倒。ctrl + shift + enter、から再度enterが必要。
  • たまにコードブロックから抜け出せなくなる。
  • 利用数がまだ少ないので、今後の運用含め心配なところはある（期待）

WP Code Highlight.js

感想

  • ビジュアルエディタでは利用できない（AddQuicktagのプラグインで対応することは可能）

Enlighter

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

感想

  • コード用のエディタが表示されて、挿入されるのはわかりやすい。設定も豊富。
  • ol>liタグ使っているところがTHE THORとかち合って崩れてしまった。CSSを追加する必要あり。

SyntaxHighlighter Evolved

 

感想

  • ビジュアルエディタでは利用できない（AddQuicktagのプラグインで対応することは可能）

code pretty

 

感想

  • 元ネタはgoogleが提供している
  • 導入が面倒っぽい

Prism.js（プラグインなし）

感想

  • ちまたで結構人気。
  • 導入面倒。wordpressのせっかくの簡単さが失われる。

対象外

Crayon Syntax Highlighter

感想

  • 動作しない。
  • 更新停止
  • 最新のWordPressバージョン5での動作は未検証