PrismJS,一款漂亮的代码高亮工具

PrismJS 是一款轻量级、可扩展的语法高亮显示工具,在支持现代 Web 标准基础下增加了更多可选的风格插件。

PrismJS 支持自定义扩展代码的语言、主题和插件选项,勾选自己常用的代码语言和主题风格以及增强插件,将定制好的代码文件 prism.css 和 prism.js  如下方式链接到页面,再使用 <pre><code> 编辑方式编写代码文章即可展现漂亮的代码高亮。

<pre><code class="language-css">p { color: red }</code></pre>

PrismJS 支持常见的 Markup+HTML(html+css+js),以及 java、python、docker、bash、nginx、powershell 等 183 种程序语言,并且增强插件上支持命令行模式(Command Line)、行高亮模式(Line highlight)和行序号模式(Line Numbers)等功能。

为什么选用Prism.js?

除了简单,小巧之外,还有以下优点

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

使用:

你需要引入prism.cssprism.js文件:

<!DOCTYPE html>
<html>
<head>
    ...
    <link href="themes/prism.css" rel="stylesheet" />
</head>
<body>
    ...
    <script src="prism.js"></script>
</body>
</html>

当然,不止这么多。Prism.js还支持其他上百种的编程语言。

在线测试:https://prismjs.com/test.html

给TA打赏
共{{data.count}}人
人已打赏
建站笔记

Flatsome – 多用途自适应WooCommerce电商主题

2022-6-1 11:28:25

建站笔记

简洁软件官网

2022-6-1 12:06:19

重要说明

本站资源大多来自网络,如有侵犯你的权益请联系管理员,发送邮件   68836010@qq.com  我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!


如果遇到特殊找不到下载链接的文章,或者不能下载,或者解压失败,先不要忙。 有可能有事情或者在睡觉不能及时的回复您,QQ留言后, 请耐心等待即可! QQ:68836010  

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧