Bloggerに移籍して、まぁまぁせっかくだから格好いい見た目にしようじぇねえか。と、いろいろ思慮してきた僕ですが、昔からブログの表記方法で知りたかったことがあります。
それは、
「ソースコードをかっちょよく表示したい！」
ということです。いろいろ調べてみたところ、SyntaxHighlighterというサービスが良さそうだということがわかりました。

ブログにソースコードをかっこよく表示したい

ブログにHTMLやCSSのソースコードを書くとき、左のイメージのように格好よく表記をしたいなぁと常々思っていました。が、方法がわかりませんでした...

Google先生にいろいろ聞いてみたところ、どうやらSyntaxHighlighterというサービスが良さそうだぞということがわかり、早速導入してみた次第です。

導入した結果ですが、「背景を自由に変えたい」など要望もありますが、概ね満足しています！
導入してみて気づいたのですが、結構いろいろなブログで採用されていますね。やっぱりお手軽に導入できるのが決め手なのでしょうか。

1．SyntaxHighlighterを導入してみよう

SyntaxHighlighterとは、ソースコードをハイライト表示させることができるサービス（意味あってる？）です。ブログのソースコードを、No付きで見やすくまとめてくれます。

導入にあたっては、下記サイトを参考にさせていただきました。ありがとうございました！
・Syntax Highlighter（暇つぶし）
・ソースコードをハイライトするSyntaxHighlighter3.0を使いこなす（DevAchieve）
・【FC2】SyntaxHighlighter 3.0.83 導入編 -1-（46web android root アンドロイドの備忘録）

1.1．まずはSyntax Highlighter(v3)にアクセス！

何はともあれ、Syntax Highlighter導入のために下記サイトにアクセスです！簡単に設定用のHTMLコードが発行できますよ。

・HOW TO ADD SYNTAX HIGHLIGHTER(V3) TO BLOGGER BLOGS

1.2．テンプレートが選択できる

ソースコード表記のデザインテンプレートを、8種類から選択できます。

オーソドックスなデザインの「Default」

シックなデザインの「Dark」

ライク・ア・マトリックス「Django」

「Demo for Themes Here」から、テンプレートを確認できますよ。僕はシンプルなデザインがよかったので「Eclips」を選びました。

1.3．対象となる言語を選択

どの言語を表記対象とするかを選択できます。ご自分のブログでどの言語を表記する可能性があるか考えて選択すると良いと思います。

選択もれがあっても、後からまた追加して設定しなおすことができるので安心です。
ここでは試しに、"Xml, xHtml, xslt, Html"を選択してみます。選択し終えたらGenerate」をクリック！

1.4．表示されるコードをブログに貼り付け

「Generate」のボタンを押すと表示されるコードを、BloggerのHTMLに貼り付けます。画面に表示される「Copy To ClipBoard」をクリックすると、クリップボードにコードがコピーされます。

Bloggerの管理画面左メニューから「テンプレート＞HTMLの編集」を選択、</head>の直前に先ほどコピーしたコードを貼り付けます。

以上で設定が完了しました！

2．ソースコードを表示する場合の注意点

Syntax Highlighterでソースコードを表示する場合、いくつか注意点があります。まず、表示させるには「preタグを使う」ということ、そして「特定の記号は変換して記載する」ことです。少し詳しく記載しておきます。

2.1．preタグを使う

Syntax Highlighterでソースコードを表示するには、preタグを使う必要があります。こんな感じです。

<pre class="brush: html;">コード</pre>

上記のコードの部分に、表示したいコードを記載します。ちなみに、表示したい言語によって"brush:"のあとの表記を変更します。cssであれば、pre class="brush: css;"となります。

おっと、注意点はもうひとつありますよ。

2.2．特定の記号は変換して記載する

preタグの中に記載するコードについては、"<"と">"の記号を変換する必要があります。

"<"　→　"<"
">"　→　">"

上記のように変換して記載します。ちょっと面倒ですよね...

この面倒な変換をボタンひとつで実施してくれる夢の様なツールがクリボウのBlogger Tipsさんの記事で掲載されていました！正にWebド素人の僕のためのようなサイトです、本当にありがとうございます！！
・コードをハイライトする「Blogger Syntax Highlighter」ウィジェット（クリボウのBlogger Tips）

これで誰でもあっという間にSyntax Highlighterで使えるコードが作れます！

今日のあしあと

「Syntax Highlighterのコードは</head>の直前に配置」

これだけ覚えておけば、あとはなんとかなるでしょう。今回は（今回も）先人たちのブログに本当に助けていただきました。
そのうえで、僕が実際にSyntax Highlighterを導入してみてわかりづらかった部分をより丁寧に残してみました。

これからブログにソースコードをかっちょよく表示したい方、お役に立てれば嬉しいです！

2012-04-10

Bloggerをはじめて苦労した話２｜Syntax Highlighterをつかって、ソースコードをかっこよく表示したい！