1、在網頁中顯示<h1>標簽
在網頁中顯示“<”、“>”等特殊字符應當進行適當轉換才能正常顯示。以標題為例，代碼如下：
在網頁中顯示<h1>標簽
使用code標簽和pre標簽時，也要對特殊字符進行轉換。可以借助DreamweaverCS5的設計視圖進行轉換。
2、code標簽
用于包含代碼，默認給代碼加邊框，字體設為紅色。
<h1 class="page-header">Google Prettify:<code><code></code>標簽和<code><pre></code>標簽<small>讓代碼片段變得更漂亮</small></h1>
code標簽.png
3、pre標簽
用于包含代碼塊。可以保持代碼塊原有的結構。
step1:在代碼視圖中寫：
<pre></pre>
step2:打開DreamweaverCS5的設計視圖，將代碼塊復制粘貼到虛線灰色塊中。
pre標簽1.png
在網頁中顯示如下：
pre標簽2.png
4、使用google-code-prettify進一步美化代碼。
step1:將prettify.css和prettify.js鏈接到網頁中。
step2:給pre標簽添加prettyprint和linenums類。
給pre標簽添加prettyprint linenums兩個類。前者給代碼添加樣式，后者給代碼添加行號。
step3:給body標簽添加onload屬性，屬性值設置為prettyPrint()。
<body onLoad="prettyPrint()">
<div class="container">
<h1 class="page-header">Google Prettify:<code><code></code>標簽和<code><pre></code>標簽<small>讓代碼片段變得更漂亮</small></h1>
<pre class="prettyprint linenums"><div id="wrap"><br> <div id="box"><br> <div>1</div><br> <div>2</div><br> <div>3</div><br> <div>4</div><br> <div>5</div><br> <div>6</div><br> </div><br></div></pre>
</div>
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/prettify-min.js"></script>
</body>
代碼塊樣式更好看了！
google-code-prettify.png
