Google Code PrettifyをCDNではなく自サーバーで使う方法

今更ながら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">&lt;p&gt;Google Code Prettify&lt;/p&gt;</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>

Related Posts