[prettifyライブラリ] HTMLタグをハイライト表示する

説明

prettifyライブラリでHTMLタグをハイライト表示するにはコードを表示するタグにスタイルシートクラス名prettyprintとlang-htmlを指定します。また、ページが読み込まれたらハイライト処理するようにbodyタグにonload="prettyPrint()"を記述しておきます。

サンプルプログラム

【HTML】

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="css/prettify.css" type="text/css" media="all">
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/prettify.js"></script>
</head>
<body onload="prettyPrint()">
<pre class="prettyprint lang-html">

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;&gt;<br>
&lt;html lang=&quot;ja&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html;charset=utf-8&quot;&gt;
&lt;title&gt;Sample&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;css/prettify.css&quot; type=&quot;text/css&quot; media=&quot;all&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;css/main.css&quot; type=&quot;text/css&quot; media=&quot;all&quot;&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/prettify.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;<
&lt;h1&gt;自動ハイライト&lt;/h1&gt;
&lt;p&gt;HTMLタグも自動ハイライトできます。&lt;br&gt;
とても便利です。
&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

</pre>
</body>
</html>
サンプルを実行
[戻る]