Google BloggerでSyntaxHighlighterを使いLuaスクリプトの強調表示をする
プログラムのコードをブログ等に載せるときにコードを見やすく表示したいと思いました。良く使われているのがSyntaxHighlighterというJavaスクリプトです。基本的な使い方はいろいろな方が紹介してくれていますので、私はBloggerブログでの使い方とLuaスクリプトを表示させる方法を書いておきます。
SyntaxHighlighterを使うにはこのサイトからJava ScriptをダウンロードしてそのJava Scriptを自分のブログの公開フォルダに置いておく必要があります。しかし、この方法はGoogle Bloggerでは使えません。Google Bloggerではブログサイトにファイルを置いておく事が出来ないからです。用意されたテンプレートの改変かブログ投稿ページからの投稿しかできないのです。
それではSyntaxHighlighterが使えないかというとそんな事はありません。必要なJava ScriptとCSSを別のhttpで呼べる公開サイトに置いておき、そこのJava ScriptをBloggerブログから呼び出せばよいのです。無料の公開ストレージもたくさんありますよね。
しかしそんな公開場所を作らなくともSyntaxHighlighterの作者Alex Gorbatchev様はすでに必要なコードを公開してくれています。SyntaxHighlighterのページの右下の方にhostingというリンクがあります。そこをクリックするとMr.Alexがホストするサービスへのリンク方法が書かれています。
今まで公開された旧いバージョンも利用することができます。
コードを強調表示させる文字の種類を定義しているファイルをbrushと呼んでいるようです。そして、ご自身のブログで表示させたいソースコードのプログラム言語に合ったbrushを呼び出さないととんちんかんな強調表示になってしまいます。そしてbrushはプログラム言語毎にJava Scriptのソースファイルとして用意されています。
brushを選んでhostingサービスのコードを呼び出すスクリプトを簡単に作れるページがあります。Syntax Highlighter Scripts Generatorです。ここで自分が載せるソースコードの言語を選んで"Generate"ボタンを押せば必要なソースコードが表示されます。
いろいろな言語を表示させるという方はすべてのbrushを読み込むように設定する事になります。しかし、あなたのページが表示される度に全てのbrushが読み込まれるようになると、あなたのページの表示速度が低下してしまいます。そして、Mr.Alexの提供するホストにも無用な負荷をかけてしまいます。
バージョン3を使うと必要なbrushを自動的に読み込むようにもできます。SyntaxHighlighterのページの右上の方に"autoloader"というリンクがあります。ここにやり方が書いてあります。ここのコードのままではホスティングサービスを使うようになっていません。8行目の'/pub/sh/current/scripts/'を変更しましょう。とはいえ私は使っていないので・・・未検証です。
後はこのSyntaxHighlighterを動かすコードをGoogle Bloggerブログのどこに置けばよいか、という事になります。普通はヘッダー部分<HEAD></HEAD>の間に置く事になります。Google BloggerではテンプレートのHTML編集で行います。
しかし、テンプレートに動的テンプレートを選んでいる方はうまく表示されないでしょう。動的テンプレートではヘッダーやフッターは一番初め表示されたときに読み込まれ動きます。ブログ記事個々を表示する時にはブログ記事のみが読み込まれヘッダーやフッターは読み込まれません。無駄な通信を減らしている訳です。
このため、SyntaxHighlighterで表示させたいコードを書いたブログ記事が表示された時にはヘッダーに置いたJava Scriptは動かず強調表示されないでしょう。回避するにはブログ記事の最後にSyntaxHighlighterを動かすコードを書けば良いはずです。
ヘッダーやフッターに置いておくとautoloaderを使っても無駄にCSSファイルを呼び出してしまいます。また動的なテンプレートを今後使うかもしれません。そこで私はブログ記事の最後にSyntaxHighlighterのコードを記事毎に書く事にしました。
さて以上でSyntaxHighlighterがデフォルトで持っている言語の強調表示ができました。でもちょっとマイナーな言語を使っている方はbrushを自分で作る必要があります。
あるいはbrushを作って公開してくれる方を探す必要があります。
brushファイルもJavaScriptなのでわざわざ別のスクリプトファイルにする必要はありません。べたに自分のブログに書いておくのもありです。
Luaスクリプトを例にやってみましょう。
いろいろなBrushをまとめてくれているブログにMr.Abel BraaksmaのAll Syntax Highlighter 2.0 brushes collected, described and downloadableがあります。ここでLua用のbrushがあります。ブログサイトから直接コードを呼ぶ方法は遠慮してコードを自分のブログ記事にコピぺしJavaScriptとして設置します。
SyntaxHighlighterを使うにはこのサイトからJava ScriptをダウンロードしてそのJava Scriptを自分のブログの公開フォルダに置いておく必要があります。しかし、この方法はGoogle Bloggerでは使えません。Google Bloggerではブログサイトにファイルを置いておく事が出来ないからです。用意されたテンプレートの改変かブログ投稿ページからの投稿しかできないのです。
それではSyntaxHighlighterが使えないかというとそんな事はありません。必要なJava ScriptとCSSを別のhttpで呼べる公開サイトに置いておき、そこのJava ScriptをBloggerブログから呼び出せばよいのです。無料の公開ストレージもたくさんありますよね。
しかしそんな公開場所を作らなくともSyntaxHighlighterの作者Alex Gorbatchev様はすでに必要なコードを公開してくれています。SyntaxHighlighterのページの右下の方にhostingというリンクがあります。そこをクリックするとMr.Alexがホストするサービスへのリンク方法が書かれています。
今まで公開された旧いバージョンも利用することができます。
コードを強調表示させる文字の種類を定義しているファイルをbrushと呼んでいるようです。そして、ご自身のブログで表示させたいソースコードのプログラム言語に合ったbrushを呼び出さないととんちんかんな強調表示になってしまいます。そしてbrushはプログラム言語毎にJava Scriptのソースファイルとして用意されています。
brushを選んでhostingサービスのコードを呼び出すスクリプトを簡単に作れるページがあります。Syntax Highlighter Scripts Generatorです。ここで自分が載せるソースコードの言語を選んで"Generate"ボタンを押せば必要なソースコードが表示されます。
いろいろな言語を表示させるという方はすべてのbrushを読み込むように設定する事になります。しかし、あなたのページが表示される度に全てのbrushが読み込まれるようになると、あなたのページの表示速度が低下してしまいます。そして、Mr.Alexの提供するホストにも無用な負荷をかけてしまいます。
バージョン3を使うと必要なbrushを自動的に読み込むようにもできます。SyntaxHighlighterのページの右上の方に"autoloader"というリンクがあります。ここにやり方が書いてあります。ここのコードのままではホスティングサービスを使うようになっていません。8行目の'/pub/sh/current/scripts/'を変更しましょう。とはいえ私は使っていないので・・・未検証です。
後はこのSyntaxHighlighterを動かすコードをGoogle Bloggerブログのどこに置けばよいか、という事になります。普通はヘッダー部分<HEAD></HEAD>の間に置く事になります。Google BloggerではテンプレートのHTML編集で行います。
しかし、テンプレートに動的テンプレートを選んでいる方はうまく表示されないでしょう。動的テンプレートではヘッダーやフッターは一番初め表示されたときに読み込まれ動きます。ブログ記事個々を表示する時にはブログ記事のみが読み込まれヘッダーやフッターは読み込まれません。無駄な通信を減らしている訳です。
このため、SyntaxHighlighterで表示させたいコードを書いたブログ記事が表示された時にはヘッダーに置いたJava Scriptは動かず強調表示されないでしょう。回避するにはブログ記事の最後にSyntaxHighlighterを動かすコードを書けば良いはずです。
<script language="javascript" type="text/javascript"> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all(); </script>この部分がSyntaxHighlighterを動かすコマンドです。とはいえ私は使っていないので・・・未検証です。
ヘッダーやフッターに置いておくとautoloaderを使っても無駄にCSSファイルを呼び出してしまいます。また動的なテンプレートを今後使うかもしれません。そこで私はブログ記事の最後にSyntaxHighlighterのコードを記事毎に書く事にしました。
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"></link> <link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css" rel="stylesheet" type="text/css"></link> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all(); </script>とブログ記事の最後に書いておくとJavaScriptの強調表示ができます。brushの呼び出し部分を変えれば他の言語の強調表示ができます。欠点として記事の下に無駄な改行が入ってしまいます。
さて以上でSyntaxHighlighterがデフォルトで持っている言語の強調表示ができました。でもちょっとマイナーな言語を使っている方はbrushを自分で作る必要があります。
あるいはbrushを作って公開してくれる方を探す必要があります。
brushファイルもJavaScriptなのでわざわざ別のスクリプトファイルにする必要はありません。べたに自分のブログに書いておくのもありです。
Luaスクリプトを例にやってみましょう。
いろいろなBrushをまとめてくれているブログにMr.Abel BraaksmaのAll Syntax Highlighter 2.0 brushes collected, described and downloadableがあります。ここでLua用のbrushがあります。ブログサイトから直接コードを呼ぶ方法は遠慮してコードを自分のブログ記事にコピぺしJavaScriptとして設置します。
<script language="javascript" type="text/javascript">
//<![CDATA[
SyntaxHighlighter.brushes.Lua = function() {
var keywords = 'break do end else elseif function if local nil not or repeat return and then until while this';
var funcs = 'math\\.\\w+ string\\.\\w+ os\\.\\w+ debug\\.\\w+ io\\.\\w+ error fopen dofile coroutine\\.\\w+ arg getmetatable ipairs loadfile loadlib loadstring longjmp print rawget rawset seek setmetatable assert tonumber tostring';
this.regexList = [ { regex: new RegExp('--\\[\\[[\\s\\S]*\\]\\]--', 'gm'), css: 'comments' },
{ regex: new RegExp('--[^\\[]{2}.*$', 'gm'), css: 'comments' }, // one line comments
{ regex: SyntaxHighlighter.regexLib.doubleQuotedString, css: 'string' }, // strings
{ regex: SyntaxHighlighter.regexLib.singleQuotedString, css: 'string' }, // strings
{ regex: new RegExp(this.getKeywords(keywords), 'gm'), css: 'keyword' }, // keyword
{ regex: new RegExp(this.getKeywords(funcs), 'gm'), css: 'func' }, // functions
];
}
SyntaxHighlighter.brushes.Lua.prototype = new SyntaxHighlighter.Highlighter();
SyntaxHighlighter.brushes.Lua.aliases = ['lua'];
//]]>
</script>
3行目から15行目がコピペした部分になります。コピーしたコードに適当に改行を入れないと動きませんでした。これをbrushファイルを呼び出す部分に置いておけば良いのです。 Luaスクリプトが強調表示されると以下の様になります。 --JPEG
if minfo.General.Format == "JPEG" then
return MimeTypeString["JPEG"]
end
--WAVE
if minfo.General.Format == "Wave" or minfo.General.Format == "Windows Media"then
local t = {}
t.name = ">>>"..fileu.ExtractFileName(fname)
t.mime = MimeTypeString["MPEG Audio"]
t.command = [[./ffmpeg/ffmpeg.exe $_cmd_seek_ffmpeg_$ -i "$_in_$" -vn -acodec mp3 -ac 2 -ar 48000 -ab 192k -f mp3 -y "$_out_$"]]
return t, "/ "..fileu.ExtractFileName(fname)
end
まとめるとこのブログ記事の一番最後に以下のJavaScriptを書いておくとJavaScriptとLuaの強調表示ができます。 <link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"></link><link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css" rel="stylesheet" type="text/css"></link><script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script><script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"></script><script language="javascript" type="text/javascript">
//<![CDATA[
SyntaxHighlighter.brushes.Lua = function() {
var keywords = 'break do end else elseif function if local nil not or repeat return and then until while this';
var funcs = 'math\\.\\w+ string\\.\\w+ os\\.\\w+ debug\\.\\w+ io\\.\\w+ error fopen dofile coroutine\\.\\w+ arg getmetatable ipairs loadfile loadlib loadstring longjmp print rawget rawset seek setmetatable assert tonumber tostring';
this.regexList = [
{ regex: new RegExp('--\\[\\[[\\s\\S]*\\]\\]--', 'gm'), css: 'comments' },
{ regex: new RegExp('--[^\\[]{2}.*$', 'gm'), css: 'comments' }, // one line comments
{ regex: SyntaxHighlighter.regexLib.doubleQuotedString, css: 'string' }, // strings
{ regex: SyntaxHighlighter.regexLib.singleQuotedString, css: 'string' }, // strings
{ regex: new RegExp(this.getKeywords(keywords), 'gm'), css: 'keyword' }, // keyword
{ regex: new RegExp(this.getKeywords(funcs), 'gm'), css: 'func' }, // functions
];
}
SyntaxHighlighter.brushes.Lua.prototype = new SyntaxHighlighter.Highlighter();
SyntaxHighlighter.brushes.Lua.aliases = ['lua'];
//]]>
</script><script language="javascript" type="text/javascript">
//<![CDATA[
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
//]]>
</script>※2013/02/08追記 CDATAセクションで囲いました。
コメント
コメントを投稿