使用 Prism.js 实现代码语法高亮

2019年6月2日16:01:28 评论 677

之前给大家推荐过两款代码高亮库,分别是 code-prettify 和 Crayon Syntax Highlighter,今天给大家推荐的是另一个代码高亮库Prism.js。

一、介绍

Prism.js 是一款轻量的、可以定制的代码高亮显示插件,官网:http://prismjs.com,使用 Prismjs 可以快速为网站添加代码高亮功能。Prism.js 采用自定义下载,支持超过 100 多种编程语言,还支持很多种插件,目前有8种主题可供选择,是简洁、高效的代码高亮解决方案。

二、下载

访问官网下载页面:

官方网站下载

由四部分构成:

  • 核心代码(Core)
  • 主题(Themes)
  • 支持高亮的语言(Languages)
  • 需要的插件(Plugins)

下载:

选择 Themes、Languages 及 Plugins 后,点击底部的下载按钮,会得到  prism.css prism.js两个文件。

三、配置及使用

1、首先引入 prism.css 和 prism.js 文件

2、添加标签

遵循 HTML5 标准,Prism 使用语义化的 <pre> 元素和 <code> 元素来标记代码区块。

[/crayon]
页面上只要遇到类似上面的代码,就会被高亮。line-numbers便是显示行号,language-markup就是语言。

3、添加行号

需要实现行号效果,只需要在<pre>标签中加上line-numbers类即可。使用了 jQuery,也可以通过jQuery来添加行号。

示例代码

代码:

本文已通过「原本」原创作品认证,未经作者授权请勿直接转载,负责将依法追究其法律责任。
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: