Vue中如何进行代码高亮与语法着色？

╰半橙微兮° 2024-03-16 17:53 71阅读 0赞

## Vue中如何进行代码高亮与语法着色？ ##

在Vue的开发过程中，我们经常需要展示代码片段或者进行代码高亮与语法着色。Vue提供了多种方式来实现代码高亮与语法着色，本文将为你详细介绍这些方法。

![在这里插入图片描述][bc5575faafcb4a4586ee1b007535bf1a.png]

### 1. 使用prism.js进行代码高亮与语法着色 ###

prism.js是一个轻量级的代码高亮和语法着色库，支持多种语言和主题。我们可以在Vue中使用prism.js来实现代码高亮和语法着色。

#### 安装prism.js ####

我们可以使用npm安装prism.js：

npm install prismjs --save

#### 引入prism.js ####

在Vue的入口文件中引入prism.js：

import 'prismjs'
    import 'prismjs/themes/prism.css'

这里我们引入了prism.js和prism.css，后者是prism.js的主题样式文件，我们可以根据需求选择不同的主题。

#### 使用prism.js ####

在Vue组件中使用prism.js进行代码高亮和语法着色，我们需要在模板中使用`<pre>`和`<code>`标签，并添加`language-xxxx`类名，其中`xxxx`为代码语言，例如`language-javascript`表示JavaScript语言。

<template>
      <div>
        <pre>
          <code class="language-javascript">
            var message = 'Hello, world!'
            console.log(message)
          </code>
        </pre>
      </div>
    </template>

在这个例子中，我们使用了`<pre>`和`<code>`标签来包裹代码片段，并添加了`language-javascript`类名，表示这是一段JavaScript代码。prism.js会自动识别这个类名，并进行代码高亮和语法着色。

#### 自定义prism.js主题 ####

如果默认的prism.js主题不能满足你的需求，你可以使用prism.js提供的自定义工具生成自定义主题。

首先，我们需要安装prism-themes工具：

npm install prism-themes --save-dev

然后，在命令行中运行以下命令：

./node_modules/.bin/prism-themes --format css --themes tomorrow --out-file themes.css

这个命令会生成一个`themes.css`文件，包含了多种主题。我们可以在Vue的入口文件中引入这个文件：

import 'prismjs'
    import './themes.css'

这里我们将自定义主题文件命名为`themes.css`，并将其放在了Vue项目的根目录下。你可以根据自己的需求来修改文件名和文件路径。

#### 自定义prism.js语言 ####

如果prism.js默认的语言列表不能满足你的需求，你可以使用prism.js提供的自定义工具生成自定义语言。

首先，我们需要安装prismjs/components工具：

npm install prismjs/components --save-dev

然后，在命令行中运行以下命令：

./node_modules/.bin/prismjs --show-languages

这个命令会列出所有支持的语言。你可以在Vue的入口文件中引入所需的语言模块。

import 'prismjs'
    import 'prismjs/components/prism-javascript'

这里我们引入了prism.js的JavaScript语言模块。

### 2. 使用highlight.js进行代码高亮与语法着色 ###

highlight.js是另一个流行的代码高亮和语法着色库，支持多种语言和主题。我们可以在Vue中使用highlight.js来实现代码高亮和语法着色。

#### 安装highlight.js ####

我们可以使用npm安装highlight.js：

npm install highlight.js --save

#### 引入highlight.js ####

在Vue的入口文件中引入highlight.js：

import hljs from 'highlight.js/lib/core'
    import 'highlight.js/styles/github.css'

这里我们引入了highlight.js的核心模块和github主题样式文件，你可以根据需要选择不同的主题。

#### 使用highlight.js ####

在Vue组件中使用highlight.js进行代码高亮和语法着色，我们需要在模板中使用`<pre>`和`<code>`标签，并添加`hljs`和`xxx`类名，其中`xxx`为代码语言，例如`javascript`表示JavaScript语言。

<template>
      <div>
        <pre>
          <code class="hljs javascript">
            var message = 'Hello, world!'
            console.log(message)
          </code>
        </pre>
      </div>
    </template>

在这个例子中，我们使用了`<pre>`和`<code>`标签来包裹代码片段，并添加了`hljs`和`javascript`类名，表示这是一段JavaScript代码。highlight.js会自动识别这个类名，并进行代码高亮和语法着色。

#### 自定义highlight.js主题 ####

如果默认的highlight.js主题不能满足你的需求，你可以使用highlight.js提供的自定义工具生成自定义主题。

首先，我们需要安装highlight.js的自定义工具：

npm install highlight.js-tools --save-dev

然后，在命令行中运行以下命令：

./node_modules/.bin/hljs -t atom-one-light -d themes

这个命令会生成一个`themes`文件夹，包含了多种主题。我们可以在Vue的入口文件中引入这个文件夹：

import hljs from 'highlight.js/lib/core'
    import 'highlight.js/styles/atom-one-light.css'
    import 'highlight.js/lib/languages/javascript'
    import './themes/atom-one-light.css'

这里我们将自定义主题文件夹命名为`themes`，并将其放在了Vue项目的根目录下。你可以根据自己的需求来修改文件夹名和文件路径。

#### 自定义highlight.js语言 ####

如果highlight.js默认的语言列表不能满足你的需求，你可以使用highlight.js提供的自定义工具生成自定义语言。

首先，我们需要安装highlight.js的自定义工具：

npm install highlight.js-tools --save-dev

然后，在命令行中运行以下命令：

./node_modules/.bin/hljs -L

这个命令会列出所有支持的语言。你可以在Vue的入口文件中引入所需的语言模块。

import hljs from 'highlight.js/lib/core'
    import 'highlight.js/styles/github.css'
    import 'highlight.js/lib/languages/javascript'
    import './languages/my-language'

这里我们引入了highlight.js的JavaScript语言模块和自定义语言模块。

### 结论 ###

在Vue中使用prism.js和highlight.js进行代码高亮和语法着色是非常简单的。你可以根据自己的需求选择不同的库和主题，同时也可以自定义主题和语言。如果你想要更好的代码展示效果，推荐使用这两个库中的一个。

[bc5575faafcb4a4586ee1b007535bf1a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/0a577235dcef480db0bd12101525a84d.png