ソースコードを良い感じに表示する「google-code-prettify」を試す
2013年2月1日
WordPressは、SyntaxHighlighterを使っているんですが、サンプル用のページを作ろうかなーと思い、軽く調べてgoogle-code-prettifyってライブラリが良さげだったので、ちょっとお試し。
導入してみる
DLして、ドキュメントルート以下に適当に置いてからheadに追加。
<link href="/google-code-prettify/prettify.css" rel="stylesheet" /><script type="text/javascript" src="/google-code-prettify/prettify.js"></script> |
で、prettyPrint();を呼ぶんですが、
<body onload="prettyPrint()"> |
って感じで、bodyのonloadに追加するのでもいいでしょうし、jQueryを使ってるなら、
$(function(){ prettyPrint();}); |
こんな感じで呼んでもいいかもしれません。
あとは、コードを表示したい部分をpreタグで囲んで、classにprettyprintを指定すればOK。
<pre class="prettyprint">ここがコードここがコードここがコード</pre> |
classにlinenumsを追加すると、行数の表示。
<pre class="prettyprint linenums">ここがコードここがコードここがコード</pre> |
linenums:100みたいな感じで、先頭の行番号を指定する事もできるみたいです。
<pre class="prettyprint linenums:100">ここがコードここがコードここがコード</pre> |
WordPressで使ってる人もいるみたいなので、気が向いたらブログもこっちに変更しようかな・・。