网站代码高亮插件 prettify.js

内容简介：网站代码高亮插件 prettify.js

作为前端开发者，代码是你躲也躲不开的，下面就教你如何在自己的网站里给所有代码块添加高亮效果。而这篇文章要给你介绍的就是这样一个代码高亮插件 prettify.js 。

这个插件的作用方法也非常简单，你只需要引用相关文件，然后再启用它就可以。

<!-- 引入 CSS 文件 -->
<link href="prettify.min.css" rel="stylesheet">
<!-- 引入 JS 文件 -->
<script src="jquery.min.js"></script>
<script src="prettify.min.js"></script>

推荐首选官网下载，如果找不到官网也可以从  bootcdn 下载或者直接引用 prettify.js 。从别的地方下载也是可以的，这里没有唯一的标准。

在这里由于启用 prettify.js 时，用到了jQuery 所以你也需要把 jQuery 一同引进来。代码引入之后，你就可以通过代码启用 prettify 了

<script>
$(window).load(function(){
 $("pre").addClass("prettyprint linenums");
 prettyPrint();}
)
</script>

这行代码的意思就是启用 prettify.js ，其实就是给 <pre> 标签添加 class 类  prettyprint 和 linenums 。

启用完之后，你就可以在你的写文章的时候，用 <pre></pre> 把代码包裹起来就可以看到美美的高亮效果了。

有时候你会遇到一些奇葩的问题，比如：为什么不是第行前端都会显示行号，而只是每隔五行就会出行一个行号，如图：

要解决这个问题，你只需要往样式表里面添加下面的样式就可以了：

pre.prettyprint ol.linenums li {
    list-style-type: decimal;
}

想让代码高亮样式更加个性化，你可以根据自己的需要给相关的元素添加样式。

在 github 上有一个关于prettify 的介绍，如你了解更多可以前往阅读： https://github.com/google/code-prettify

以上所述就是小编给大家介绍的《网站代码高亮插件 prettify.js》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

• Istio 服务注册插件机制代码解析
• Istio 服务注册插件机制代码解析
• 项目的改造——RemoveButterKnife插件代码的重构
• Prettier 插件为更漂亮快应用代码
• IDEA 插件推荐：让你写出好代码的神器
• wp-syntax代码高亮插件使用手册

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。