Jump into!: BloggerにおけるSyntaxHighlighterの使い方

~~(Google Chromeでトップページ表示に不具合がありますが、~~テーマのHTML編集不要の導入方法を新しく書きました。こちらをご参照ください。 2011/12/24)

Picasa Web Albumで作ったアルバムを一括して削除する機能が、Picasa Web AlbumおよびPicasaにはないんです。たくさんアルバムを作ったのは良いのですが消せずに困っていたので、スクリプトを書いて消しました。

備忘録代わりにそのスクリプトをBloggerに載せたのですが、以前からPythonのスクリプトをきれいに整形して載せる術はないものかと思っていました。これまでごまかしながらコードを載せてきましたので、きちんと調べようと思いました。

少し調べてみると、よく使われているフォーマッターはSyntaxHighlighter。以前はgoogle codeにホストしていたのですが、今はバージョンも2.X系に上がってホストサイトが変更になっています。またサイトが変更になったため、google codeがcssをtext/plainで返していたためにcssを直接参照できなかった問題が解決され、Syntax Hilighterの最新版をサイトから直接参照することができるようになっています。

このポストでは、そのSyntaxHighlighterのBloggerへの適用方法を書きます。

その適用方法はSyntaxHighlighterのページから紹介されているこのページで解説されていますが、日本語でざっくりまとめてみようと思います。

準備としてすることは一つ。SyntaxHighlighterのcssを読み込むことです。下記のコードをBloggerのLayoutテンプレートに挿入します。<head>と</head>の間に入れます。</head>の直前がいいでしょう。

<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/shBrushCpp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

挿入したコードには"shBrush***.js"というファイルを読み込む設定がたくさん存在します。"***"はBloggerに転載するコードの言語を意味しています。使用しない言語に該当する行はコメントアウトor削除します。

そして、コードを含む投稿をする際に、

<pre class='brush: ***'>
コードの内容(エスケープ済)
</pre>

もしくは

<script type='syntaxhighlighter' class='brush: ***'><![CDATA[
コードの内容(エスケープ不要)
]]></script>

のように記載します。"***"はコードの言語名を書きます。'python'や'html'などです。どの言語が使用できるかは、ココに列挙されています。Brush aliasesの値を指定します。

Jump into!

SyntaxHighlighter

2010/03/03

BloggerにおけるSyntaxHighlighterの使い方

3 件のコメント: