纯代码实现WordPress发布文章代码高亮教程

我们平时发布文章的时候,难免会有一些代码需要贴上去,怎样才能让这些代码更显眼呢?这里就要用到代码高亮显示了,在网上看到这样一则教程,收藏一下,或许以后能用得上。

先来说一下实现这个功能的大致过程吧:

首先引入高亮代码js提取代码中的关键词,标记标签;

然后,利用高亮css更换这些标签的颜色;最重要的是pre标签重写,这样是为了告诉浏览器哪段代码要执行高亮。

有没有发现,一般我们写文章可能需要<pre class=”prettyprint linenums prettyprinted”>等诸如此类的写法。这样对写文章不大友好。

今天的教程,这些统统省略。根据教程做完,并修改部分css。以后输入高亮代码就像输入正常代码那么简单,因为这里给您自动修改了pre标签。

本教程不仅仅支持Typecho、wordrpess等程序,你也可以举一反三,在别的地方实现代码高亮。

教程

1.pre修改

footer.php插入如下代码,对文章内的pre标签修改。

<script type="text/javascript">
$(document).ready(function(){
$("pre").addClass("prettyprint linenums");
prettyPrint();
});
</script>

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

2.JS引入

footer.php插入如下代码,引用js文件。

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

3.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}
}

4.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://iymark.com/website/wordpress-code-high-light.html

消息盒子
# 您需要首次评论以获取消息 #
# 您需要首次评论以获取消息 #

只显示最新10条未读和已读信息