网页中标记代码内容使用code和pre标签
要在HTML中显示标签本来的样子需要转化为实体
在此附上百度的实体字符：http://baike.baidu.com/view/4757776.htm#3
code标签标注行内的代码内容
我要在代码中显示如下效果：
需要这么使用code标签
在前面几节中有是否还是记得：我们在 <code><div></div></code>标签中添加了一个类<code>.page-header</code>来显示一条分割线
pre标签标注一段代码内容--同样需要转化实体
<pre>
<script type='text/javascript' src='./bootstrap/bootstrap.js'></script>
</pre>
效果如图：
bootstrap为代码和代码块提供了好看的样式，我们只需要调用它的code或者pre标签即可，值得注意的是需要注意将需要显示的HTML特殊标签转化为实体
下面我们来讲讲，如何更加美化自己要美化的代码块<pre></pre>中的代码
①首先网上搜索google-code-prettify ，下载得到2个文件
prettify.js 和prettify.css
②分别保存在路径中然后引入这2个文件
<link href="./bootstrap/css/prettify.css" rel="stylesheet">
<script type="text/javascript" src="./bootstrap/js/prettify.js"></script>
③要显示行号，需要添加如下css样式在 <style type='text/css'></style>标签中
li.L0, li.L1, li.L2, li.L3,li.L5, li.L6, li.L7, li.L8{ list-style-type: decimal !important }
如果不添加行CSS代码那么显示的效果是每隔5行显示一个行号即 5n (n为整数) 才会显示一个行号
④给body标签添加onload='prettyPrint();' --> 注意有大写
<body onload='prettyPrint();'></body>
⑤给pre标签添加class='prettyprint linenums' -->注意是小写
<pre class='prettyprint linenums'></pre>
如图效果：
看这样效果是不是很赞！！！