今日のPython: ブログ上でプログラムソースを表示する方法①

ソースコードをHTMLに変換するサービスを始めました。「インラインＣＳＳ」をチェックするとコード量が多くなりますが、特別な設定なしでコードをブログ等に表示することが可能になります。宜しかったら、ご利用ください。

　→ 　　syntax2html 　（最初の画面表示までに時間が掛かる場合があります）

番外編ですが、ブログ上でプログラムソースを表示する設定について書きます。

いろいろなサイトを見ていると、キレイにプログラムソースを表示しているサイトが目に付く。調べたところ、幾つかの方法があるようだ。（参考「MA-CREATORS」さんのサイト）

お手軽そうなJavaScriptを利用する方法でも、いろいろなライブラリーが提供されており良く分からない。ここはメジャーなライブラリーと思われる SyntaxHighlighter を使って設定してみようと思う。
しかしSyntaxHighlighterを使う場合でも、いろいろな方法があるようだ。今回はシンプルに、ブログサイトだけで設定完了可能な方法を使いたいと思う。

SyntaxHighlighterのダウンロード
次のリンクからダウンロードを行い、ダウンロードしたZIPファイルの解凍も行う。
（最新は ver3.0.83）

SyntaxHighlighterダウンロード
必要なSyntaxHighlighterのファイルのアップロード

コアファイル（SyntaxHighlighterのscriptsフォルダーに存在）
```
shCore.js
shAutoloader.js
```
各言語ファイル（scriptsフォルダー）
```
shBrushPlain.js
shBrushCss.js
shBrushXml.js
shBrushPython.js
shBrushJScript.js
```
CSSファイル（stylesフォルダー）
```
shCoreDefault.css
```
各言語ファイルは必要なものだけアップロードすればよい。私は
- plain
- CSS
- XML
- Python
- JavaScript
といった言語だけが必要なので、shBrushの後に該当する言語名が付いたファイルをアップロードする。

アップロードは、seesaaの「記事投稿」→「ファイルマネージャー」を使用する。

アップロード・ディレクトリは後述するHTML修正箇所と合わせる必要がある。今回は、syntaxを使用する。

HTMLの修正

seesaaの「デザイン」→「HTML」からHTML管理画面を開く。
「HTMLの追加」をクリックし、下のコードを</body>ダグの直前に追加する。
```

<script type="text/javascript" src="http://todayspython.up.seesaa.net/syntax/shCore.js"></script>
<script type="text/javascript"  src="http://todayspython.up.seesaa.net/syntax/shAutoloader.js"></script>
<script type="text/javascript" src="http://todayspython.up.seesaa.net/syntax/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="http://todayspython.up.seesaa.net/syntax/shCoreDefault.css"/>
  
<script type="text/javascript"> 
function path() 
{ 
 var args = arguments, 
     result = []
     ; 
 for(var i = 0; i < args.length; i++) 
     result.push(args[i].replace('@', 'http://todayspython.up.seesaa.net/syntax/')); 
 return result 
}; 
  
SyntaxHighlighter.autoloader.apply(null, path( 
      "plain text               @shBrushPlain.js"
     ,"css                      @shBrushCss.js"
     ,"py python                @shBrushPython.js"
     ,"js jscript javascript    @shBrushJScript.js"
)); 
  
SyntaxHighlighter.defaults['auto-links'] = false;
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.all();
</script>

```
HTMLでは以下のファイルを読み込むよう指定している。
```
shCore.js
shAutoloader.js
shBrushXml.js
shCoreDefault.css
```
各言語ファイルは必要時に自動的に読み込まれるように設定している（強調表示部分）。このため、SyntaxHighlighter.autoloader.apply(null, path()) に自動読み込みが必要なBrush aliasesとファイル名を次のように記述する（スペースで区切る、先頭列以外はコンマを列頭に付ける）。

alias1 alias2 alias3 @ファイル名

ファイル名の頭の＠マークは、読み込み時にファイルの位置するURLに変換されるため付ける必要がある。
shBrushXml.jsだけは後述するhtml-scriptオプションの関係もあり、自動読み込みを使わず最初に読み込んでしまう方が良い。

この他、SyntaxHighlighter.defaults 記述ではオプションのデフォルト値を変更している。

SyntaxHighlighter.defaults['auto-links'] = false;
　　URLがあった場合Linkを自動で設定しないように変更

SyntaxHighlighter.defaults['toolbar'] = false;
　　ツールバー（小さいクエッションマーク）を表示しないように変更

http://todayspython.up.seesaa.net/syntax/ と書いてある部分は環境に合わせて変更して欲しい。

HTMLの修正が完了したら保存する。その後変更したHTMLを適用する。

以上で SyntaxHighlighter の設定は完了する。使い方は次回の記事で紹介したい。

なお本家サイトにはホスティング・サービスの説明がある。ホスティングを利用すれば必要なファイルをブログサイトにアップロードする手間が省けて、もっと簡単にSyntaxHighlighterが利用できる。サービスの永続性はわからないが、興味あれば利用してみるのも良いと思う。

この記事を書くのに参考にしたサイト
MA-CREATORS
しがないプログラマの備考録。
現役ゲームプログラマーが綴る、わりとどうでもいい話。
Linux愛好者の独り言
blog.remora.cx
andonkun's note
ホームページ　作成、運営、管理ガイド
開発元サイト

ページ

2010年10月9日土曜日

ブログ上でプログラムソースを表示する方法①