2012年1月23日月曜日

Bloggerでシンタックスハイライト用にgoogle-code-prettifyを使う方法

このブログ、特に技術系のブログにするわけでもないのでいらないかもしれんけど、
後々使用するかもしれないのでシンタックスハイライトが欲しいなと。

こんなやつね。






有名所だとたぶん「syntaxhighlighter」あたりかなと思うけど、
そのままコピペすると不要なスペースが入ったり行番号がついてきたりとあまり好きじゃない。

なので、別のを探してみると、
愛しのGoogleさまから「google-code-prettify」なるものが!


ということで、Bloggerでgoogle-code-prettifyを使用する方法は以下のとおり。




まず、google-code-prettifyのサイトからプログラム本体をダウンロードします。




ダウンロードページを開くと通常版と圧縮版の2種類があります。

そのまま使うのなら圧縮版(ファイル名にsmallがついたやつ)を使えばいいけど
見た目を変更するためにcssに手を入れたいのなら通常版を落としましょう。




通常版の場合は解凍後にできた「src」フォルダ内のprettify.jsprettify.cssを使います。

、前にも書いたようにBloggerはjsファイル等をアップできないんですよね><
なので、他のレンタルサーバー等にファイルをアップしてやる必要がありますが、
このあたりの説明はまた後ほど。




ファイルさえアップしてしまえば後は前の記事「BloggerでのjQueryの使い方」と同様に
テンプレートの<head>内で読み込んでしまえばOK。
<script src="{{アップしたURL}}/prettify.js" type="text/javascript"></script>
<link href="{{アップしたURL}}/prettify.css" rel="stylesheet" type="text/css" />

あとは、シンタックスハイライトさせたい箇所をHTML編集モードで
<pre class="prettyprint">
{{ここにコードを記述}}
</pre>

としてやれば適用されます。




注意点として、HTMLの<とか>とかの記号は
文字参照(&lt;と&gt;)に置き換える必要があります。

テキストエディタ等で全置換してもいいけど
Bloggerの場合は通常の編集モードで入力すれば
自動的に文字参照に置換してくれるので、
最後にHTML編集モードにして<pre>だけを書き足すようにすると楽ですよ。

0 件のコメント:

コメントを投稿