BloggerにSyntaxHighlighter を導入する方法(ソースコードをきれいに表示)

  • 投稿 : 2011-07-10
  • 更新 : 2014-06-15
方法は何種類かあるようです。

一番簡単だと思う方法

これが一番お手軽ではないかと思います。

FaziBear's Blogger Widgetsにアクセスします。環境によるのかもしれませんが私の場合だと以下のような画面になります。
URLもリダイレクトされて
http://sites.google.com/site/fazibear/blogger.html?attredirects=0 
となります。
添付ファイルをダウンロードしてローカルに保存します。
この保存したファイルをブラウザで開くと以下のような画面になります。
「Add to Blogger」ボタンを押すと以下のような画面になります。
「ウィジットを追加」とすると、追加されます。タイトルは空白にしたほうがよいでしょう。後からでも変更可能です。

使い方

<pre name="code" class="html">
(コード)
</pre>
•"<" → < 
•"&" → & 
•">" → > 

上記の文字はHTMLエンコード(エスケープ、置換)したほうがよいです。
そうしないと期待通りの表示にならないと思います。

ほかの導入の仕方

ソースコードを行番号付きで、きれいに表示する「SyntaxHighlighter」の導入と使い方
- gogoToRoTAN

スポンサーリンク