WordPress でソースコードの表示

投稿者: | 2014年6月23日

WordPress でソースコードの表示をするにはどのプラグインを使用すれば良いのか。

 

まず、次の 2系統があるようです。

・SyntaxHighlighter

・google-code-prettify

WordPress では SyntaxHighlighter 系が主流のようです。google-code-prettify は google が提供しているブラウザでのコード表示用のモジュールでブラウザではデファクトスタンダードと言っても良いのかも知れません。google-code-prettify は基本的にコードの種類を自動判別すると言う特徴もあります。個人的には google-code-prettify の方がデザインがすっきりした感じで好きです。

それから、ソースコードを表記するのに、ショートコードで表記するタイプと pre タグで表記するタイプがあります。ショートコードのタイプはプラグインごとの仕様の共通性が低いとのことで移行しにくいとのこと。pre タグも基本的に class 属性にソースの種類や行番号表示の有無などを表記しており、SyntaxHighlighter 系では統一が取れていないですが、まあ pre タグに括られていると言うことでショートコードよりは移行しやすいようです。google-code-prettify系では仕様が決まっているのでそのまま移行できると思われます。

次に、ソース表示プラグインの最大の問題ですが、ビジュアルモードでタグが消えるものが多い、と言うことです。

SyntaxHighlighter 系では一部、ビジュアルモードに対応しているプラグイン(Crayon Syntax Highlighter など)があります。

google-code-prettify系ではちゃんと動作するものは見つけられませんでした。

 

なので、google-code-prettify系はビジュアルモードでは使わない前提で使用する必要があります。個人的にはビジュアルモードも併用したいので困ったところです。

 

以下に調べたプラグイン・モジュールについて記載します。

SyntaxHighlighter 系

SyntaxHighlighter Evolved

ビジュアルモードで使用するとタグが消えるとのこと。

WP SyntaxHighlighter

ビジュアルモードで使用してもタグが消えません。

Crayon Syntax Highlighter

ビジュアルモードで使用してもタグが消えません。

 

google-code-prettify系

google-code-prettify

https://code.google.com/p/google-code-prettify/

大本の google が提供しているモジュールです。CSS と JavaScript なのでファイルを配置して参照すれば スタイルとして使えます。

 

Prettify Code Syntax

pre タグでソースを括ります。ヴィジュアルモードで表示するとコードが消えますので、テキストモード専用です。

設定の style タブでスタイルを選択できます。

class に linenums と指定すると行番号を表示してくれます。ただ、default、desert、snuburst だと 5行置きにしか行番号を表示してくれません。元々 google-code-prettify がそういう仕様のようです。

スタイルごとに css ファイルがあるので、それを修正すればdefault、desert、snuburst でも行番号を表示するようにできます。

デフォルトのスタイルであれば以下のファイルを修正します。

prettify-code-syntaxstylesheetsdefault.css

以下の行が5行目と10行目を除いて行番号を表示しない、と言う定義になっているようなので削除します。

.prettyprint li.L0,
.prettyprint li.L1,
.prettyprint li.L2,
.prettyprint li.L3,
.prettyprint li.L5,
.prettyprint li.L6,
.prettyprint li.L7,
.prettyprint li.L8 { list-style-type: none }

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です