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

WEB 夏日 2019年6月2日 77 次浏览 0 条评论

之前给大家推荐过两款代码高亮库，分别是 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 文件

 <link href="prism.css" rel="stylesheet" />
 <script src="prism.js"></script>

2、添加标签

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

<pre class="line-numbers">
    <code class="language-markup">
    </code>
</pre>

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

3、添加行号

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

<script type="text/javascript">
    $('pre').addClass("line-numbers")；
</script>

示例代码

代码：

<!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>

喜欢 1