【前端】语法高亮 Prism.js 使用
Prism.js 是一个轻量级的语法高亮工具，可以帮助开发者在网页上展示代码段并实现语法高亮。以下是如何使用 Prism.js 进行语法高亮的简单示例：
- 在 HTML 中引入 Prism.js 库：
<!DOCTYPE html>
<html>
<head>
<title>Prism.js Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
</head>
<body>
<pre><code class="language-javascript">
// 这是一段 JavaScript 代码
function helloWorld() {
console.log('Hello, World!');
}
helloWorld();
</code></pre>
</body>
</html>在上述代码中，我们通过 <script> 标签引入了 Prism.js 的 JavaScript 文件，并通过 <link> 标签引入了相应的主题样式。在 <pre> 和 <code> 标签之间，我们定义了一段需要高亮的代码，并且使用 language-javascript 类来指定代码的语言。
- 使用 Prism.js 的 API 进行高亮：
如果你想要在文档加载后手动高亮代码，可以使用 Prism.js 提供的 API。
<script>
document.addEventListener('DOMContentLoaded', function() {
Prism.highlightAll(); // 高亮页面内所有代码段
});
</script>Prism.highlightAll() 方法会查找页面上所有的 <pre><code> 标签，并尝试根据其中的 language-* 类来应用相应的语法高亮。
确保在调用 Prism.highlightAll() 之前，页面的 DOM 已经完全加载。通常我们会将这段代码放在 DOMContentLoaded 事件的监听器中，或者将脚本放在页面的 <body> 标签的底部。
评论已关闭