tx

彭鸿

寒江孤影,江湖故人!
238,763
手动添加prettyprint 代码高亮 手动添加prettyprint 代码高亮

经常需要折腾一下代码,本想安装个Prismjs插件,但却不支持typecho0.9。于是想到了之前在网上看到的一款谷歌的代码高亮,百度查找,折腾半天,终于搞定成功。

源码下载:https://github.com/google/code-prettify

使用方法:

第一步,引入prettify.js和prettify.css

<link href="prettify.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="prettify.js"></script>

第二步,在body的onload事件里添加函数”prettyPrint()”

<body onload="prettyPrint()">

第三步,pre标签添加CSS类“prettyprint linenums”

<pre class="prettyprint linenums">代码</pre>
或者
<code class="prettyprint">代码</code>

都可以。

如果引用了jquery的话,也可以这样,使用js动态添加,免去手功增加的麻烦。

<script>
    $(document).ready(function() {
    $(".entry pre").addClass("prettyprint linenums");
    });
</script>

 注意上面的.entry类需要修改成你自己的。

其中的prettify.css是可以修改成你自己喜欢的颜色。借助几个实例,我组合了一下就成了以下这样的了。

prettify

2 条评论
user 编辑评论信息
插入图片

隐私评论
  1. @
    121 2022年02月16日
    Windows 10 · Chrome 97

    12121哈哈

  2. @
    121 2022年02月16日
    Windows 10 · Chrome 97

    heo-再见 heo-再见