highlight.js 和29套谷歌代码高亮 prettify.js 教程
2017-02-06| 程成| 1588| 0| jQuery/JS

1、highlight.js(https://highlightjs.org/


(1)引入 highlight.js 文件


我们需要在页面中同时引入一个 js 文件和一个 css 文件(在这里我们省点儿力气,直接使用 Bootstrap中文网 提供的 CDN 链接,既简单又提升加载速度):


http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js



(2)引入 css 文件



77套官网皮肤https://highlightjs.org/static/demo/



(3)前面的准备工作做完了,现在还有最后一步,就是:调用 hihglight.js 解析代码,完成高亮工作。


只需要添加下面js:


<script>
hljs.initHighlightingOnLoad();
</script>



这样,highlight.js 就会自动寻找



<pre><code></code></pre >


 

代码块并完成代码高亮了!


 


注:度编辑器注意事项


blob.png


因为百度编辑器的html代码格式如上,不是highlight要求的格式,所以无法高亮显示,可以通过自己修改编辑器代码实现,或者使用下面介绍的prettifyjs高亮显示。



注:书写 markdown 时的注意事项


对于大段的代码建议采用 gfm 格式,如下:


    ```    这里放代码    ```



highlight.js 可以自动识代码所用的编程语言,但是,电脑不如人脑啊!识别错误的几率很高,所以,为了安全起见,最好标识一下所用的编程语言,例如:


    ```html    <DOCTYPE html>    <html>    </html>    ```


前面说过,highlight.js 支持 71 种编程语言,既包括常见的 C、java、javascript、ruby、python、html、css等,还支持 apache、nginx 这些配置文件的语法,所以,在你书写这些代码的时候,可以看看 highlight.js 是否支持所用的语法,然后标注对应的语言,让 highlight.js 完美的对其高亮显示吧。



2、prettify.js(https://jmblog.github.io/color-themes-for-google-code-prettify/


(1)引入 prettify.js 文件


可以复制我的


http://www.cc1021.com/Public/plugins/prettify/prettify.js


或者官方


https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js



(2)引入css文件,自己从29套选择一套,有亮的和暗的两种选择



(3)添加下面的js代码


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

这样就可以高亮显示了,prettifyjs寻找的是<pre></pre>标签


以上就是我总结的highlight.js和29套谷歌代码高亮prettify.js


上一篇:没有上一篇了
×
作者:程成
QQ:492245711