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
感想
- 元ネタはgoogleが提供している
- 導入が面倒っぽい
Prism.js(プラグインなし)
感想
- ちまたで結構人気。
- 導入面倒。wordpressのせっかくの簡単さが失われる。
対象外
Crayon Syntax Highlighter
感想
- 動作しない。
- 更新停止
- 最新のWordPressバージョン5での動作は未検証