之前给大家推荐过两款代码高亮库，分别是 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 文件
|
1 2 |
<link href="prism.css" rel="stylesheet" /> <script src="prism.js"></script> |
2、添加标签
遵循 HTML5 标准，Prism 使用语义化的 <pre> 元素和 <code> 元素来标记代码区块。
|
1 2 3 4 |
[crayon-5e25bace139fa996883959 inline="true" ]<pre class="line-numbers"> <code class="language-markup"> </code> </pre> |
[/crayon]
页面上只要遇到类似上面的代码，就会被高亮。line-numbers便是显示行号，language-markup就是语言。
3、添加行号
需要实现行号效果，只需要在<pre>标签中加上line-numbers类即可。使用了 jQuery，也可以通过jQuery来添加行号。
|
1 2 3 |
<script type="text/javascript"> $('pre').addClass("line-numbers")； </script> |
示例代码
代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="keywords" content="prism,WordPress,代码高亮" /> <link rel='stylesheet' href='prism.css' type='text/css' /> <script type='text/javascript' src='prism.js'></script> </head> <body> <pre class="line-numbers"> <code class="language-javascript"> var Prism = require('prismjs'); var loadLanguages = require('prismjs/components/'); loadLanguages(['haml']); // The code snippet you want to highlight, as a string var code = "= ['hi', 'there', 'reader!'].join \" \""; // Returns a highlighted HTML string var html = Prism.highlight(code, Prism.languages.haml, 'haml'); </code> </pre> </body> </html> |
关于本站
本站是一个分享建站经验、SEO优化、互联网技术以及日常生活的个人生活博客。
评论