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

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

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

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

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

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

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

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

Highlighting Code Block

WordPress.org 日本語

prism.js を使用したシンタックスハイライト機能付きのコードブロックを追加します。 (Gutenberg とクラシ…

 

感想

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

WP Code Highlight.js

感想

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

Enlighter

WordPress.org 日本語

All-in-one Syntax Highlighting solution. Full Gutenberg and …

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

感想

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

SyntaxHighlighter Evolved

WordPress.org 日本語

Easily post syntax-highlighted code to your site without hav…

 

感想

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

code pretty

WordPress.org 日本語

100% automatic code highlighting using the Prettify library.…

 

感想

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

Prism.js(プラグインなし)

感想

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

対象外

Crayon Syntax Highlighter

感想

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

Fatal error: Uncaught Error: Call to undefined function set_post_views() in /home/jszk/desnote.com/public_html/wpjs/wp-content/themes/the-thor-child/single.php:658 Stack trace: #0 /home/jszk/desnote.com/public_html/wpjs/wp-includes/template-loader.php(78): include() #1 /home/jszk/desnote.com/public_html/wpjs/wp-blog-header.php(19): require_once('/home/jszk/desn...') #2 /home/jszk/desnote.com/public_html/index.php(17): require('/home/jszk/desn...') #3 {main} thrown in /home/jszk/desnote.com/public_html/wpjs/wp-content/themes/the-thor-child/single.php on line 658