WordPress纯代码实现代码高亮教程

5
(2)

旧站的关于高亮代码的教程,现在看起来也能在Wordpress上使用,就把它分享出来。当然,插件跟代码各有各的好处,一个是主题升级方便,一个是代码精简。

今天闲来无事,研究了下代码高亮。为啥不用插件实现呢,一来Typecho用户少,插件更新慢,可能新版插件还是基于低版本typecho编写;二来能用精简代码实现,为啥要用插件呢!

Wordpress纯代码实现代码高亮教程

说一下大体得实现过程吧,首先引入高亮代码js提取代码中得关键词,标记标签;然后,利用高亮css更换这些标签得颜色;最重要得自然是,pre标签重写,这样是为了告诉浏览器哪段代码要执行高亮。所以,一般我们写文章可能需要<pre class=”prettyprint linenums prettyprinted”>等诸如此类得写法。这样就使得写文章不太方便。所以,今天得教程,这些统统省略。根据教程做完,并修改部分css。以后输入高亮代码,就像输入正常代码那么简单,因为这里给您自动修改了pre标签。当然,本教程不仅仅支持Typecho,wordrpess等程序也可以用本教程实现代码高亮。

教程

pre修改

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

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

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

JS引入

footer.php插入如下代码,引用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}

共计2人评分,平均5

到目前为止还没有投票~

很抱歉,这篇文章对您没有用!

让我们改善这篇文章!

告诉我们我们如何改善这篇文章?

文章目录

旧站文章,作者:古哥,如若转载,请注明出处:https://iymark.com/articles/363.html

(4)
微信公众号
古哥的头像古哥管理团队
上一篇 2020年10月10日 22:55
下一篇 2020年10月11日 14:08

你可能感兴趣的文章

发表回复

登录后才能评论
微信小程序
微信公众号