a-blog cmsでgoogle-code-prettifyを使ってみる

google-code-prettifyをa-blog cmsで試してみました。

導入方法は、SyntaxHighlighterのときとほぼ一緒です。

ダウンロードしてくる

google-code-prettifyをダウンロードしてきます。

ちなみにですが、google-code-prettifyはApache License 2.0となっております。

zipを展開しておいて、フォルダ名をprettifyみたいにしておきます。

index.htmlに追記・1

使用中のテーマのindex.htmlに、以下を追記します。

<script type="text/javascript" src="prettify/prettify.js"></script>
<link rel="stylesheet" type="text/css" href="prettify/prettify.css" />

cssとかsqlとかの場合は、別途フォルダ内のjsを読み込んであげます。

index.htmlに追記・2

マニュアルみたいなのには、bodyタグの所にonload=”prettyPrint()”って書いてね！　とあります。

a-blog cmsはjQueryが使える状態になっているので、今回は以下のようにしてみました。

<script type="text/javascript" src="prettify/prettify.js"></script>
<script type="text/javascript">
	$(function(){
		prettyPrint();
		})
</script>
<link rel="stylesheet" type="text/css" href="prettify/prettify.css" />

テーマフォルダにアップロード

使用中のテーマフォルダ内に、prettifyフォルダ＆index.htmlファイルをアップロードします。

a-blog cms側の設定

a-blog cmsにログインして、管理ページ>カスタマイズ管理>コンフィグ>（エントリーの）編集設定に移動します。

テキストタグセレクトの箇所に、prettify用のタグを追記します。

タグ

pre.prettyprint

ラベル

prettyprint

ここまで終わったら、保存ボタンを押しておきます。

あとはエントリの際に、prettyprintを選択してあげればOKです。

マニュアルみたいなのには、ASは対応していないと書かれていたんですが、試してみたら、意外といい感じになってくれました。（javaやmxmlはOKだから？）

カラーを変更したい！　とかは、prettify.cssを編集すればいいんじゃないかと…

個人的にはSyntaxHighlighterの方が好きなんですが、google-code-prettifyでも（割と）いい感じになるということで…