关于小悟志网站地图归档友情链接联系Feed

云上小悟 + 

首页 » 网站建设 »

用<pre>和<code>显示源代码

2017年9月26日 / 185次阅读
HTML

文章《用<pre>和<code>显示源代码》的特色图片

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

 

比如下面这段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网页上显示这样的效果,使用<pre>和<code>就应该这样:

<pre>
<code>
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]
</code>
</pre>

 

本小站由于使用Crayon Syntax Highlighter插件,所以,所有在<pre>元素内的内容,都默认通过JS渲染后显示出来。使用这个插件,实际上就是让这个插件自动为代码前后加上<pre>标签,但是<code>标签没有自动加,同学们可以考虑手动加。

<code>标签实际上就是告诉浏览器这是源代码,但是并没有保留原格式的功能,只有<pre>可以保留原格式。因此,<pre>可以用在任何你想保留原格式的位置。也就是说,<code>只是说明这是源代码,<pre>用来保留原格式。这两个HTML元素组合在一起,完美实现在HTML网页中显示源代码的功能。

 

2017-10-01:

今天又看到一种新的用法,即<pre>在<code>的里面,如下代码:

<code>
<pre>
var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
}
</pre>
</code>

<pre>元素里面是可以有其他元素了,如果<pre>包含在<code>里面,最好就只放代码,这样符合HTML语义。

本文链接:http://www.maixj.net/wz/pre-code-16556
云上小悟 麦新杰(QQ:1093023102)

相关文章

评论是美德

《用<pre>和<code>显示源代码》有4条评论

无力满足评论实名制,评论对非实名注册用户关闭,有事QQ:1093023102.

  • 麦新杰

    下面是pre元素的CSS风格参考:

    pre {
        white-space: pre;
        white-space: pre-wrap;
        word-wrap: break-word;
        font-family: monospace, serif;
        font-size: 1em;
    }
    [ ]

  • 麦新杰

    字体的问题,源代码一定要使用等宽字体来渲染显示。 [ ]

  • 麦新杰

    这篇博文让我发现了一个问题:空格的宽度只有一个英文字母的一般。在网上查了半天,说是字体的原因,用的不是等宽字体。难倒微软雅黑不是等宽字体? [ ]

    • 麦新杰

      比如本文的python源代码,用pre和code显示出来,空格就那么一点窄。。。而且,整个页面的空格都很窄。。。难倒要开始研究网页字体的问题了? [ ]


前一篇:
后一篇:

栏目精选


©Copyright 麦新杰 Since 2014 云上小悟独立博客版权所有 备案号:苏ICP备14045477号-1。云上小悟网站部分内容来源于网络,转载目的是为了整合信息,收藏学习,服务大家,有些转载内容也难以判断是否有侵权问题,如果侵犯了您的权益,请及时联系站长,我会立即删除。

网站二维码
拍拍贷
go to top