「SyntaxHighlighter Evolved」と「SH TinyMCE Button」を使ってコードをスマートに表示する

相変わらず四苦八苦しているのですが、今回はソースコードをどうやって綺麗にブログに掲載するかです。

本来、ブラウザ上には表示されないソースコードをブラウザ上に表示させるのは厄介なんです。

ブラウザにソースコードを表示する

改行やスペースなどの表示は、整形済みテキスト<pre>タグを使うと可能です。

特殊文字は、文字実体参照という面倒なものを使用して表示しますが、幸いビジュアルエディタに入力すると自動的に変換してくれるので楽です。

ここまでなら、それほど手間はかかりませんが、プログラムコードというのは、そのままだと見づらいので、色分けしたり、行番号を付けたりしたいですよね。

この大変な色分け作業などを自動でしてくれて、綺麗に整形までしてくれるツールにJavaScriptで作られた「SyntaxHighlighter」というのがあります。

表示例

h2 {
 background: #DCFFDC;
 color: #1a1a1a;
 font-size: 20px;
 line-height: 30px;
 margin-bottom: 20px;
 padding-top: 10px 20px 10px 20px;
}

綺麗にコードを表示してくれるツールのプラグイン版、「SyntaxHighlighter Evolved」を使用する事にしました。

SyntaxHighlighter Evolvedを導入する

プラグインを追加する

1. 管理画面のプラグインから新規追加をクリック。
2. 検索窓にプラグイン名「SyntaxHighlighter Evolved」を入力してEnter。
3. 見つかったら、いますぐインストールをクリック。
4. プラグインを有効化をクリック。

設定する

SyntaxHighlighterの設定

SyntaxHighlighterのバージョン

バージョン3でいいと思いますが、行を折り返して表示したい時は、バージョン2を選択します。

テーマ

DefaultとEclipsは白背景。その他は黒背景です。

すべてのブラシを読み込む

チェックを入れると多少重くなるかもしれません。ただ後述するプラグインを使用したいのでチェックを入れています。

一般

行番号やツールボックスの表示・非表示を設定できます。

追加のCSSのclass名

<div>で囲んでいるボックス内に、独自のCSSを追加する時に使用します。

行番号の開始

最初の番号を設定できます。10とか100とか

行番号の余白

桁数を指定する事で、左に余白を付けて、右揃えしてくれます。

タブのサイズ

左スペースの最小幅を指定します。

タイトル

ボックスにタイトルを表示します。

下の方にプレビューがあるので、設定の確認を簡単に行えます。

使用方法

[]の中にHTMLやPHPと該当するプログラム名を入れて囲みます。

[CSS]
h2 {
 background: #DCFFDC;
 color: #1a1a1a;
 font-size: 20px;
 line-height: 30px;
 margin-bottom: 20px;
 padding-top: 10px 20px 10px 20px;
}
[/CSS]

 注意点として、テキストエディタで書き込む必要があります。ビジュアルエディタで編集すると整形が崩れます。[]で囲むのもちょっと面倒に感じたので便利なプラグインを導入しました。

SyntaxHighlighter TinyMCE Buttonを導入する

SyntaxHighlighter Evolvedを使いやすく整形崩れもなくしたプラグインです。

名前が示す通り、「TinyMCE」にソースコードを囲むボタンを追加してくれます。

TinyMCEについては、TinyMCE Advancedを導入してブログ記事の作成を捗らせようを参考にしてください。

プラグインを追加する

1. 管理画面のプラグインから新規追加をクリック。
2. 検索窓にプラグイン名「SyntaxHighlighter TinyMCE Button」を入力してEnter。
3. 見つかったら、いますぐインストールをクリック。
4. プラグインを有効化をクリック。

設定方法

設定の「SH TinyMCE Button」から設定画面に移動できます。

使用中のプラグイン

Evolved以外にもSyntaxHighlighter系のプラグインがあるようです。

ボタン

ビジュアルエディタに「pre」と「CODE」のボタンが追加されます。

ウインドウサイズ

ポップアップウインドウの大きさ。

ボタンをツールバーの

ツールバーの何行目にボタンを追加するか。

2．ボタンのデフォルト設定

ドロップダウンで表示されるプログラム言語などを設定できます。

※「SyntaxHighlighter Evolved」設定のすべてのブラシを読み込むにチェックが入っていないと正常に使用出来ません。

使用方法

ツールバーに「pre」と「CODE」が追加されています。

「pre」をクリックすると、ポップアップウインドウが表示されます。

言語の選択

ドロップダウンでプログラム言語が表示されます。

行番号を表示

行番号の表示・非表示。

行番号の開始番号

最初の番号を設定します。10とか100とかも出来ます。

強調表示する行

強調したい行に背景色を付ける。カンマで区切ると複数行を指定できます。

「CODE」をクリックすると、ポップアップウインドウに直接ソースコードを入力して、エディタに貼り付けられます。エディタに直接コードを書いて囲むより、こちらの方が良いかもしれません。

まとめ

プラグインを３個使って、やっと正常に利用できました。

ひと苦労しましたが、綺麗にソースコードが表示できて気持ち良いですねｗ