网站代码高亮插件 prettify.js
2017-06-08 13:46
483 查看
作为前端开发者,代码是你躲也躲不开的,下面就教你如何在自己的网站里给所有代码块添加高亮效果。而这篇文章要给你介绍的就是这样一个代码高亮插件 prettify.js 。
这个插件的作用方法也非常简单,你只需要引用相关文件,然后再启用它就可以。
推荐首选官网下载,如果找不到官网也可以从 bootcdn 下载或者直接引用prettify.js。从别的地方下载也是可以的,这里没有唯一的标准。
在这里由于启用 prettify.js 时,用到了jQuery 所以你也需要把 jQuery 一同引进来。代码引入之后,你就可以通过代码启用 prettify 了
这行代码的意思就是启用 prettify.js ,其实就是给
授课时间
prettyprint :标记作用范围
linenums:是否显示行号
启用完之后,你就可以在你的写文章的时候,用
有时候你会遇到一些奇葩的问题,比如:为什么不是第行前端都会显示行号,而只是每隔五行就会出行一个行号,如图:
![](http://yunkus.com/wp-content/uploads/2017/02/prettify-js-a-websit-code-highlight-plugin-1.png)
要解决这个问题,你只需要往样式表里面添加下面的样式就可以了:
这个插件的作用方法也非常简单,你只需要引用相关文件,然后再启用它就可以。
<!-- 引入 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。
授课时间
prettyprint :标记作用范围
linenums:是否显示行号
启用完之后,你就可以在你的写文章的时候,用
<pre></pre>把代码包裹起来就可以看到美美的高亮效果了。
有时候你会遇到一些奇葩的问题,比如:为什么不是第行前端都会显示行号,而只是每隔五行就会出行一个行号,如图:
![](http://yunkus.com/wp-content/uploads/2017/02/prettify-js-a-websit-code-highlight-plugin-1.png)
要解决这个问题,你只需要往样式表里面添加下面的样式就可以了:
pre.prettyprint ol.linenums li {
list-style-type: decimal;
}
相关文章推荐
- 五、Google Code Prettify:实现代码高亮的JS库
- bootstrap设计网站中添加代码高亮插件
- 使用 highlight.js 高亮网站代码
- sublime中如何安装vue.js插件,并使代码高亮显示
- 给大家推荐一款高大上的代码高亮插件(sublime,github风格)——highlight.js
- 使用Sublime Text 3的HTML-CSS-JS Prettify插件格式化代码
- Sublime Text 3的格式化代码插件 HTML-CSS-JS Prettify
- 代码高亮插件prettyPrint.js使用与下载
- tinyMCE插件开发之插入html,php,sql,js代码 并代码高亮显示
- 给大家推荐一款高大上的代码高亮插件(sublime,github风格)――highlight.js
- highlight.js 代码高亮插件
- 基于js与flash实现的网站flv视频播放插件代码
- 用UEditor富文本web编辑器结合代码高亮插件prism.js美化你的博客
- Tinymce 代码高亮插件(google-code-prettify)语法高亮
- bootstrap设计网站中添加代码高亮插件
- 使用Sublime Text 3的HTML-CSS-JS Prettify插件格式化代码
- 基于js与flash实现的网站flv视频播放插件代码
- 【highlight.js】页面代码高亮插件
- 使用Sublime Text 3的HTML-CSS-JS Prettify插件格式化代码
- 使用Sublime Text 3的HTML-CSS-JS Prettify插件格式化代码