今更ながらGoogle Code Prettifyの話です。CDNではなく自サーバーからデータを配信したいときの方法をまとめました。
Step1 : Gitからソースのダウンロード
Google Code Prettifyのソースは以下のgitリポジトリにあります。
https://github.com/googlearchive/code-prettify
クローンするなり直接zipで落とすなり、まずは自分の手元にソースデータを入手します。
Step2 : 必要なjsファイルの選定
Google Code Prettifyを動作させるJavaScriptファイルは”src”フォルダのprettify.jsです。
ひとまずこのファイルがあればいいのですが、Google Code Prettifyでは表示する言語を指定することができます。例えばCSSのコードを綺麗に表示したい、といった具合です。それに必要なファイルが同フォルダのlang-css.jsなどです。
JavaScript(lang-js)やHTML(lang-html)はpretty.jsに標準で入っているようなのですが、CSS(lang-css)は別途lang-css.jsの読み込みが必要になります。
つまり、Google Code PrettifyでHTML/JavaScript/CSSの3つの言語を表示したい場合は、
<script src="./js/prettify.js" charset="utf-8"></script> <script src="./js/lang-css.js" charset="utf-8"></script>
とHTMLファイルで指定が必要となります。
Step3 : スタイルの指定
文字の色や背景の色の設定などはGoogle Code Prettifyがスタイルシートとして標準で提供しています。そのcssファイルは”style”フォルダに入っています。
例えば”sunburst”というテーマを使う場合には、
<link rel="stylesheet" href="./css/sunburst.css">
とHTMLファイルで指定します。
Step4 : prettyPrint()の実行
必要なJavaScript, CSSファイルを設定したら、最後にprettyPrint()を実行します。
prettyPrint()を呼び出すことで、<pre class=”prettyprint”>内の文字列がGoogle Code Prettify用のコードに変換されます。そのためprettyPrint()を実行するのは、DOM要素を読み込んだ後となります。
<script type="text/javascript"> !(function(){ function init(event) { prettyPrint(); } if( window.addEventListener ){ window.addEventListener( 'load', init, false ); } else if( window.attachEvent ){ window.attachEvent( 'onload', init ); } else { window.onload = init; } }()); </script>
まとめ
Step1～Step4をまとめるとこんな感じのコードになります。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Google Code Prettify</title>
<script src="./js/prettify.js" charset="utf-8"></script>
<script src="./js/lang-css.js" charset="utf-8"></script>
<link rel="stylesheet" href="./css/sunburst.css">
</head>
<body>
<pre class="prettyprint lang-html"><p>Google Code Prettify</p></pre>
<script type="text/javascript">
!(function() {
function init(event) {
prettyPrint();
}
if (window.addEventListener) {
window.addEventListener('load', init, false);
} else if (window.attachEvent) {
window.attachEvent('onload', init);
} else {
window.onload = init;
}
}());
</script>
</body>
</html>
