您的位置:

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


一、什么是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提供了一些预定义的主题,但是我们也可以自定义我们自己的主题。步骤如下:

  1. 在 CSS 样式表中定义你想使用的颜色
  2. 定义要高亮的语言的规则
  3. 和规则相匹配的颜色方案

以下是一个简单的自定义 Prism 主题的示例:

/* 定义语言规则(language rules) */
 .language-javascript {
  color: black;
  background: #fdf6e3;
}

/* 关键字高亮 */
.token.keyword {
  color: #0066cc;
}

/* 字符串高亮 */
 .token.string {
  color: #009933;
}

四、使用其他功能

使用prism.js还有许多其他的功能,这里只是介绍其中的一些。如:

  1. 行数字
  2. 在pre标签中添加属性data-line来启用行数字功能,如:

    <pre data-line="1">
        1: // JavaScript 代码
    </pre>
    
  3. 代码高亮标记
  4. 按照自己的需要,在需要高亮的位置添加如下标记:

    <mark class="highlight">highlighted text</mark>
    

    然后通过CSS自定义高亮颜色,如:

    .highlight {
      background-color: yellow;
    }
    
  5. 代码行数计数
  6. 使用插件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>