Prism.js 是一个轻量级、可扩展的语法高亮库,广泛用于前端开发中,为代码块提供语法高亮功能,能够提升代码的可读性。它支持多种编程语言,具有简单易用的特点,可以轻松集成到网页中。接下来,我们将深入探讨如何使用 Prism.js,并给出相关代码示例。
一、引入 Prism.js
首先,我们需要在我们的网页中引入 Prism.js。可以通过 CDN 方式引入,以下是一个简单的 HTML 示例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prism.js 示例</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
</head>
<body>
<pre><code class="language-javascript">
// JavaScript 代码示例
function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('世界'); // 输出: Hello, 世界!
</code></pre>
</body>
</html>
在这个示例中,我们引入了 Prism.js 的 CSS 和 JS 文件,并在一个 <pre>
标签中使用了一个 <code>
标签包裹我们的 JavaScript 代码。在 <code>
标签中,我们使用 class="language-javascript"
来指定所用的语言。
二、支持的语言与添加自定义语言
Prism.js 默认支持多种编程语言,包括 HTML、CSS、JavaScript、PHP、Python 等。如果需要支持其他语言,可以通过引入相应的语言文件。例如,如果我们想要支持 Python,可以在 <head>
中引入:
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
然后我们可以如下使用 Python 代码:
<pre><code class="language-python">
def greet(name):
print(f"Hello, {name}!")
greet('世界') # 输出: Hello, 世界!
</code></pre>
三、添加自定义样式
Prism.js 也允许我们自定义主题样式。我们可以在 CSS 部分添加自定义样式,以便符合网站的整体风格。例如,我们可以通过调整背景色和字体颜色来定制代码块的样式:
pre {
background-color: #282c34;
padding: 20px;
border-radius: 5px;
overflow: auto;
}
code {
color: #61dafb;
}
这样,我们的代码块在视觉上会有一个更契合整体风格的外观。
四、进阶用法
除了基本的语法高亮外,Prism.js 还支持一些进阶功能,如行号、自动高亮等。如果想要在代码块中显示行号,可以引入行号插件:
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
然后在 <pre>
标签上添加 class="line-numbers"
:
<pre class="line-numbers"><code class="language-javascript">
// JavaScript 代码示例
function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('世界'); // 输出: Hello, 世界!
</code></pre>
这样,代码块的行号将会自动显示出来。
结论
Prism.js 是一个强大且灵活的语法高亮库,能够帮助开发者更好地展示代码。通过简单的引入和配置,您便可以为您的网页添加引人注目的代码高亮效果。希望这篇文章能帮助您快速上手 Prism.js,并在您的前端项目中更好地使用它。