12サイトから厳選したソースコードのハイライトサイト
ソースコードをハイライト表示してくれる12サイトを調査し，以下2サイトがベストだとわかった。
- hlite.me: http://hilite.me/
- Generator for SyntaxHighlighter: http://drupa.jpn.org/SyntaxHighlighter-pre-Generator/
1 Introduction
普段ブログを載せるときはLibreOffice Writerでとっていた自分用のメモを整形して載せている。そのため，フォントや表などはWriterの書式が反映されている。ソースコード部分はフォントをMigu 1Mとし，背景を緑10という色に設定している。自分なりにこれはよいと思っている。しかし，背景色を設定したりすると，貼り付けるときに行頭の空白がなぜか無視される。
これは可読性が悪くなり，またPythonのようにインデントに特別な意味を持つ言語の表示では，掲載されているコードが正常に動作しなくなるため問題である。また，長いコードを書くときは構文を色で強調したほうがみやすい。
こういうことから，Writerでコードをシンタックスハイライトする方法を探した。いくつかよいアドオンをみつけた。しかし，それを試してもBloggerに貼り付けるときに行頭の空白が無視されてしまった。
自分でHTMLとかCSSを書くという手もあるのかもしれない。HTML+CSS+JavaScriptでやると，後で元のコードを見た時の視認性が悪い。そして面倒くさい。ローカル環境でのメモは，今のところWriterが使いやすいと思っている。そのため，Writerで有効なもの，つまりコピーペーストで構文強調後の色のついた結果をWriterやBloggerに貼り付けられるものがいい。HTMLコードだけあっても困る。
アドオンの利用を断念してWebサービスとしてSyntax Hilightをやってくれるものをいろいろ探した。Webサービスを使うと，Writerに貼り付ける時もいけるし，Bloggerに載せるときも有効だ。また，行番号をつけることもできてよい。
2 Result
調査したサイトは合計12サイトとなった。調査結果を以下の表にまとめた。評価は高い順からo^xの3段階とし，以下の点に注目した。
- 行番号： 行番号の表示に対応しているかどうか。
- 言語： 構文強調に対応している言語の量。
- UI： 素早く表示でき，使いやすいかどうか。
なお，評価の欄でxのついたサイトは何があっても使わないというような意味と思ってほしい。たとえば，以下のような理由からxをつけた。
- HTMLコードの出力にしか対応していない。
- UIがあまりにも使いにくい。
- 全体的な機能が乏しい。
表 2.1 シンタックスハイライトのWebサービス比較
サイト名
|
行番号
|
言語
|
UI
|
評価
|
URL
|
CodeColorizer
|
x
|
x
|
x
|
x
| |
CodeHTMLer
|
o
|
x
|
^
|
x
| |
Generator for SyntaxHighlighter
|
o
|
^
|
o
|
o
| |
Highlighter
|
x
|
x
|
x
|
x
| |
hilite.me
|
o
|
o
|
o
|
o
| |
Online syntax highlighter like TextMate
|
x
|
o
|
o
|
^
| |
Online syntax highlighting
|
x
|
o
|
o
|
^
| |
Quick Highlighter
|
o
|
o
|
x
|
x
| |
Syntax Highlight Tool For MS Word
|
x
|
^
|
o
|
^
| |
Syntax Highlighter
|
o
|
o
|
o
|
o
| |
SyntaxHighlight.in
|
o
|
^
|
^
|
^
| |
WiseSoft Online Syntax Highlighter Tool
|
o
|
x
|
^
|
x
|
3 Discussion
実際にこれらのサイトを試したところ以下の3サイトが特によいと思った。
- Syntax Highlighter
- hlite.me
- Generator for SyntaxHighlighter
さらに，普段の利用に耐えられるものとして以下の二つを選んだ。
- hlite.me
- Generator for SyntaxHighlighter
以下でこれら二つについて簡単に紹介する。変換結果の貼り付け後のサンプルとして以下のコードを試した。
## center of triangle
cx=[]; cy=[]
for tria in triangle.triangles:
cx.append(np.mean([x[i] for i in tria], dtype=np.float32))
cy.append(np.mean([y[i] for i in tria], dtype=np.float32))
3.1 hlite.me
hlite.meは，画面構成がシンプルであるが対応している言語の種類が多く，CSSのカスタマイズにも対応しているのがよかった。
サンプルの変換結果は以下となった。
## center of triangle cx=[]; cy=[] for tria in triangle.triangles: cx.append(np.mean([x[i] for i in tria], dtype=np.float32)) cy.append(np.mean([y[i] for i in tria], dtype=np.f
3.2 Generator for SyntaxHighlighter
Generator for SyntaxHighlighterは，まず表示速度が早くてよかった。一般的にシンタクスハイライトを行う場合は以下の2ステップを取ることがほとんどである。
- コードを入力
- 変換ボタンのクリック
このサイトでは，コードを入力すると自動的に変換結果を表示してくれる。そのため，変換ボタンのクリックと画面遷移を待つ必要がなく非常に快適に変換が可能となる。また，構文強調には人気のあるSyntaxHighlitherを使っている用で品質も高く安心して使える。欠点としては対応している言語がやや少ない点がある。例えば，FortranとかTeXのようなマイナー言語には未対応だ。
サンプルの変換結果は以下となった。
1
2
3
4
5
| ## center of trianglecx=[]; cy=[]for tria in triangle.triangles: cx.append(np.mean([x[i] for i in tria],dtype=np.float32)) cy.append(np.mean([y[i] for i in tria],dtype=np.float32)) |
4 Conclusion
これらのことから，以下のようにサイトを使い分けることにする。
普段使い： Generator for SyntaxHighlighter
その他マイナー言語： hlite.me
上記2サイトをとりあえずブラウザのお気に入りに登録した。これからは長いコードをメモしたりブログに載せるときは上記サイトでシンタクスハイライトを行ったものを掲載するようにする。
これら以外にもよいサイトがあればぜひ教えてほしい。
