威言威语
我愿像茶,苦涩留心,清香予人。
威言威语
当前位置: 首页 > 设计 > 正文

使用Prism.js来实现代码高亮

Prism 是一个轻量级、可扩展的语法高亮库,使用现代化的 Web 标准构建。使用 Prism.js 可以快速为网站添加代码高亮功能,支持超过上百种编程语言,还支持多种插件,是简洁、高效的代码高亮解决方案。
使用Prism.js来实现代码高亮
目录
文章目录隐藏
  1. 为什么选择 Prism.js
  2. 如何使用

之前用过highlight.js来实现代码高亮,现在更加喜欢用Prism.js。Prism 是一个轻量级、可扩展的语法高亮库,使用现代化的 Web 标准构建。使用 Prism.js 可以快速为网站添加代码高亮功能,支持超过上百种编程语言,还支持多种插件,是简洁、高效的代码高亮解决方案。

为什么选择 Prism.js

简单易用 引用 prism.css 和 prism.js,使用合适的 HTML5 标签(code.language-xxxx),搞定!

天生伶俐 语言的 CSS 类是可继承的,所以你只需定义一次就能应用到多个代码片段。

轻如鸿毛 核心代码压缩后只有 2KB。每添加一个语言平均增加 0.3-0.5KB,主题样式在 1KB 左右。

快如闪电 如果可能,支持通过 Web Workers 实现并行。

轻松扩展 定义新语言或扩展现有语法,或者新增功能都非常简单。

丰富样式 所有的样式通过 CSS 完成,并使用合理的类名如:.comment, .string, .property 等。

如何使用

导入引擎和样式

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

prism.jsprism.css你都可以自己在 https://prismjs.com/download.html 上选择配置,支持的语言有很多,选择你自己需要的语言;也有很多插件,比如行号,代码复制,代码预览,代码语言等,都可以自行选择。官方也提供多种主题配色,选择适合自己的。

选择好之后下载对应的 js 和 css 来引用到你的项目中。

在文章中插入代码

Prism.js 推荐使用 w3c 推荐的标准的在页面中嵌入代码的方式,像下面这样:


<pre>
  <code class="language-xxx">
这里写代码
  </code>
</pre>

language-xxx中的xxx是语言的名字。这时代码就会被 Prism.js 自动识别并高亮。

显示行号

Prism.js 的行号是作为插件提供的,它需要一个开关来启用它:在 <pre> 标签上加上一个 line-numbers 类。


<pre class="line-numbers">
  <code class="language-xxx">
这里写代码
  </code>
</pre>
转义Prism中的尖括号 < >

假如发表类似html代码,会有尖括号 < >,直接使用会有问题,需要进行转义,需要使用 &lt;&gt; ,而不是 <>

您可能还会对这些文章感兴趣!

使用Prism.js来实现代码高亮:目前有 3 条评论

  1. 大武汉
    板凳
    大武汉:搜狗高速浏览器 Windows 7

    不喜欢五颜六色的颜色,哈哈,我就弄个背景和复制按钮

    2023-02-01 16:59 回复
    • William
      WilliamFirefox 109.0 Windows 10

      @大武汉哈哈,各有所好,他这个颜色可以自己定义,不选那么花哨的就行,这个js插件还是不错的。

      2023-02-01 17:29 回复
  2. 梧桐识嘉树
    沙发
    梧桐识嘉树:枫树极速浏览器 2.0.1.40 Windows 7

    Prism.js确实挺好用,虽然小巧但是各项功能都有。

    2008-11-15 12:27 回复

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

gravatar

question razz sad smile redface biggrin eek shock confused cool lol mad rolleyes wink cry