2012年06月21日 category : WordPress tags :

作業時間も短縮!WordPressでコードを表示するプラグイン

このエントリーをはてなブックマークに追加

SyntaxHighlighter-Evolved

WordPressでソースコードを表示するプラグイン「SyntaxHighlighter Evolved」を導入しました。

WordPressやWebサービスを5ステップくらいで簡単に紹介している当ブログですがその性質上ソースコードを記載することがあります。ソースコードは<pre><code>〜</code></pre>で表示させてCSSで折り返しをしているのですが、なんかいまいち目立ちません。

CSSで装飾しようかとも思いましたが、折角WordPressでブログを作っているのですからプラグインで対応することにしました。使用するプラグインは「SyntaxHighlighter Evolved」というプラグインです。

ソースコードを表示するプラグインは多数でていますが、このプラグインを採用した理由のひとつにこの記事を書いている時点でのWordPressのバージョン3.3.2に対応しているというのがあります。他のプラグインもテストされてないだけで動くのでしょうが安心できますしね。

01 . SyntaxHighlighter Evolvedのインストール

WordPress管理画面→左のメニュー「プラグイン」→「新規追加」で「SyntaxHighlighter Evolved」を検索します。検索結果に表示されると思いますので「いますぐインストール」をクリックします。

install

インストールが完了したら「プラグインを有効化」をクリックして有効にしてください。

02 . SyntaxHighlighterの設定

有効化にするとWordPress管理画面→「設定」に「SyntaxHighlighter」が追加されますのでクリックして設定画面を表示します。

ここではテーマ(見た目)や行番号の表示有無、ツールバーの表示有無やタブのサイズなどが変更できます。「変更を保存」をクリックすることでプレビューに反映されますのでいろいろ変更してみてください。バージョン3.1.3時点の設定項目↓

・行番号を表示する
・ツールバーを表示する
・自動リンクを有効にする
・コードボックスの表示を閉じておく
・軽い表示モードを使う
・インデントタブを許容するスマートタブを使う
・長い行を折り返す(v2.xのみ、横スクロールバーを無効にする)
・追加のCSSのクラス名
・行番号の開始
・行番号の余白
・タブのサイズ
・タイトル

03 . コードの変更

コード表示のプラグインは<pre>タグを使う方法とショートコード:[使用言語]がありますが、SyntaxHighlighter Evolvedはショートコードを使用します。

もともと<pre>タグを使って実装していたのでどちらのタイプのプラグインを使うか悩みましたが、<pre>タグを使う方もclass指定やlang指定を追加するなど手を加える必要があったので入力も少ないショートコードを使うプラグインを選びました。

SyntaxHighlighter Evolvedでのショートコード記載は使用言語でソースコードをくくってあげればOKです。

[使用言語]ー[/使用言語] ※使用言語:php, html, css

こんな感じになります。

php-sample

04 . これがこーなった

<pre><code>-</code></pre>のとき

pre-code

SyntaxHighlighter Evolvedに変更

after

05 . プラグインを使った際に感じた最大のメリット

密かに一番の確認ポイントだったのですが、CSSでの装飾ではなくプラグインを使うことによってコードの貼り付けが圧倒的に楽になったんです。と言うのも、特殊文字”<”を”&lt;”に変更しなくてもよくなりました。

表示したいタグなのか、コード上のタグなのか区別が付かないために特殊文字”<”をWeb上で表記する場合は文字実体参照”&lt;”に書き換える必要があるのですが、この書き換えが結構手間なのです…

一括で変換してくれるサイトもあるのですがブログで紹介するくらいのコード量なら微妙に自分で書いたほうが早い。けど面倒くさい。チェックも慎重になる。と毎度モヤモヤしてましたがソースコードそのまま貼り付けるだけでもOKでした(=ω= ニヤッ

ソースコードも見やすくなって、ソースコードを紹介する記事を書く時間も短縮できるプラグイン「SyntaxHighlighter Evolved」。コードを表記する機会があるブログ運営者さんはぜひ一度お試しください。

HOME >>  WordPress > 作業時間も短縮!WordPressでコードを表示するプラグイン