Bloggerでソースコードを表示する方法

日本では知名度がいまいちなBloggerですが、私はGoogleのあえて完璧に洗練させない主義(褒めています！　でもNexus6は出来過ぎた子なので使わないかもしれません笑)が好きなので、とりあえず彼らのサービスを良く使っております。Bloggerはわりと何でもできるので、これから日本でも少しずつユーザが増えていくかもしれませんね。

 そんなBloggerですが、いじれる所が多くてけっこうわかりづらい。。。トップにページを固定するのもややこしかったりして、さすがにWordpressの代わりにはなりそうもないというのが率直な印象。でもデザインとかはけっこう凝れる方だと思いますよ。

 さて、そんなちょっと尖ったブログサービスのBloggerですが、ソースコードをハイライトするにもひと手間必要でした。以下、参考にさせて頂いたサイト様です。

  DevAchieve-BloggerにソースコードをハイライトするSyntaxHighlighterを導入する-

  Pirates of 富山湾-Bloggerにソースコードをきれいに載せる「SyntaxHighlighter」-

 細かい設定などは、先人の遺産を参照ください。 以下、大まかな流れだけ備忘録。

 １．ここに飛んで、必要な言語をチェック。それからGenerateをぽちっと押します。

 ２．できたソースをコピペして、bloggerの次の階層に貼り付けます。
 ダッシュボード→”テンプレート”→”HTMLの編集”→headタグ内のお好きな場所に。

 色々と編集されている方もおられるので、チェックしてみてくださいね！

 お次はCSSを編集する場合です。
こちらでCSSファイルが入手できますので、それを編集することになります。編集方法はDevAchieve様のサイトがお詳しいです。

 ３．次の改装に、編集したCSSを貼り付けます。

 ダッシュボード→”テンプレート”→”カスタマイズ”→上級者向け→CSSを追加
 あとはpreタグなんかを使ってブログに埋め込むと以下のように上手いこと表示されます。

でも実はこれ、タグのエスケープが面倒くさい。。。が、そこはHTMLを編集できる特性を生かして、次の方法を試しましょう！

１．記事作成の際”HTML”を選びます。
以下の解釈ソース（aliasとか必要なオプションは適宜変更です）をはりつけましょう。今回はXMLを解釈するものだとします。

<pre class="brush: xml;">
//お好きなpreタグで囲われたソースをどうぞ
</pre>

２．”作成”に戻りましょう。すると、先ほどの”//お好きなpreタグで囲われたソースをどうぞ”が独り不安げに浮かんでいるはずです。。。

３．ここに、表示したいソースコードを右クリックから”プレーンテキストとして貼り付ける”で貼り付けます。

もちろんHTMLから全部編集しても構いませんが、こうすると置換でうなーとかしなくて良いということですね。

試しに、次のようなXMLコードを表示したいとします。

<pre class="brush: js;">
//ココに気ままにJavaScriptソースを記述!
</pre>

これを、先ほどの手順で埋め込んで、”HTML”で確認すると、以下みたいな感じになっていると思います。

<pre class="brush: xml;">&lt;pre class="brush: js;"&gt;
// ココに気ままにJavaScriptソースを記述!
&lt;/pre&gt;
</pre>

簡単ですね！