代码高亮插件prettyPrint.js工具怎么使用?代码高亮插件prettyPrint.js工具怎么使用?

从前 车马很慢
书信很远 一生只够爱一个人
Hi, 请登录     我要注册     找回密码

代码高亮插件prettyPrint.js工具怎么使用?

在我们写博客或文章的时候可能会在pre标签中插入代码,但是原生的pre标签代码显示比较单一,不易突出重点不方便阅读,幸好有prettyPrint.js,一个Google代码高亮插件,实现代码高亮显示。下面就给大家介绍一下使用方法:yNI北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站

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

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

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

<body onload="prettyPrint()">

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

<pre class="prettyprint linenums">${contetn}</pre>
也可以这样,使用js动态添加
$(document).ready(function() {
$(".entry-content pre").addClass("prettyprint linenums");
});

高亮代码下载:https://pan.baidu.com/s/1pKzvSq8sZGnUHZveTbjKUA

赞() 打赏
未经允许不得转载:技术笔记 » 代码高亮插件prettyPrint.js工具怎么使用?
分享到: 更多 (0)

本站友链交换和投稿功能正在建设中......

友链交换我要投稿

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏