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

最新推荐文章于 2024-09-03 08:45:56 发布

木子欢儿

最新推荐文章于 2024-09-03 08:45:56 发布

阅读量8.8k

点赞数

本文链接：https://blog.csdn.net/muzihuaner/article/details/121122281

版权

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

PrismJS 支持自定义扩展代码的语言、主题和插件选项，勾选自己常用的代码语言和主题风格以及增强插件，将定制好的代码文件 prism.css 和 prism.js 如下方式链接到页面

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.17.1/themes/prism.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.17.1/themes/prism-twilight.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.17.1/themes/prism-dark.min.css">
    
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.17.1/prism.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.17.1/components/prism-clike.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.17.1/components/prism-c.min.js"></script>

再使用 <pre><code> 编辑方式编写代码文章即可展现漂亮的代码高亮。

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

完整功能预览页面：Examples ▲ Prism (prismjs.com)

官方网站：https://prismjs.com