はてなにはシンタックスハイライト機能があっていいなーと思ってたけれど，
GoogleがJavascriptで動作するシンタックスハイライトスクリプトを作成していた．
google-code-prettify といスクリプト．
早速導入してみた．
The lexer should work on a number of languages including C and friends, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, and Makefiles. It works passably on Ruby, PHP and Awk and a decent subset of Perl, but, because of commenting conventions, doesn't work on Smalltalk, Lisp-like, or CAML-like languages.
説明書によると
C，Java，Python，Bash，SQL，HTML，XML，CSS，Javascript，Makefile対応で，Ruby，PHP，Awk，Perlも大まかには対応しているらしい．Smalltalk，Lisp，CAMLは無理みたい．そして実際の使い方だが，
Usage:
1) include this source file in an html page via
<script src="/path/to/prettify.js" type="text/javascript"></script>
2) define style rules. See the example page for examples.
3) mark the <pre> and <code> tags in your source with class=prettyprint.
You can also use the (html deprecated) <xmp> tag, but the pretty printer
needs to do more substantial DOM manipulations to support that, so some
css styles may not be preserved.
prettify.css
prettify.js
の二つのファイルからなっており，これをどこかに設置して以下のように読み込ませればよい．
<link href="prettify.cssのパス" rel="stylesheet" type="text/css/">
<script src="prettify.jsのパス" type="text/javascript></script>
そして<pre>タグもしくは<code>タグにclass=prettyprintをつけて使えばよいみたい．
動かないじゃんと思ったら，WEBページの方のREADMEに
Add onload="prettyPrint()" to your document's body tag.
と書いてあった．忘れずに追加．
<body onload="prettyPrint()">
0 件のコメント:
コメントを投稿