行业新闻

    wordpress代码高亮插件wordpress 添加代码高亮

    2022-05-30    来源：www.8001717.cn

    添加代码高亮

    写博客的时候，通常需要在内容区添加一些代码程序，但是后台编辑文档没有高亮代码的功能wordpress代码高亮插件，使得内容区的文字内容和程序代码颜色一致，并且不能高亮代码程序。，并不能满足用户体验的要求。

    最近看到一个国外网站，Prism是一个轻量级、可扩展的语法亮点，它是基于现代web标准构建的。它被用于数千个网站，包括您每天访问的一些网站。

    单击顶部按钮转到下载选择页面。包括四部分压缩级别（level）、核心（core）、语言（）、插件（）wordpress代码高亮插件wordpress建站，四部分操作后，可以自定义自己喜欢的高亮代码，最后一个链接会调整模板js代码和css样式被下载并放置在您自己的网站上。

    显示高亮代码的样式，如下图：

    从上图可以看出显示效果很漂亮，但是这个方法下面有个滚动条wordpress网站建设，隐藏的代码部分需要拖出来。

    下面介绍另一种方法，这是我最喜欢的一种方法，也是通过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
}

    其次，在.js代码的最后，在编辑器中添加一个高亮代码的按钮，添加

    function prettify_codeHighlight() {
?>


    

    注意：把上面的pres改成pre，因为pres是一个不存在的标签，为了避免和代码中的pre class="冲突，我这里发布内容的时候特意这样写。
    

    你没有音频。
    

    标签：代码高亮
    

    文章来自互联网，侵权请联系删除，文章阐述观点来自文章出处，并不代表本站观点。
www.8001717.cn



X