各种博客的代码块高亮是如何实现的

各种博客的代码块高亮是如何实现的，首先引入高亮代码 js 提取代码中得关键词，标记标签；然后，利用高亮 css 更换这些标签得颜色；最重要得自然是，pre 标签重写，这样是为了告诉浏览器哪段代码要执行高亮。

pre 修改：

<script type="text/javascript">

$(document).ready(function(){

$("pre").addClass("prettyprint linenums");

prettyPrint();

});

</script>

注：上述代码中 addClass 后面有 linenums 表示显示行号，没有则不显示行号。

JS 引入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/188.0.0/prettify.min.js"></script>

CSS引入：

这里是主要得了，上述 pre 跟 js 让你得主题有了代码高亮得功能，至于怎么高亮，就看你得 css 怎么写了；而且 css 可能跟你得主题有冲突，所以我们往往需要修改 css，下面站长把原版 css 发出来

pre.prettyprint{display:block;background-color:#333}

pre .nocode{background-color:none;color:#000}

pre .str{color:#ffa0a0}

pre .kwd{color:khaki;font-weight:700}

pre .com{color:#87ceeb}

pre .typ{color:#98fb98}

pre .lit{color:#cd5c5c}

pre .pun{color:#fff}

pre .pln{color:#fff}

pre .tag{color:khaki;font-weight:700}

pre .atn{color:#bdb76b;font-weight:700}

pre .atv{color:#ffa0a0}

pre .dec{color:#98fb98}

ol.linenums{margin-top:0;margin-bottom:0;color:#AEAEAE}

li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{list-style-type:none}

@media print{pre.prettyprint{background-color:none}

code .str,pre .str{color:#060}

code .kwd,pre .kwd{color:#006;font-weight:700}

code .com,pre .com{color:#600;font-style:italic}

code .typ,pre .typ{color:#404;font-weight:700}

code .lit,pre .lit{color:#044}

code .pun,pre .pun{color:#440}

code .pln,pre .pln{color:#000}

code .tag,pre .tag{color:#006;font-weight:700}

code .atn,pre .atn{color:#404}

code .atv,pre .atv{color:#060}

}

CSS修改：

做完这些，剩下就就是针对自己得主题修改 CSS 了，一般是一些颜色得修改。至于修改过程，真得不好描述，站长这里先把自己修改后得 CSS 发出来，当然可能你用不上

pre.prettyprint{display:block;background-color:#333;opacity:.8;padding:10px 0;overflow-x:auto;border:1px solid #555;border-radius:5px}

    pre .nocode{background-color:none;color:#000}

    pre .str{color:#ffa0a0}

    pre .kwd{color:khaki;font-weight:700}

    pre .com{color:#87ceeb}

    pre .typ{color:#98fb98}

    pre .lit{color:#cd5c5c}

    pre .pun{color:#fff}

    pre .pln{color:#fff}

    pre .tag{color:khaki;font-weight:700}

    pre .atn{color:#bdb76b;font-weight:700}

    pre .atv{color:#ffa0a0}

    pre .dec{color:#98fb98}

    .linenums code{background-color:#333}

    ol.linenums{margin-top:0;margin-bottom:0;color:#AEAEAE;margin-left:3em}

    li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{list-style-type:decimal-leading-zero}

    @media print{pre.prettyprint{background-color:none}

    code .str,pre .str{color:#060}

    code .kwd,pre .kwd{color:#006;font-weight:700}

    code .com,pre .com{color:#600;font-style:italic}

    code .typ,pre .typ{color:#404;font-weight:700}

    code .lit,pre .lit{color:#044}

    code .pun,pre .pun{color:#440}

    code .pln,pre .pln{color:#000}

    code .tag,pre .tag{color:#006;font-weight:700}

    code .atn,pre .atn{color:#404}

    code .atv,pre .atv{color:#060}

    }

    body.neon pre code{border:0}

本文链接：https://niujc.com/not/1216999.html