ブログやウェブページにソースコードを掲載する時、ハイライト ( カラーリング? ) 表示できると見やすくなるだろうなぁと思い、google-code-prettify を試してみました。
設置方法 ———————————————————————-
上記のページから、JavaScript と CSS ファイルをダウンロードして以下の様に設置します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>文字列を連結する</title> <script src="prettify.js" type="text/javascript"></script> <link href="prettify.css" rel="stylesheet" type="text/css"/> </head> <body onload="prettyPrint()"> <h1>文字列を連結する</h1> <pre class="prettyprint"><code><?php $STR = "文字列も"; echo $STR."連結できる"; ?></code></pre> </body> </html>
赤い文字の部分がキモになる所です。
WordPress の場合、次のようにファイルを指定します。
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/google-code-prettify/prettify.js"></script>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/google-code-prettify/prettify.css” />
jQuery を使って、手軽に google-code-prettify を使う ———————————————————————-
ブログのテンプレートや記事に手を入れなくても google-code-prettify が使えるように、jQuery を使ってやってみました。
head 要素内に次のようなコードを追加します。
<link href=">
<script type="text/javascript" src="prettify.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("pre > code").addClass("prettyprint");
prettyPrint();
});
</script>
これで、<body onload="prettyPrint();">
とか、<pre class="prettyPrint">
とか、わざわざ書かなくて良くなった。
参考にさせてもらったページ
ありがとうございます!
google-code-prettify on Nucleu…
google-code-prettify on Nucleus っての書いたけど、もっとわかりやすいサイトを見つけたので、トラックバックしてみる。
http:/ (more…)