wordpress添加代码高亮显示

  • 2019-02-26 15:22:05
  • 2,986 次阅读
  • 稿源:天马行空

在用wordpress写博客时,平常需要在内容区域添加一些代码程序,但wordpress后台编辑文档中没有能够突出代码高亮显示的功能,这使得内容区域的文本内容与程序代码颜色一致,不能够重点突出代码程序,更不能达到用户体验的要求。

最近,看到一个国外的网站https://prismjs.com/,Prism是一个轻量级的、可扩展的语法亮点,它基于现代Web标准构建。它被用于数千个网站,包括一些你每天访问的网站。

通过点击最上面的download按钮,进入下载选择页面。它包括四个部分压缩水平(compression level),核心(core),语言(languages),插件(plugins),经过四部分的操作,可以定制自己喜欢的高亮显示代码,最后的一个环节将调好的模板的js代码和css样式下载放到自己的网站中。
高亮代码显示的样式,如下图:

codeHighlight
通过上面的图片可以看到显示的效果很漂亮,但是这种方法下面有个滚动条,隐藏的代码部分需要拖动出来。
下面介绍另一种,是我比较喜欢的一个方法,也是通css和js来实现的。

首先,在自己的模板中添加css样式,如下:

/*淡白灰代码高亮样式*/
pre {
    display: block;
    padding: 0 0 0 10px;
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 20px;
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre;
    white-space: pre-wrap;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 2px
}
pre.prettyprint {
    margin-bottom: 20px;
    background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
    background-size: 3em 3em;
}
.prettyprint.linenums, pre.prettyprint.linenums {
    -webkit-box-shadow: inset 40px 0 0 #f8f8f8, inset 42px 0 0 #358ccb;;
    -moz-box-shadow: inset 40px 0 0 #f8f8f8, inset 42px 0 0 #358ccb;;
    box-shadow: inset 40px 0 0 #f8f8f8, inset 42px 0 0 #358ccb;
}
.prettyprint.linenums ol, pre.prettyprint.linenums ol {
    padding-left: 1.8em;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}
.prettyprint.linenums ol li, pre.prettyprint.linenums ol li {
    padding-left: 6px;
    color: #bebec5;
    line-height: 21px;
    margin-left:3px;
    list-style: decimal;
}
.prettyprint.linenums ol li:before, pre.prettyprint.linenums ol li:before {
    content: "";
    width: 0
}
.prettyprint .com {
    color: #666
}
.prettyprint .lit {
    color: #c0c
}
.prettyprint .clo, .prettyprint .opn, .prettyprint .pun {
    color: #0a0
}
.prettyprint .fun {
    color: #dc322f
}
.prettyprint .atv, .prettyprint .str {
    color: #c28f5b
}
.prettyprint .kwd, .prettyprint .tag {
    color: #f92659
}
.prettyprint .atn, .prettyprint .dec, .prettyprint .typ, .prettyprint .var {
    color: #0a0
}
.prettyprint .pln {
    color: #00f
}

其次,在header引用prettify.js代码

最后,在编辑器中添加高亮代码按钮,在function中加入

function prettify_codeHighlight() {
?>
<script type="text/javascript">
QTags.addButton( 'codeHighlight', '代码高亮', '<pres class="prettyprint linenums" >\n添加代码\n</pres>', "" );//添加高亮代码
</script>
<?php
}
add_action('admin_print_footer_scripts', 'prettify_codeHighlight' );

注:将上面的pres改成pre,因为pres是不存在的标签,问了避免与代码中的pre class=”prettyprint linenums冲突,我这里发布内容时故意写成这样的。

喜欢 2

文章评论 (0)

表情

大眼 可爱 大笑 坏笑 害羞 发怒 折磨 快哭了 大哭 白眼 晕 流汗 困 腼腆 惊讶 憨笑 色 得意 骷髅 囧 睡觉 眨眼 亲亲 疑问 闭嘴 难过 淡定 抗议 鄙视 猪头