可搜索,可注册,可登录,致敬逗比大佬!尽在救援版逗比根据地 dbgjd.com
投稿文章 | 广告合作 | Telegram 群组 / 公告频道 / 使用教程

highlight.js – 代码高亮插件

News mlone11978 51℃ 0评论

highlight.js 是一款 javascript 代码高亮插件(其它同类插件推荐 Google Prettify、Prism code 等),多主题可选,也算简单易用(虽然使用过程中发现对 shell 语言的支持很让人着急)。

本博客使用 highlight.js 提供代码高亮。本文介绍其基本用法。

选择主题

highlight.js 的主题还是比较丰富的,你可以在 demo 中在线预览这些主题。本站使用 github-gist 主题。

看好你想要的主题后,把例如 https://cdn.bootcss.com/highlight.js/9.2.0/styles/github-gist.min.css 中的 github-gist 字段替换成你想要的主题名字,这是你之后引入 css 主题时使用的 cdn 地址(当然你也可以自己转存)。

引入插件

<head></head> 标签内引入 js 插件和 css 主题:

<link href="https://cdn.bootcss.com/highlight.js/9.2.0/styles/github-gist.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/highlight.js/9.2.0/highlight.min.js"></script> 

然后,在引入文件加载完毕后进行初始化。还是引入到 head 标签内,并建议就把这段跟在上面代码后面:

hljs.initHighlightingOnLoad(); 

好了,大功告成。效果可以参考本站。

转载请注明:逗比根据地 » highlight.js – 代码高亮插件

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址