概要

REST APIのテストフォームをつくるときなどに、コードをいい感じに色づけしてくれるgoogle/code-prettifyを使うととても見やすくなります。
本記事は、google/code-prettifyのコードスニペットと、つまづいた点のメモです。

例

google/code-prettifyのsrcから

prettify.js
run_prettify.js
prettify.css

を取得してください。下記のhtmlをブラウザで開くと動きます。
（jQueryはボタンのクリックイベントに使っています。必須ではありません。）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Sample</title>
  <script src="lib/jquery-2.1.4.min.js"></script>
  <script src="lib/prettify.js"></script>
  <script src="lib/run_prettify.js"></script>
  <link type="text/css" rel="stylesheet" href="lib/prettify.css">
</head>
<body>

  XML:
  <pre id="code" class="prettyprint lang-xml">&lt;test attr=&quot;hello&quot; /&gt;</pre>
  <button id="get-script">Get</button>

  <script>
  $(document).ready(function() {
    prettyPrint();
    
    // ボタンが押されたら<pre>の中身を変更する
    $('#get-script').on('click', function() {
      $('#code').removeClass('prettyprinted');   // これが必要!!
      $('#code').text('<test attr="world" />');
      prettyPrint();
    });
    
  });
  </script>
</body>
</html>

このライブラリはprettyPrint()の呼び出しで<pre class="prettyprint>"要素のテキストにクラスを付加して色付けしています。したがって、テキストが変更された際には再度prettyPrint()の呼び出しが必要になります。

重要なのは、いったん色付けされたclass="prettyprint"の要素にはprettyprintedクラスが追加されているという点です。再度のprettyPrint()呼び出しを行う前に、このprettyprintedをクラスから削除しておかなければなりません。

これを行っているのが、コード中の//これが必要!!の行となります。