让你代码高亮的利器——Prism.js，初学者也能轻松上手！
2024-02-12 15:07:11
在前端开发中，代码高亮是一个非常重要的功能，它可以帮助开发者更轻松地阅读和理解代码。Prism.js 是一款轻量级、易于使用的代码高亮工具，可以帮助你轻松地让代码在网页上以高亮的方式显示出来。
1. 安装Prism.js
要在你的网页中使用 Prism.js，你需要先安装它。你可以从 Prism.js 的官方网站下载最新的版本，或者使用 npm 或 Bower 等包管理工具来安装。
// 使用 npm 安装 Prism.js
npm install prismjs --save
// 使用 Bower 安装 Prism.js
bower install prism
2. 引入Prism.js
在安装了 Prism.js 之后，你需要在你的 HTML 页面中引入 Prism.js 的 CSS 和 JavaScript 文件。你可以直接从 Prism.js 的 CDN 链接引入，也可以将 Prism.js 的文件下载到你的本地服务器上，然后在你的 HTML 页面中引入。
<!-- 直接从 Prism.js 的 CDN 链接引入 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/prism.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/prism.min.js"></script>
<!-- 从本地服务器引入 -->
<link rel="stylesheet" href="prism.min.css">
<script src="prism.min.js"></script>
3. 使用Prism.js
Prism.js 提供了多种方法来高亮代码。最简单的方法是直接将代码写在 <pre> 和 <code> 标签中，然后在 <pre> 标签中添加 class="language-xxx" 属性，其中 xxx 是代码的语言名称。
<pre class="language-javascript">
var name = 'John Doe';
console.log(name);
</pre>
Prism.js 还提供了一个更强大的方法来高亮代码，那就是使用 Prism.highlight() 函数。这个函数可以让你更灵活地控制代码高亮的方式。
Prism.highlightAll();
4. Prism.js 的主题
Prism.js 提供了多种不同的主题，你可以根据自己的喜好选择一个主题。要使用 Prism.js 的主题，你需要在引入 Prism.js 的 CSS 文件之后，再引入主题的 CSS 文件。
<link rel="stylesheet" href="prism-tomorrow.css">
5. Prism.js 的插件
Prism.js 还提供了多种插件，你可以根据自己的需要安装和使用这些插件。例如，你可以安装 line-numbers 插件来为代码添加行号，或者安装 copy-to-clipboard 插件来让用户可以一键复制代码。
Prism.plugins.copy-to-clipboard();
总结
Prism.js 是一款轻量级、易于使用的代码高亮工具，它可以帮助你轻松地让代码在网页上以高亮的方式显示出来。Prism.js 提供了多种不同的主题和插件，你可以根据自己的喜好和需求来选择和使用。
