关于在 wordpress中粘贴代码

如果要在 wordpress中粘贴代码,我知道的方式有使用 wordpress插件,使用 code 或者 pre标签,可能也有人自定义其他的一些标签。

插件的方式我不熟悉,看到网上说有很多种的插件,而且都有各种缺点之类的,所以也没有那个精力一一挑选了。下面重点说说使用 code 和 pre标签来粘贴代码的方式。

code 标签似乎是 wordpress推荐的方式,因为编辑器的文本编辑框中有 code的按钮,但是 code有自己的缺点,无法代替 pre。你可以在模板目录的 style.css文件中修改 code的样式。比如:

white-space: nowrap

white-space 的值有 pre pre-line pre-nowrap nowrap等,但是要么是合并空格,缩进不能显示,要么是缩进正常,但是同时换行符和br标签都换行,导致多出空行。

所以直接使用 pre标签就好了,首先在 wordpress的后台设置编辑框默认为文本的,然后我们需要在文本框中加入 pre标签的按钮。参考这篇文章http://www.bianlei.com/wordpress-pre-tag-button/,之后我们需要在模板的 style.css中给 pre设置一些个性化的样式,本博客是在模板原有的pre样式定义中加入或者修改了一些之后如下:

.entry-content pre, 
.comment-content pre { 
    border: 1px solid #ededed; 
    color: #4d6788; 
    background-color: #eee; 
    font-family: Consolas, Monaco, Lucida Console, monospace; 
    font-size: 12px; 
    font-size: 0.857142857rem; 
    line-height: 1.714285714; 
    margin: 24px 0; 
    margin: 1.714285714rem 0; 
    overflow: auto; 
    padding: 4px; 
    padding: 1.714285714rem; 
}

关于在 wordpress中粘贴代码》上有1条评论

  1. baozhuwanglei 文章作者

    如上css,看来评论中也能粘贴代码的,我以及好像是 google 的 blogger中评论框时限制好多 html标签的使用。

    blogger
    function a () {
      echo 'test';
    }

    如上用 pre 显示一个链接,一个 php函数

发表评论