今更ながら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>