プログラミング系の技術系ブログを書く人は、ソースコードをブログ記事に載せる機会も多いと思います。
そこで、よく使われているのが『SyntaxHighlighter』（シンタックスハイライター）です。
この『SyntaxHighlighter』（シンタックスハイライター）は、ソースコードを行番号と共に色分けしてくれて
とてもソースコードを見やすく表示してくれます。
今回は、このブログでもお世話になっている『Blogger』への導入方法です。
導入方法はとても簡単で、まずは下記のサイトで必要なソースコードをジェネレートしましょう
syntax-highlighter-scripts-generator
http://www.way2blogging.org/widget-generators/syntax-highlighter-scripts-generator
『Select a Theme』では、色分けのテーマを選択する事が出来ます。
現在用意されているテーマは、
『Default』『Django』『Eclipse』『Emacs』『Fade To Grey』『Midnight』『RDark』
となっており、それぞれのスタイルは下記にて確認する事が出来ます。
http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/
『Select Brushes』では、実際に色分けさせたいコードの種類を選択します。
あまり欲張りすぎて沢山選択しすぎても、無駄なJavaScriptを読み込む事になるので
あまりオススメ出来ません。
必要になったら後から追加する事も可能ですので、始めのうちは必要最低限に留めましょう。
コードの選択を終えたら下部の『Generat』ボタンを押す事で、適用に必要なコードを取得する事が出来ます。
取得したコードは、Bloggerのテンプレート＞HTMLの編集で、</head>の直前に埋め込み、保存すれば事前準備は終了です。
後は記事を書く時に下記のコードをHTMLの編集で埋め込んで下さい。
実際に色分けしたいコードを記述 brush:の後には言語名を入れて下さい。タイトルが必要な時は title="タイトル"に記述して下さい。
『brush:』の後に言語名を入れる事で、言語に適した色分けで表示されるようになります。
ちなみに、現在選択中のテーマは『Emacs』です。
ギークな感じがたまらなく好きで気に入って使っています。
皆さんもコードを見やすく、そしてかっこよく表現して下さい。
Bloggerでの『SyntaxHighlighter』（シンタックスハイライター）導入手順でした。
Categories:
Blogger
