做做笔记。碰见了一个网站，显示代码的时候自带语法高亮，这很新鲜。它的代码被pre标签包裹，原本以为pre标签下的所有的内容会以文本原来的样式输出，特意查了查发现它依然支持html标签。
先来个菜鸟教程的栗子：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 代码</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<p><code><header></code> 作为内联元素被包围。</p>
大专栏 标签的使用tag"><p>如果需要把代码显示为一个独立的块元素，请使用 <pre> 标签：</p>
<pre>
<article>
<h1>Article Heading</h1>
</article>
</pre>
</body>
</html>
|
显示结果为
1
2
3
4
5
6
7
| <header> 作为内联元素被包围。
如果需要把代码显示为一个独立的块元素，请使用 <pre> 标签：
<article>
<h1>Article Heading</h1>
</article>
|
分析：
显然，这里为了避免<>直接被当成html标签而渲染，例子使用了unicode变体。
事实上<pre>标签是可以内嵌html标签的（关于这点请自行测试）。
总之，<pre>支持能够内嵌html标签为语法高亮提供了实现基础。当然，如果你想让<pre>内输出原生的html标记，那么麻烦在输出前手动转码。
传送门：
Bootstrap 代码