WordPressプラグイン「Syntax Highlighter」も外せそうなので外してみた

WordPress

jQuery

2012/02/27

WordPressプラグイン「Syntax Highlighter」も外せそうなので外してみた

Syntax Highlighter、お前もか
どうも@knk_nです。
ブログの毛色が変わってきたようで、ちょっと困った。今はいいけどちゃんとiPhone系の記事も書きたい。
まぁここ最近の改造記事はほぼ自分用のまとめだから許して欲しいような。
マネなり参考なりはご自由に。
そして今回はまたプラグインをひとつ削ってやったぞという話。

コードをハイライトしてくれる「Syntax Highlighter」

特にここ最近のWordPress記事で大活躍中の「Syntax Highlighter」

こういうやつですね。
ブログにコードを埋め込むときは、それなりに見やすく表示したい。
昔いろいろ調べたところ「Syntax Highlighter」というのがいいらしい。（日頃お世話になるブログなどでも利用されている）
WordPressにはプラグインがあったのでそれを使っていました。

WordPress › Syntax Highlighter for WordPress « WordPress Plugins

このプラグインは

[html]
<a href="http://knk-n.com">けんけん.com</a>
[/html]

と記述すると、

<a href="http://knk-n.com">けんけん.com</a>

という風に指定した言語に合わせてイイ感じにコードを目立たせてくれます。
これも大変お世話になっていたプラグインのひとつだったのですが、テーマ自作によって余分なコードが減ったので、「今ならいける！」と思い、今回プラグインに頼らずに「Syntax Highlighter」を導入してみました。

「Syntax Highlighter」をプラグインを使わずに導入する

SyntaxHighlighterとWordPress用プラグイン | モノについてのモノ語り

【FC2】SyntaxHighlighter 3.0.83 導入編 -1-｜46web android root（アンドロイド）の備忘録

これらのサイトがとっても役に立ちました。

1. ファイルをダウンロード

SyntaxHighlighter – Download

まず本家様のサイトからファイルをダウンロードします。最新版なのでバージョンは「3.0.83」
開くといろいろなファイルが入っててわけわからなくなりそうなのですが、必要なのは「styles」と「scripts」のフォルダ内のファイルだけです。
「scripts」のファイルは使う言語のファイルだけでいいです。
また、「styles」内のファイルは「Syntax Highlighter」のCSSなので、「shCore.css」と使いたいCSSファイルの二つだけ使うことになります。

2. ファイルをアップロード

サーバに必要なファイルをアップロードします。私はテーマ改造中ということもありテーマ内にアップロード。
「scripts」フォルダの中身がjsファイルだったのでを「syntax-highlighter」と名前を変えて「js」フォルダ内にアップロード。
CSSファイルはとりあえず「styles」フォルダのままアップロードしました。

3. ヘッダ or フッタにコードを追加する

まずはヘッダの<head>〜</head>内に以下のコードを追加します。アップロードしたファイルの場所に合わせてhrefの中身を修正してください。

<link href="<?php bloginfo('template_directory');?>/styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="<?php bloginfo('template_directory');?>/styles/shCoreEclipse.css" rel="stylesheet" type="text/css" />

次にフッタに以下のコードを追加します。調べたところヘッダに書いてうまくいく場合とフッタに書いてうまくいく場合があるようで。
私はフッタに書いてうまくいきました。
アップロードしたファイルの場所に合わせて<?php bloginfo('template_directory');?>以下の中身を修正してください。

<script type="text/javascript" src="<?php bloginfo('template_directory');?>/js/syntax-highlighter/shCore.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory');?>/js/syntax-highlighter/shBrushXml.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory');?>/js/syntax-highlighter/shAutoloader.js"></script>

<script type="text/javascript">
SyntaxHighlighter.autoloader(
    "applescript            <?php bloginfo('template_directory');?>/js/syntax-highlighter/shBrushAppleScript.js"
    ,"bash shell            <?php bloginfo('template_directory');?>/js/syntax-highlighter/shBrushBash.js"
    ,"css                   <?php bloginfo('template_directory');?>/js/syntax-highlighter/shBrushCss.js"
    ,"java                  <?php bloginfo('template_directory');?>/js/syntax-highlighter/shBrushJava.js"
    ,"js jscript javascript <?php bloginfo('template_directory');?>/js/syntax-highlighter/shBrushJScript.js"
    ,"perl pl               <?php bloginfo('template_directory');?>/js/syntax-highlighter/shBrushPerl.js"
    ,"php                   <?php bloginfo('template_directory');?>/js/syntax-highlighter/shBrushPhp.js"
    ,"plain text            <?php bloginfo('template_directory');?>/js/syntax-highlighter/shBrushPlain.js"
    ,"py python             <?php bloginfo('template_directory');?>/js/syntax-highlighter/shBrushPython.js"
    ,"xml xhtml xslt html   <?php bloginfo('template_directory');?>/js/syntax-highlighter/shBrushXml.js"
);
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.defaults['auto-links'] = false;
SyntaxHighlighter.all();
</script>

私は使うファイルのみにしているのでそれ以外のコードは削ってあります。
これ以外の言語を使う方は最初に紹介したページに載っているので参照してください。

SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.defaults['auto-links'] = false;

というのは、それぞれ「現バージョンでは？しか表示していないツールバーを表示しない」、「コード内に出てくるリンクをクリックしてもそのページに飛ばないように」という意味です。
通常ONになっているのでOFFにしました。

4. preタグでコードハイライト

実際の使い方は上で書いたコード内の言語を加えたpreタグでコードを囲みます。
ちなみにpreタグ内はhtmlでよくある「<」や「&」といった特殊文字は使えません。それぞれ「<」、「&」と書かないとダメです。
プラグインではそのままの形でもでもうまくいってたのですが今度はそうはイカないようで。
もちろん変換が激しくメンドウなので変換ツールを使っております。

preタグ・メーカー

例えば、

<a href="http://knk-n.com">けんけん.com</a>

というコードを埋め込みたい場合、コードをタグ・メーカーで変換して

<pre class="brush: xml; gutter: false;">
&lt;a href=&quot;http://knk-n.com&quot;&gt;けんけん.com&lt;/a&gt;
</pre>

のようにpreタグで囲んで書くと、

<a href="http://knk-n.com">けんけん.com</a>

のようにハイライトされます。どうだい見やすいダロウ。
オプションで「first-line: 5」と書くと、先頭が5行目という行番号表示になったり、「gutter: false」と書くと行番号を非表示にできたり、なかなか多機能です。

SyntaxHighlighterでの行番号の指定、およびハイライトの設定方法 | Sabakura Blog

テーマも選べる

第2のメモ代わり　 Syntax Highlighterのテーマの種類

このページに全テーマのスクショが載ってたのでひと通り見たところ「shCoreEclipse」が一番良い意味で地味だったので決定しました。
個人的に「shThemeFadeToGreys」もカッコイイなと思ったのですが白っぽいテーマに黒だとちょっと目立ち過ぎかなと…
デフォルトはサイドの緑がちょっと眩しいので、一番無難な「shCoreEclipse」に落ち着きました。
好みでテーマが選べるのも面白いですね。

また、現バージョンの「Syntax Highlighter」はコードが横にはみ出ても、スクロールバーで見ることができたり、コードをダブルクリックすると全選択されコピペが簡単にできるなどなかなか使いやすいです。

おわりに

当ブログはたまにコードをブログ内に埋め込んだりしているので早くからプラグインを入れてあれこれしていましたが、今回プラグインなしでもできるようになりました。
ただ記述方法が若干変わったため今までの記事を見返して必要な部分を全部書き換えました。けっこうメンドウでした。
PCとiPhoneでテーマが分かれているので同じものを二回書くのはメンドウですが、iPhoneは無かったら無かったでコードがはみ出てレイアウトがおかしくなるという問題も何度も経験しているので入れておきました。
ほとんどPC用です。
今回の記事でも大活躍してくれました。コード埋め込みが多い方は検討してみてもいいですよ！
この一日二日でプラグインが2コも減りました。頑張れば意外とプラグインは減らせる！！