コードを綺麗に貼り付けられるSyntax Highlighterですが、公式サイトを見ると2004年から発表されていたみたいで、結構長い歴史があるんですね。
中身はjavascriptで書かれたライブラリでそれを利用することで、キーワドに色を付けたり、整形しているタイプのコードハイライターです。
大雑把な使い方を説明すると、ライブラリを読み込み、指定された書式で書くだけです。
通常は、ライブラリを公式サイトからダウンロードしてきて(ダウンロードページ)、自分の利用するサーバにアップロード、それを呼び出すという手順だと思いますが、Bloggerではサーバにこの様なファイルをアップロードする事は出来ない様子。
どうするのかとSyntax Highlighterのサイトを見ると、ホスティングされたライブラリをリンクして読み込む形で、無料で利用出来るとの事です。
セットアップ
現在のバージョンは3.0.83なのでそれを元に書いてあります。バージョン2.xとはデザインや操作も少し変更されており、旧バージョンが必要という場合は(ファイルが残されているので)そちらを使うことも可能です。ライブラリの読み込み
基本的には本体のshCore.jsとshCore.css、テーマのcssファイルを読み込み、言語に対応したbrushファイルを読み込むだけです。用意されたbrushファイル全ての読み込みを羅列しても動作しますが、無駄な部分が多くなり表示速度的にも良くなさそうなので、Autoloaderを使い、使用するbrushファイルだけを動的に読み込みます。<link href= 'http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> <link href= 'http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type="text/javascript"></script>※ここでは、デフォルトテーマを読み込んでいます。
5行目でXML用のbrushファイルだけ先に読み込んでいる理由は、Autoloaderを用いても、HTMLと他言語の混在表示使用時(パラメータで設定)には前もって読み込んでおく必要があるからで、混在表示を利用しなければ不要です。
このコードを<head>タグ内に記述します。このブログ(Blogger)では直接”HTMLの編集”で書き加えました。
実行
<script language="javascript" type="text/javascript">
function path() {
var args = arguments, result = [];
for (var i = 0; i < args.length; i++)
result.push(args[i].replace('@', 'http://alexgorbatchev.com/pub/sh/current/scripts/'));
return result
};
SyntaxHighlighter.autoloader.apply(null, path(
'applescrip @shBrushAppleScript.js',
'actionscript3 as3 @shBrushAS3.js',
'bash shell @shBrushBash.js',
'coldfusion cf @shBrushColdFusion.js',
'cpp c @shBrushCpp.js',
'c# c-sharp csharp @shBrushCSharp.js',
'css @shBrushCss.js',
'delphi pascal @shBrushDelphi.js',
'diff patch pas @shBrushDiff.js',
'erl erlang @shBrushErlang.js',
'groovy @shBrushGroovy.js',
'java @shBrushJava.js',
'jfx javafx @shBrushJavaFX.js',
'js jscript javascript @shBrushJScript.js',
'perl pl @shBrushPerl.js',
'php @shBrushPhp.js',
'text plain @shBrushPlain.js',
'py python @shBrushPython.js',
'ruby rails ror rb @shBrushRuby.js',
'sass scss @shBrushSass.js',
'scala @shBrushScala.js',
'sql @shBrushSql.js',
'vb vbnet @shBrushVb.js',
'xml xhtml xslt html @shBrushXml.js'
));
SyntaxHighlighter.all();
</script>
公式サイトに書いてあるコードそのままです。
9行～34行がAutoloaderで、必要なbrushファイルを読み出しています。
2行～7行がファイルのパスを書き換える処理で、必要に応じて5行目のアドレス部分を変えるだけで、柔軟にファイルの場所を変更出来ます。
表示したいコード部分の読み込みが完了した後に、 Autoloaderでbrushファイルを読み込み、 36行目のSyntaxHighlighter.all();を実行することで、Syntax Highlighterが動作します。
表示したい部分が読み込まれていなければなりませんので、<head>タグ内に書いては駄目です。ページの下の方に配置するか、ページ表示完了のイベント時に実行するのが良いのでは無いでしょうか。BloggerならガジェットのHTML/JavaScriptを使用すると便利です。
コードの貼り付け
preタグ内に表示したいコードを貼り付けます。その他、scriptタグを使用しても貼り付ける事が出来るようです。<pre class="brush: c-sharp; toolbar: false" title="sample">
namespace Program
{
public class Program
{
static void Main(string[] args)
{
}
}
}
</pre>
ハイライトされている部分が、貼り付けたいコードの内容になります。ただし、どんなコードでもそのまま貼り付けられる訳では無く、使える文字の種類に制限があります。以下の表左の文字は右の文字列へエスケープして下さい。
| 制限される文字 | 代替文字 |
| < | < |
| > | > |
| & | & |
| " | " |
| ' | ' |
preタグのclass属性の中でbrush: に続いて言語を指定します。必須項目で以下の表の中から選びます。
| コードの言語 | brushに記述するエイリアス (複数あるものはどれでも可) |
使用するために必要なファイル |
| ActionScript3 | as3, actionscript3 | shBrushAS3.js |
| Bash/shell | bash, shell | shBrushBash.js |
| ColdFusion | cf, coldfusion | shBrushColdFusion.js |
| C# | c-sharp, csharp | shBrushCSharp.js |
| C++ | cpp, c | shBrushCpp.js |
| CSS | css | shBrushCss.js |
| Delphi | delphi, pas, pascal | shBrushDelphi.js |
| Diff | diff, patch | shBrushDiff.js |
| Erlang | erl, erlang | shBrushErlang.js |
| Groovy | groovy | shBrushGroovy.js |
| JavaScript | js, jscript, javascript | shBrushJScript.js |
| Java | java | shBrushJava.js |
| JavaFX | jfx, javafx | shBrushJavaFX.js |
| Perl | perl, pl | shBrushPerl.js |
| PHP | php | shBrushPhp.js |
| Plain Text | plain, text | shBrushPlain.js |
| PowerShell | ps, powershell | shBrushPowerShell.js |
| Python | py, python | shBrushPython.js |
| Ruby | rails, ror, ruby | shBrushRuby.js |
| Scala | scala | shBrushScala.js |
| SQL | sql | shBrushSql.js |
| Visual Basic | vb, vbnet | shBrushVb.js |
| XML | xml, xhtml, xslt, html, xhtml | shBrushXml.js |
言語の指定に続いてパラメータが指定できます。
上記のコードをhtmlに貼り付けると、以下の様な表示になります(デフォルトテーマ)。
この状態で使えない事も無いですが、不要な縦スクロールバー等、デザイン的に無駄な部分がある他、ブラウザのChromeにおいて、行表示に不具合がある事から、少しデザインをカスタマイズしたほうが良いかと思います。細かい設定等は次の記事で。