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

WEB评论9501字数 1593阅读模式

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

使用 Prism.js 实现代码语法高亮-图片1

一、介绍

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

二、下载

访问官网下载页面:

官方网站下载

使用 Prism.js 实现代码语法高亮-图片2

由四部分构成:

  • 核心代码(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>

本文已通过「原本」原创作品认证,转载请注明文章出处及链接。

WEB最后更新:2022-11-9
夏日阳光
  • 本文由 夏日阳光 发表于 2019年6月2日
  • 本文为夏日阳光原创文章,转载请务必保留本文链接:https://www.pieruo.com/73.html
匿名

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
确定

拖动滑块以完成验证