likes
comments
collection
share

代码高亮：Prism.js与Highlight.js示例

作者站长头像
站长
· 阅读数 159

1. Prism.js

Prism.js是一个轻量级的代码高亮库，支持超过200种编程语言的语法高亮，并提供了丰富的主题和定制选项。Prism.js易于使用，可以直接在HTML页面中引入脚本文件，并通过简单的配置实现代码高亮。

使用示例：

首先，我们需要在HTML页面中引入Prism.js的核心文件和所需的语言扩展：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Prism.js 示例</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.css">
</head>
<body>

<pre><code class="language-javascript">
console.log('Hello, Prism.js!');
</code></pre>

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-javascript.min.js"></script>

</body>
</html>

以上示例展示了如何在HTML页面中使用Prism.js对JavaScript代码进行高亮。首先，在<head>中引入Prism.js的样式文件，然后在<body>中使用<pre><code>标签包裹代码，并添加对应的语言类名，最后引入Prism.js的脚本文件和所需的语言扩展。

2. Highlight.js

Highlight.js是另一个流行的代码高亮库，支持超过180种编程语言的语法高亮，并提供了多种主题和配置选项。Highlight.js易于使用，可以直接在HTML页面中引入脚本文件，并通过简单的配置实现代码高亮。

使用示例：

与Prism.js类似，我们需要在HTML页面中引入Highlight.js的核心文件和所需的语言扩展：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Highlight.js 示例</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">
</head>
<body>

<pre><code class="language-javascript">
console.log('Hello, Highlight.js!');
</code></pre>

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/languages/javascript.min.js"></script>

<script>
  hljs.highlightAll();
</script>

</body>
</html>

以上示例展示了如何在HTML页面中使用Highlight.js对JavaScript代码进行高亮。首先，在<head>中引入Highlight.js的样式文件，然后在<body>中使用<pre><code>标签包裹代码，并添加对应的语言类名，最后引入Highlight.js的脚本文件和所需的语言扩展，并调用hljs.highlightAll()函数来实现代码高亮。

3. React中的实现

下面我们来看看如何在React中使用Prism.js和Highlight.js进行代码高亮。

React中使用Prism.js：

首先，我们需要安装Prism.js的npm包：

npm install prismjs

然后，在React组件中引入Prism.js并进行代码高亮：

import React from 'react';
import Prism from 'prismjs';
import 'prismjs/themes/prism.css'; // 引入样式文件

function PrismComponent() {
  return (
    <pre>
      <code className="language-javascript">
        {`
          console.log('Hello, Prism.js!');
        `}
      </code>
    </pre>
  );
}

export default PrismComponent;

React中使用Highlight.js：

首先，我们需要安装Highlight.js的npm包：

npm install highlight.js

然后，在React组件中引入Highlight.js并进行代码高亮：

import React, { useEffect } from 'react';
import hljs from 'highlight.js';
import 'highlight.js/styles/default.css'; // 引入样式文件

function HighlightComponent() {
  useEffect(() => {
    hljs.highlightAll();
  }, []);

  return (
    <pre>
      <code className="language-javascript">
        {`
          console.log('Hello, Highlight.js!');
        `}
      </code>
    </pre>
  );
}

export default HighlightComponent;

4. 对比与结论

对比：

  • 易用性：Prism.js和Highlight.js都易于使用，但在React中，使用Highlight.js时需要调用hljs.highlightAll()函数进行手动高亮，而Prism.js则不需要。

  • 功能：两者在语法支持和主题定制方面都非常丰富，都能满足大多数项目的需求。Prism.js支持更多的编程语言，而Highlight.js提供了更多的主题选项。

转载自:https://juejin.cn/post/7369978126145749003
评论
请登录