首页 » 网站建设 »

用highlight.js实现代码高亮的优缺点

2017年11月2日 / 128次阅读
JavaScript

打开支付宝首页,搜索“529018372”,即可领取红包!可重复领。

上个月,云上小悟博客将代码高亮部分的实现方式切换到了highlight.js(https://highlightjs.org/)。之前麦新杰使用过SyntaxHighlighter EvolvedCrayon,这两个都是WordPress的插件,有些臃肿。现在改用纯js和css的方式,感觉好了点,比如代码更规范,自己更能控制。下面介绍一下个人感觉用highlightjs实现代码高亮的一些优缺点。

 

highlight.js的优点

1, 可定制想要高亮的编程语言

麦新杰觉得highlight.js最大的优点,也是它最大的特点,就是可定制一套满足你自己使用的js代码。比如你的技术网站(或栏目或标签等分类下)只需要支持PHP语言,你就可以到highlight的官网去定制一个只能解析PHP语言的js代码,给你的网站用。js代码支持的编程语言越少,js文件就越小,这意味着更快,你用很小的代价实现了代码高亮。

如果你准备使用官方提供的CDN,那么就无法使用这个定制功能。官方提供的CDN是给大家用的,包含了二十几种最常用的语言的支持。这个要自己权衡了,用官方的CDN也挺快的,而在自己的网站本地安装,js文件会非常小。

2, 有多种渲染风格可选择

highlight.js使用css来渲染代码,实现代码高亮。官方提供了很多种css风格可供选择。

3, 使用<pre><code>元素显示源代码

这就是我前文提到的规范性。很多代码高亮js库,都是使用这个组合。如果后面你想使用别的js库,html部分的代码有更高的概率不需要改变。

 

highlight.js的缺点

1, 不能显示行号

高亮的代码不支持行号的显示。我看网上有些高手,自己写一段js代码,来实现行号的显示。

2, 不能实现突出特定行

比如你想让代码的突出显示第3行到第5行(这几行是这段代码的关键),这个也实现不了,要自己加代码。

 

以上就是用highlight.js实现代码高亮的优缺点。highlight.js已经存在网络上十几年了,支持的语言越来越多。

本文链接:http://www.maixj.net/wz/highlight-js-17153
云上小悟 麦新杰(QQ:1093023102)

相关文章

评论是美德

无力满足评论实名制,评论对非实名注册用户关闭,有事QQ:1093023102.


前一篇:
后一篇:

栏目精选

云上小悟,麦新杰的独立博客

Ctrl+D 收藏本页

栏目

AD

ppdai

©Copyright 麦新杰 Since 2014 云上小悟独立博客版权所有 备案号:苏ICP备14045477号-1。云上小悟网站部分内容来源于网络,转载目的是为了整合信息,收藏学习,服务大家,有些转载内容也难以判断是否有侵权问题,如果侵犯了您的权益,请及时联系站长,我会立即删除。

网站二维码
go to top