bootstrap中标记代码内容的标签

1、在网页中显示

标签

在网页中显示“<”、“>”等特殊字符应当进行适当转换才能正常显示。以标题为例，代码如下：

在网页中显示
标签

使用code标签和pre标签时，也要对特殊字符进行转换。可以借助DreamweaverCS5的设计视图进行转换。

2、code标签

用于包含代码，默认给代码加边框，字体设为红色。

 
Google Prettify:标签和
标签让代码片段变得更漂亮

code标签.png

3、pre标签

用于包含代码块。可以保持代码块原有的结构。
step1:在代码视图中写：

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()。

  
Google Prettify:标签和
标签让代码片段变得更漂亮

    

    

            
1
            
2
            
3
            
4
            
5
            
6
    




 

代码块样式更好看了！

google-code-prettify.png