您现在的位置是:首页 > 网站制作 > 网站建设网站建设

网页代码高亮显示插件-prettyPrint使用

刘锁2018-12-16【网站建设】人已围观

简介prettyPrint,让网页中的代码显示高亮显示,可以突出重点,方便阅读,下面是prettyPrint插件使用方法。

博客开始做时,没有使用网页代码高亮插件,分享的代码在页面直接显示,代码可阅读醒很差。

为了提高分享代码可阅读性,我使用了prettify.js插件,下面我就介绍一下prettify.js使用方法:

1.下载prettify.js和prettify.css,这2个文件,我已经下载好,可以点击-下载

2.在页面head中引入js和css,别忘记改变路径:
<link href="/skin/jxhx/css/prettify.css" rel="stylesheet">
<script src="/skin/jxhx/js/prettify.js"></script>

3.将需要展示的代码进行转义,可以直接在线转义(在线转义网站:https://www.sojson.com/rehtml);

4.在博客文章编辑器中,点击源码,写上<pre class="prettyprint linenums">这里放置转义后的代码</pre>,然后将转义的代码拷贝进去;

5.在</pre>后面加上<script type="text.javascript">prettyPrint();</script>或者直接将body标签改为<body onload="prettyPrint();">,这种方法表示body内容加载全部完成后,再执行prettyPrint方法,缺点是有延迟。

6.按照以上步骤操作就完成网页代码高亮显示了,如果不明白,欢迎扫码页面底部微信码或QQ码,加我好友咨询。


 

Tags:prettyPrint   网页代码高亮

很赞哦! ()

文章评论

站点信息