pre 显示html代码插件,用<pre>和<code>显示源代码

在HTML中，

这个元素表示在其中的内容，保留空格和换行，即保留原来就有的格式信息。而这个元素，就是告诉浏览器，这个元素里面的内容是源代码。由于源代码都有格式，比如换行和空格对齐等，因此在网页上显示源代码，就需要保留这些源代码的格式信息。

比如下面这段python实现的冒泡排序算法在网页上的显示：

def bubble_sort(array):

for i in range(len(array)-1):

for j in range(len(array) - i -1):

if array[j] > array[j+1]:

array[j], array[j+1] = array[j+1], array[j]

Python语言的语法对于换行后的缩进是强制要求的，如果要想在HTML网页上显示这样的效果，使用

和就应该这样：

def bubble_sort(array):

for i in range(len(array)-1):

for j in range(len(array) - i -1):

if array[j] > array[j+1]:

array[j], array[j+1] = array[j+1], array[j]

本小站由于使用Crayon Syntax Highlighter插件，所以，所有在

元素内的内容，都默认通过JS渲染后显示出来。使用这个插件，实际上就是让这个插件自动为代码前后加上

标签，但是标签没有自动加，同学们可以考虑手动加。

标签实际上就是告诉浏览器这是源代码，但是并没有保留原格式的功能，只有

可以保留原格式。因此，

可以用在任何你想保留原格式的位置。也就是说，只是说明这是源代码，

用来保留原格式。这两个HTML元素组合在一起，完美实现在HTML网页中显示源代码的功能。

2017-10-01：

今天又看到一种新的用法，即

在的里面，如下代码：

var person = {

firstName:"Bill",

lastName:"Gates",

age:50,

eyeColor:"blue"

}

元素里面是可以有其他元素了，如果

包含在里面，最好就只放代码，这样符合HTML语义。