概要
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"><test attr="hello" /></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をクラスから削除しておかなければなりません。
これを行っているのが、コード中の//これが必要!!の行となります。