htmlエンコード済みのコードを記事内で整形して表示するWordPressプラグイン「Prettify GC Syntax Highlighter」
ブログの記事内にhtmlなどのコードを掲載する際に、見ためを整形してくれるWordPressプラグインはいろいろあるのですが、そのなかで「htmlエンコード済み」のコードをうまく表示してくれるプラグインを探して使ってみたので、メモします。
今回やりたいこと
当ブログで以前使用していたテーマでは、ショートコードで指定すると「google-code-prettify」でコードを整形して表示する便利な機能があったので、それを使用していました。が、先日テーマを変更した際にその機能がなくなったため、プラグインに頼ることにしたのですが、いくつか希望があったのでそれに沿ったものを探しました。
プラグインへの希望
（けっこう特殊な希望です）
- すでにhtmlエンコードしているコードをきれいに表示したい（過去記事のhtmlコードはhtmlエンコードしたものを掲載しているので）
- 「google-code-prettify」を使ったプラグインだとうれしい（以前のテーマと同じような表示ができるような気がするので）
- ショートコードもしくはCSSのクラスを記事内に追加しやすいとうれしい
- コードを表示する見ためがシンプルなもの（CSSでスタイルを調整しやすいもの）
使用するプラグイン
上記の条件でいろいろ見てみたところ、下記のプラグインがよさそうだったので使ってみることにしました。
「Prettify GC Syntax Highlighter」
[browser-shot url=”http://wordpress.org/plugins/prettify-gc-syntax-highlighter/” width=”610px”]
→ WordPressプラグインのサイト：WordPress › Prettify GC Syntax Highlighter « WordPress Plugins
→ 開発者さんのサイト：Prettify GC Syntax Highlighter
表示イメージ
こんなかんじで表示できます。
※見ためはテーマで指定されているCSSのスタイルなどによって変わります。
基本的な使いかた
使いかたはかんたんで、プラグインをインストールして有効化すれば、設定不要で使えます。記事内に書いたコードの前後を以下のいずれかで囲めばOKです。
- [[code]〜[/code]]
- <pre class=”dontquote prettyprint”>〜</pre>
注意点
htmlタグを書く場合は、htmlエンコードしないとうまく表示されないです（なので、コードをそのままコピペして記事内に貼り付けて掲載したい場合などにはちょっとめんどうです）。
たとえば、以下のようなソースを載せたい場合は、
[code]
<pre class="prettyprint">
<div class="hoge">test</div>
<div class="hoge">テスト</div>
</pre>
[/code]
[[code]〜[/code]]の間、もしくは<pre>タグの間に、下記のようにソースを書きます。
[code]
<pre class="prettyprint">
<div class="hoge">test</div>
<div class="hoge">テスト</div>
</pre>
[/code]
※htmlエンコードがめんどうなときには、こちらのような便利なサイトを使わせていただくのもよいかと思います
→ Tools : Html Encode
※プラグイン配布サイトの説明では<pre class=”prettyprint”>〜</pre>で囲むと（classに「dontquote」を追記しない）、htmlエンコードしていないコードをそのまま書けることになっているので試しにやってみたのですが、html内に日本語があるときに文字化けしたり、閉じタグがうまく表示されないことがありましたので、ショートコードではなく<pre>タグをつかう場合は、上記のようにclassに「dontquote」を入れたものをつかうとよいと思います。
ただ、この場合（ショートコードを使った場合でも）、htmlエンコードしているので、掲載したソースをコピーしてphpのソース内などにペーストすると、そのままうまく貼り付けられないことがあるようです。。
表示内容のカスタマイズ
また、表示内容のカスタマイズをしたいときは、以下のようなことができます。
カスタマイズできること
- 行番号をつける
- ハイライト行をつける
- 言語を指定する
通常はプラグインで自動判定されるようですが、以下の言語を指定できます。
[column size=1/3]- aea
- agc
- apollo
- bsh
- c
- cc
- cl
- cpp
- cs
- csh
- css-str
- cv
- cxx
- cyc
- default-markup
- el
[/column]
[column size=1/3]- fs
- go
- hs
- htm
- html
- java
- js
- json
- lisp
- lua
- m
- ml
- mxml
- perl
- pl
- pm
[/column]
[column size=1/3]- proto
- py
- rb
- scala
- scm
- sh
- sql
- vhd
- vhdl
- wiki
- xhtml
- xml
- xsl
- yaml
- yml
[/column][clear]
書きかたの例
カスタマイズしたい項目ごとにclassやショートコード内に以下のように追記します。
- <pre>タグの場合の例：
<pre class="dontquote prettyprint linenums:1 highlight:1,3-4 lang-html">
<pre class="prettyprint">
<div class="hoge">test</div>
<div class="hoge">テスト</div>
</pre>
</pre> - ショートコードの場合の例：
[[code start=”1″ highlight=”1,3-4″ lang=”html”]<pre class="prettyprint">
<div class="hoge">test</div>
<div class="hoge">テスト</div>
</pre>
[/code]]
上記の例では、下記の指定を入れています。
- linenums:1 or start=”1″：行番号（開始行の番号）
- highlight:1,3-4 or highlight=”1,3-4″：ハイライトする行
- lang-html or lang=”html”：原稿（例では「html」）
表示の例
上記で指定した内容は、下記のような感じで表示されます。
まとめ
今回は特殊な希望があってこちらのプラグインを使っておりまして、過去記事のコードもきれいに表示してくれているのでそれなりに満足しているのですが、コピペの問題や今後のことを考えると、htmlエンコードせずに記事内にコードを書いてそれを整形してくれるプラグインの使用を検討してもよいのかなぁと思ったりしました。過去の記事を書くときにもうちょっといろいろ考えておけばよかったーと思うことはよくあるのですが、今回のこともそのひとつです。。（テーマをころころ変えるのがよくないのですが。。）
