Prismjs：一个高质量的语法高亮库

小蓝 • 2024-12-29 12:51 • 编程

语法高亮在前端开发中扮演了重要的角色，常用来在博客、文档、代码分享平台中突出显示关键字和语法结构，以便更好地展示代码。Prismjs 是一个轻量级的、可扩展的、高质量的语法高亮库。

一、Prismjs框架

Prismjs 能够处理多种语言和文本格式，如HTML、CSS、JavaScript、Markup 和 HTTP 等。它的核心包含了语法高亮和错误提示等基本功能，并提供了多种插件和主题，以供扩展和个性化定制。Prismjs框架的使用十分简单，只需要在html文件中引入prism.js, 并在需要高亮显示的块级元素中使用pre和code标签就行。

<hr/> body { background-color: #fff; } console.log("Hello, world!");

二、Prismjs代码美化仿mac

代码的视觉效果需要满足更高的要求，Prismjs 的可扩展性可以大大提高美化代码的效果。比如我们可以使用 “prism-material-themes” 模仿Mac的主题美化代码：

三、Prismjs行号

行号是更好的代码索引和辨识，在代码块前加入行号更是一大亮点，十分实用。Prismjs建议我们添加插件 “prism-line-numbers”，即可轻松实现行号：

console.log("This is a test.")

四、Prismjs特定语言

Prismjs支持许多具有语法结构的语言，例如我们可以使用 “prism-python” 插件支持Python语言：

# This is a test. print("Hello, World!")

五、Prismjs老是卡住

Prismjs使用起来很简单，但对于一些较大的代码块可能会导致读取闪烁或冻结的问题，这些问题可能会更加明显在旧版的浏览器中。为了解决这个问题，我们应该使用异步加载的方式初始化 Prismjs，并且懒加载代码模块，以免代码块过大导致初始化时卡顿。

六、Prismjs和highlight

Prismjs 和 highlight.js 都是常用于代码高亮的js库，它们的技术实现和代码结构都很相似。但是，Prismjs比highlight.js具有更好的性能和更少的依赖关系，考虑到不同的实际情况，选择哪一种库是个人的决定。

七、Prismjs做自定义指令

Prismjs支持自定义指令，可用于扩展当前语法高亮的库。在代码块添加指令 data-prism-src 和 data-prism-async 可以自定义加载指定内容和异步加载。


  

八、Prismjs显示行号和语言
显示行号和语言需要在css中添加指定样式

  pre.line-numbers { position: relative; padding-left: 3.8em; counter-reset: linenumber; }
  pre.line-numbers > code { position: relative; }
  pre.line-numbers > code:before { content: counter(linenumber); counter-increment: linenumber; position: absolute; left: -3.6em; top: 0px; color: #ccc; font-size: 0.8em; }
  .token { font-weight: bold; color: #1e88e5; }
  .token.operator { color: #1e88e5; }
  .token.comment, .token.prolog, .token.doctype, .token.cdata { color: #1e88e5; }
  .token.string, .token.attr-value { color: #43a047; }
  .token.punctuation { color: #757575; }
  .language-css .token.property, .language-css .token.boolean, .language-css .token.number { color: #f4511e; }
  .language-css .token.selector { color: #9a4b9d; }
  .language-css .token.keyword { color: #1e88e5; }
  .token.tag .token.tag { color: #555; }


再次强调，Prismjs是一个轻量级的高质量的语法高亮库，它可以轻松地解决我们在项目中的编码高亮问题，并提供了丰富的扩展插件和主题，让我们可以更加方便地打造自己的代码美化。
                                                        原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/300383.html