コードにハイライト設定をする

今後このブログには技術的なことも掲載していこうと思っている。プログラマにとってはながながと説明されるよりも、コードが書かれている方が分かりやすいこともある。なのでコードにハイライト設定ができるようにしてみた。

今回使用したのはSyntaxHighlighterだ。ウェブページによるとApacheやFacebookなんかもこれを使用している。が、これを簡単に使えるようにしてくれるサイトがある。Syntax Highlighter Scripts Generatorだ。これはSyntax Highlighterで使用できるテーマ、ブラシを選択すると、それに対応するスクリプトを作成してくれるいいやつである。

ちなみにテーマはDefault,Emacs,Eclipseなど8つのテーマがある。自分のお気に入りのテーマを選択して、次にハイライト処理したいブラシを選ぶ。ブラシはActionScrip3からXmlまで23個選べる。Objective-Cがないのが気になるのだが...

まず試しにテーマ：Default　ブラシ：C#

でスクリプトを作成。色がうすいのでアクティブになっているのか分からないが、Generateボタンを押す。

すると

<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/shBrushCSharp.js' type='text/javascript'></script>
<script language="javascript" type="text/javascript">
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
</script>

こんなスクリプトが生成される。このスクリプトをコピーして先頭にペーストする。Bloggerだったら作成モードでなくHTMLモードにして、ペーストする。

そして、Htmlには

<pre class="brush:c-sharp">


ここにこんな感じでコードを書く。
class NewClass
{
   public void doProcess()
   {
   }
}


</pre>

すると

class NewClass
{
   public void doProcess()
   {
   }
}

ハイライト処理がされているのがわかります。他のブラシを使いたいのであれば、shBrushCSharp.jsを変更。

あと同じく<pre class="brush:c-sharp">を変更。

これで他のブラシが使える。

ブラシの一覧があるので使いたいものを選べばいい。

このSyntax Highlighterはバージョン3系では折り返し処理ができなかったり、バージョン2系とは動きは違うらしい。みんな細かいところは自分で修正して使っているようだ。とりあえず今回はこれでよしとして、使っているうちに不満が出てくるだろうから、そのとき対応する。

多分。