一、什么是prism.js
Prism是一个轻量级,简洁优美且非常易于使用的语法高亮插件。Prism可以在完全自定义的同时提供很多不错的默认主题。Prism适用于任何语言的编码,包括HTML,CSS,JavaScript,PHP等。
Prism是一个基于JavaScript的库,它可以使网页上的代码更具文艺性和美学感,并提供了一种让开发人员们可以轻松使用的方式来实现语法高亮。
二、如何使用prism.js
需要先引入prism.js文件:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/themes/prism.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/prism.min.js"></script>
上面的链接只是一个示例,可以从官方网站下载更多的主题和插件。
接下来,在需要高亮显示代码的标签中,添加一个名为“language-XXXX”的class属性,XXXX为你想显示的代码语言的名字,如:
<pre><code class="language-javascript">
// JavaScript 代码
</code></pre>
以上示例添加了一个class属性为“language-javascript”的code标签,与JavaScript相关的代码将被高亮显示。
三、使用自定义主题
Prism提供了一些预定义的主题,但是我们也可以自定义我们自己的主题。步骤如下:
- 在 CSS 样式表中定义你想使用的颜色
- 定义要高亮的语言的规则
- 和规则相匹配的颜色方案
以下是一个简单的自定义 Prism 主题的示例:
/* 定义语言规则(language rules) */
.language-javascript {
color: black;
background: #fdf6e3;
}
/* 关键字高亮 */
.token.keyword {
color: #0066cc;
}
/* 字符串高亮 */
.token.string {
color: #009933;
}
四、使用其他功能
使用prism.js还有许多其他的功能,这里只是介绍其中的一些。如:
- 行数字
- 代码高亮标记
- 代码行数计数
在pre标签中添加属性data-line来启用行数字功能,如:
<pre data-line="1">
1: // JavaScript 代码
</pre>
按照自己的需要,在需要高亮的位置添加如下标记:
<mark class="highlight">highlighted text</mark>
然后通过CSS自定义高亮颜色,如:
.highlight {
background-color: yellow;
}
使用插件Line Highlight,可以实现高亮当前用户查看代码的行。首先需要在
标签中添加class属性“line-numbers”,如:<pre class="line-numbers"> <code class="language-css"> .example { color: red; } </code> </pre>
然后在HTML页面中引入prism-line-highlight.js,如:
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/plugins/line-highlight/prism-line-highlight.min.js"></script>