Syntax 系プラグインを利用せず WordPress 記事内にソースコードを綺麗に表示したい – Bitbucket の snippets 待ち

検索してみると、Crayon Syntax Highlighter や SyntaxHighlighter Evolved といったプラグインが人気の様です。
私の場合は WP-Syntax を利用していました。

プラグインか、ライブラリか、「それ以外」か

Syntax Highlight 系のプラグインを利用すると遅くなるといわれるものの、速度の点でいうと利用させていただいた
WP-Syntax に関してはこれに起因した表示速度低下は感じられなかったのでプラグインで「軽め」のものを探している
方にはお勧めできると思います。

ただ、記事の読み込み時にプラグインをフックして読み込んでいるわけだから表示が速くなることも考えにくいと言えます。
速度を重視するならば、プラグイン以外に highlight.js を CDN から読み込んで利用するという方法が良いといわれますが
読み込む js のバージョンを変更する場合 script タグを設定しなおさないといけません。

ソースコードを記事に表示することの目的は何かということを念頭に考えてみると、例えば関数の解説ならばデザイン
など見易さも重要だし、人気サイトなら高速なレスポンスが必要ですが、当ブログではブログのメンテナンス性や安全性
を重視したいと考えました。

WordPress は非常にポピュラーな CMS なのでプラグインも沢山あっていろいろ試すことはできますが、プラグインによって
は脆弱なものもあるためです。実際にプラグインを作成して公開していて且つ脆弱性を作りこまない実装に気を付けている作者
はどれほどいるのでしょうか。

Gist 一択か?

上記した内容をまとめると、選択肢はいろいろとあるようですが何を重視するのかという視点から選ぶと良さそうです。
デザイナやプログラマの方なら GitHub を利用されている方も多いと思いますが、Gist は、ソースコード全体の管理ではなく
関数、サブルーチン、クラスメソッド、メモ書きなどソースコードの一部を Git で管理&共有できるサービスで手軽に利用できます。

デザイン重視    → Crayon Syntax Highlighter, SyntaxHighlighter Evolved
速度重視      → highlight.js
安全性、メンテ重視 → Gist

GitHub 本体のサービスも無料で利用できるのですが、無料版では、公開リポジトリしか作成できずプライベートなリポジトリを作る
ことができませんでした。そのため、教えてもらった無料でプライベートリポジトリも作成できる Bitbucket を私は利用しています。

そのため、Gist でもよいのですが、Bitbucket でも snippets というのがあり似たことができるのですが、残念ながら埋め込みには今のところ対応していません。

Make snippets embeddable (BB-12431)
https://bitbucket.org/site/master/issues/11112/make-snippets-embeddable

Gist は投稿当たり1つの埋め込みだと気にならないものの、試しに多数貼り付けてみるとタグのところがちょっと邪魔な感じになります。
いろいろと試行錯誤していくほかないですかね。

個人的には、ソースコードがあくまでも記事本文側に残ることを前提とすると WordPress 以外でも利用できる highlight.js が今のところ
良さそうかなと思います。

スポンサーリンク

シェアする

フォローする

スポンサーリンク