使用prism.js使代码高亮更加美观

VHVZS • 2025-01-11 16:27 • 编程

一、什么是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>

原创文章，作者：VHVZS，如若转载，请注明出处：https://www.506064.com/n/317676.html

使用prism.js使代码高亮更加美观

一、什么是prism.js

二、如何使用prism.js

三、使用自定义主题

四、使用其他功能

相关推荐

发表回复