JS库--Prism

「爱情、让人受尽委屈。」 2022-12-18 00:48 222阅读 0赞

原文网址：[JS库--Prism\_IT利刃出鞘的博客-CSDN博客\_prism库][JS_--Prism_IT_-CSDN_prism]

# 其他网址 #

> [漂亮的代码语法高亮插件Prism.js简单使用文档\_严颖专栏 - SegmentFault 思否][Prism.js_ - SegmentFault]
> 
> 官网：[Prism][]  
> 官网在线试用：[https://prismjs.com/test.html][https_prismjs.com_test.html]

# 简介 #

**说明**

> 网页代码高亮插件/库非常多。如：SyntaxHighlighter ，Google Code Prettify，Highlight.js，WordPrees等等。

**为什么选用Prism.js？**

> 极致易用：引用 prism.css 和 prism.js，使用合适的 HTML5 标签（code.language-xxxx），搞定！  
> 天生伶俐：语言的 CSS 类是可继承的，所以你只需定义一次就能应用到多个代码片段。  
> 轻如鸿毛：代码压缩后只有 1.6KB。每添加一个语言平均增加 0.3-0.5KB，主题在 1KB 左右。  
> 快如闪电：如果可能，支持通过 Web Workers 实现并行。  
> 轻松扩展：定义新语言或扩展现有语法，或者新增功能都非常简单。  
> 丰富样式：所有的样式通过 CSS 完成，并使用合理的类名如：.comment, .string, .property 等。

**语法**

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

# 用法 #

> 在需要支持高亮的代码中，code或pre标签的class属性添加"language-xxx"，例如：class="language-javascript"

# 示例 #

**其他网址**

> [使用 prismjs 代码高亮库 - 乐天笔记][prismjs _ -]

**下载prism.js和prism.css**

> [Download ▲ Prism][Download _ Prism]
> 
> 注意：Languages：选择需要支持的语言；Plugins：选择要的功能（代码行数/高亮等）

**HTML**

>     <!DOCTYPE html>
>     <html lang="en">
>     <head>
>         <meta charset="UTF-8">
>         <title>Title</title>
>         <link rel="stylesheet" type="text/css" href="css/prism.css"/>
>     </head>
>     <body>
>     
>     <div>
>     <pre>
>     <code>
>         let a = 12;
>     </code>
>     </pre>
>     </div>
>     
>     <div>
>     <pre>
>     <code class="language-javascript line-numbers">
>         let a = 12;
>     </code>
>     </pre>
>     </div>
>     
>     <script type="text/javascript" src="lib/prism.js"></script>
>     </body>
>     </html>

**渲染结果**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70][]

[JS_--Prism_IT_-CSDN_prism]: https://knife.blog.csdn.net/article/details/109260307
[Prism.js_ - SegmentFault]: https://segmentfault.com/a/1190000009122617
[Prism]: https://prismjs.com/
[https_prismjs.com_test.html]: https://prismjs.com/test.html#language=markup
[prismjs _ -]: https://www.letianbiji.com/note/prismjs-highlighter.html
[Download _ Prism]: https://prismjs.com/download.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70]: /images/20221122/30bed20e7a5a4e6b8dbfbcc0afada029.png