prettyPrint.js代码高亮插件使用与下载

发布日期:2019-05-10 05:55:17 | 原创作者:兄弟盟网络

关键字:prettyPrint.js 代码高亮
内容摘要:在我们写博客或文章的时候可能会在pre标签中插入代码,但是原生的pre标签代码显示比较单一,不易突出重点不方便阅读,幸好有prettyPrint.js,一个Google代码高亮插件,实现代码高亮显示。

在我们写博客或文章的时候可能会在pre标签中插入代码,但是原生的pre标签代码显示比较单一,不易突出重点不方便阅读,幸好有prettyPrint.js,一个Google代码高亮插件,实现代码高亮显示。

演示效果

prettyPrint.js代码高亮

使用方法:

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


  1. <script src="js/prettify.js" type="text/javascript"></script>

  2. <link rel="stylesheet" type="text/css" href="css/prettify.css"/>

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


  1. <body onload="prettyPrint()">

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


  1. <pre class="prettyprint linenums">

或者你也可以这样,使用js动态添加


  1. $(document).ready(function() {

  2. $(".entry-content pre").addClass("prettyprint linenums");

  3. });

下载地址

下载prettify




赞助商广告