記事内にソースコードを書きたい時って、技術系のブログなんかでは結構多いですよね。
僕は、このブログでソースを載せる事もある為、以前からSyntaxHighlighter Evolvedというプラグインを使っているのですが、今回は「SyntaxHighlighterとは？」から、数あるSyntaxHighlighter系のプラグインの中からこのSyntaxHighlighter Evolvedを選ぶに至ったまでの比較内容と、このプラグインの具体的な設定方法をご紹介したいと思います。
目次
SyntaxHighlighterとは？
HTMLページでJavaやPHPなどのスクリプトコード、JavaScriptやHTML/CSSなどのソースコードを記述する時に、ソースコードをそのまま記述すると、タグやスクリプトがソースと解釈されたり、読みにくくなったりします。
Syntax Highlighterとは、ソースコードなどを見やすく区別してくれるJavaScriptライブラリです。
最近では、プログラミングやWebデザインなどの記事のブログやWebサイトなどでも結構見かけますよね。
ソースコードをそのまま表示するには、preタグでも可能ですが、このSyntaxHighlighterはタグや言語特有キーワードを強調したり色をつけたりもでき、視覚効果も高めてくれる便利なライブラリです。
SyntaxHighlighter系プラグイン比較
SyntaxHighlighterをWordPressで使うには、便利なプラグインがたくさんあります。
有名どころだけでも、
・SyntaxHighlighter Evolved
・Syntax Highlighter for WordPress
・Crayon Syntax Highlighter
などなど。
ここに挙げたプラグインなら機能的にはどれも素晴らしいので、どれでも良いっちゃ良いんですが、SyntaxHighlighter Evolvedにした理由は、
・利用者が1番多い(1番人気)
・評価が2番目に高い
・対応言語が1番多い
・日本語対応
・デザインの設定が色々できる
・高速化されている(ソースコードの有無と言語の種類を判断し、必要なページでのみ必要なJavaスクリプトとCSSが読み込まれる)
という点からです。
ぐ、具体的な数値とかじゃなくてなんか申し訳ないですが・・・
Crayon Syntax Highlighterも評価が良いので迷ったのですが、どうも重くなってしまったという事を良く聞いたので、SyntaxHighlighter Evolvedを採用しました。
SyntaxHighlighter Evolved設定
インストール
普通のプラグインと同じで、プラグイン→新規追加→検索窓から「SyntaxHighlighter Evolved」→有効化です。
SyntaxとHighlighterの間にスペースがあって「Evolved」を入力していないとSyntaxHighlighter Evolvedは引っ掛かってこないのでご注意を。
有効化したら管理画面「設定」の中に「SyntaxHighlighter」が増えているので、こちらで設定していきましょう。
設定
「SyntaxHighlighterの設定」という画面で全て設定が行えます。
各項目の説明を。
SyntaxHighlighterの設定
ここで、デザインの大枠を設定します。
結構設定により見え方が変わるので、お好みで色々試してみたら良いかと思います。
SyntaxHighlighterのバージョン
バージョン 3.x
バージョン 2.x
プルダウンの下に記載してくれていますが、3の方が優れているという事でもなく、お好みです。
2はフラッシュベースの、コピーや印刷等のボタンが出ます。3はダブルクリックでコピーできます。
あとは、3は長いソースの際に横スクロールバーが出ますが、2は折り返します。
テーマ
Default
Django
Eclipse
Emacs
Fade to Grey
Midnight
RDark
[なし]
デザインテーマ。完全にお好みですが、パッと見れるようサンプルを。
Default
Django
Eclipse
Emacs
Fade to Grey
Midnight
RDark
[なし]
すべてのブラシを読み込む
ここも書いてくれていますが、速度的に速いのはチェック無しです。preタグを書きたい等よっぽどの理由が無い限りは外しておいてOKです。
規定の設定
ここは、各記事でショートコードに属性を書き込む事で変更できますが、デフォルトでの設定となります。
行番号を表示する
まんまです。コードボックス左側に行番号が入ります。あった方が見やすいですね。
ツールバーを表示する
・Version 3.x:コードボックス右上にクレジットリンクが付きます。
・Version 2.x:マウスホバー時、コードボックス右上にソース表示/コピー/印刷/クレジットのフラッシュのボタンが付きます。
自動リンクを有効にする
ソース内のURLに自動リンクを設定するかどうかの設定。お好みです。
コードボックスの表示を閉じておく
デフォルトでコードボックスを閉じておきますか？という設定。閉じておく場合はクリックで開きます。
軽い表示モードを使う
表示するのに軽さを追求するモード。行番号やツールバーが表示されなくなっちゃいます。
インデントタブを許容するスマートタブを使う
ソースコード内でタブを使いますかという設定です。
長い行を折り返す(v2.xのみ、横スクロールバーを無効にする)
横スクロールバーを使わず折り返します。3.xでは使えません。
追加のCSSのclass名(複数可能)
コードボックス内Divタグで、classを指定したCSSを記入します。
行番号の開始
行数の開始番号。通常1ですね。
行番号の余白
行番号の桁数です。
タブのサイズ
タブの長さです。
タイトル
コードボックス上部に表示されるテキストを設定できます。
設定は、以上です。
結構少なめですよね！
設定し終わったら、画面下の方にプレビューで現状を確認できますので、問題無ければ「変更を保存」をクリックしましょう。
使い方
ショートコードで、表示したいソースを挟むだけです♪とっても簡単！
[表記したい言語] ソースコード [/表記したい言語]
という形ですね。
サンプル
HTML
入力例：
[[html]
<meta charset=”UTF-8″>
[/html]]
表示：
[html]
<meta charset=”UTF-8″>
[/html]
CSS
入力例：
[[css]
.test {
background:#ccc;
}
[/css]]
表示：
[css]
.test {
background:#ccc;
}
[/css]
PHP
入力例：
[[php]
<div><?php wp_title(); ?></div>
[/php]]
表示：
[php]
<title><?php wp_title(); ?></title>
[/php]
注意点
ビジュアルエディタを使えない
ビジュアルエディタに切り替えると、ソースコードの一部が除去・変更されます・・・
ショートコードを書きたい時は
ソースコードを書く時に、こうするんだよ～って例を書きたいですよね。その際にショートコード自体を書く場合は、[を、2つ重ねます。
最後に
技術系ブログなどを書いている方は、こんなプラグインの説明などなくてもチャチャっと設定できる人がほとんどだと思うので、この記事はあまり役には立たないかもしれません。
が、自分の備忘録としてと、これから技術をつけていくのに知識をアウトプットしたいと考えている人のお役に立てればなと思い書いてみました。
誰かの役に立てたらいいなぁ。
