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
网友评论