このスクラップは限定公開です
Closed5

WPでコードを表示するプラグインを選定する

かまねこかまねこ

はじめに

WPで作られている自社HPに技術ブログを構築中。WPにコード表示用のブロックは一応あるが技術ブログとしては機能が足りないのでプラグインを選定する必要がある。
言語を選択できて、その言語に沿った色付けをしてくれるという機能はマスト。あとは使い勝手などで選定する。

こちらの記事を参考にいくつか試してみる

かまねこかまねこ

触ってみての感想

Code Block Pro

  • 一括設定がなくて記事を書くときに色々設定する必要がある。
  • カラーのテーマがたくさんあって自分の好みのものが選べるのは良い。でも毎回選ぶのはだるいかもしれない。一部の設定は保存されると書いてあるのでそれは良いかも。
    • 挙動確認していないが設定保存がauthorごとにされなかった場合は複数人運用は向かないかも。
  • 更新が頻繁にあって今日の段階で最終更新が1日前なのは良いポイント。
  • 準備されている言語の数がたぶん一番多い。その分選ぶのが大変かもと思ったが最近使ったものが表示される機能あり。

Highlighting Code Block

  • 説明ページが日本語であるのは良い。社内で運用するときに説明しやすい。
  • 設定内に[HCB]設定という項目が追加され、一括設定ができつつ各記事ごとにも調整できる。
  • すごく高機能ではないが今回の技術ブログで使う分には必要十分でちょうど良いと思う。
  • lightモードの色は好みだがDarkモードはあまり好みでないのは残念。一応カスタマイズはできる模様。
  • 最終更新が2年前でちょっと不安。
  • 言語選択の表示順がABC順でなくてよく使われる順なのが好み分かれそう...
  • ファイル名の表示機能あるのは良い。

SyntaxHighlighter Evolved

  • 参考記事には載っていないがWPのプラグイン検索で出てきて評価が高かったので試してみた。
  • 設定内にSyntaxHighlighterという項目が追加され、一括設定ができつつ各記事ごとにも調整できる。
  • 最終更新が2ヶ月前なのは良いポイント。テーマがいくつか用意されていて一括で設定、個別記事では変えられないというのは良さそう。
  • 編集中の見た目がコードブロックぽくない。
かまねこかまねこ

見た目

どちらも上からデフォルトコードブロック、Code Block Pro、Highlighting Code Block、SyntaxHighlighter Evolved

編集中

記事内

こうしてみるとCode Block ProかHighlighting Code Blockが良さそう。

かまねこかまねこ

すごく大事なこと発見した。タブキー押してインデントになるの3つ中ではCode Block Proだけだ。それ以外はwebページでよくあるフォーカス移動になる。
記事を別で書いてコピペするか、直でWPで書くかによるけれどタブキーの挙動がインデントの方が良いな...

かまねこかまねこ

マークダウンで書いたものをコピペ→WPブロックに変換の挙動も一番Code Block Proが理想に近い。Highlighting Code BlockとCode Block Proで悩むが、ひとまずCode Block Proを暫定採用にする。

このスクラップは3ヶ月前にクローズされました