Vue项目代码高亮篇（含VueQuil中代码部分高亮显示）

目录

• highlight.js简介
• 在Vue中使用（以Vue3为例）
• 在vueup/vue-quill
• 总结

---

highlight.js简介

Highlight.js是一个用JavaScript编写的语法高亮库，它能够在浏览器和服务器上工作，几乎可以处理任何标记，并且不依赖于任何框架。它具有自动语言检测功能，并且支持超过190种语言和多种主题 。截至2024年3月7日，最新版本为11.9.0，它支持自动语言检测、适用于任何HTML标记、零依赖项、兼容任何JS框架，并且支持Node.js。

官网：highlight.js (highlightjs.org)

原生使用：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

引入之后可以在页面脚本文件中用hljs.highlightAll();来自动高亮页面上所有的代码块 。 

Node中使用：

npm i highlight.js

const hljs = require('highlight.js');
const html = hljs.highlightAuto('<h1>Hello World!</h1>').value;

 指定特定语言高亮

const html = hljs.highlight('<h1>Hello World!</h1>', {language: 'xml'}).value;

---

提示：以下是本篇文章正文内容，下面案例可供参考

在Vue中使用（以Vue3为例）

在Vue中实现代码高亮，推荐使用 highlightjs/vue-plugin插件，这是一款专门用于Vue项目中代码高亮的插件，简单好用，无需过多配置。

官网：highlightjs/vue-plugin: Highlight.js Vue Plugin (github.com)

 基本使用：

npm install highlight.js
npm install @highlightjs/vue-plugin

import hljsVuePlugin from "@highlightjs/vue-plugin"; // 导入组件
import hljs from "highlight.js/lib/core"; // 导入highlight.js
import 'highlight.js/styles/stackoverflow-light.css'// 导入高亮主题样式

// 导入语言模块
import javascript from "highlight.js/lib/languages/javascript";
import java from "highlight.js/lib/languages/java";
import sql from "highlight.js/lib/languages/sql";
import xml from "highlight.js/lib/languages/xml";
import html from "highlight.js/lib/languages/vbscript-html";
import json from "highlight.js/lib/languages/json";
import yaml from "highlight.js/lib/languages/json";
// 注册语言
hljs.registerLanguage("javascript", javascript);
hljs.registerLanguage("java", java);
hljs.registerLanguage("yaml", yaml);
hljs.registerLanguage("json", json);
hljs.registerLanguage("sql", sql);
hljs.registerLanguage("xml", xml);
hljs.registerLanguage("html", html);

const app = createApp(App)
app.use(hljsVuePlugin).mount('#app')

到此，在项目中可以通过v-html或者v-pre插入的代码都可以实现高亮效果。 

在vueup/vue-quill

vueup/vue-quill简介：VueQuill是一个基于Vue.js的富文本编辑器插件，它通过与Quill编辑器的集成，为开发者提供了一个功能强大且易于使用的富文本编辑解决方案。Quill是一个现代化的富文本编辑器，支持多种格式和嵌入对象，如图片、视频和链接等 。

官网：vueup/vue-quill: Rich Text Editor Component for Vue 3. (github.com)

npm i @vueup/vue-quill
npm i highlight.js

import { QuillEditor } from "@vueup/vue-quill"
import "@vueup/vue-quill/dist/vue-quill.snow.css"
import hljs from "highlight.js"
import "highlight.js/styles/monokai-sublime.css"

 

const Options = {
  theme: "snow",
  placeholder: "请在这里输入",
  modules: {
    toolbar: {
      container: [
        // [{ 'header': 1 }, { 'header': 2 }], // 标题 —— 独立平铺
        [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题 —— 下拉选择
        [{ size: ["small", false, "large", "huge"] }], // 字体大小
        [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
        ["blockquote", "code-block"], // 引用  代码块
        // 链接按钮需选中文字后点击
        ["link", "image", "video"], // 链接、图片、视频
        [{ align: [] }], // 对齐方式// text direction
        [{ indent: "-1" }, { indent: "+1" }], // 缩进
        ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
        [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
        [{ script: "sub" }, { script: "super" }], // 下标/上标
        [{ font: [] }], //字体
        ["clean"] // 清除文本格式
      ]
    },
    syntax: {
      highlight: (text: string) => {
        return hljs.highlightAuto(text).value // 这里就是代码高亮需要配置的地方
      }
    }
  }
}

<QuillEditor v-model:content="content"
            ref="quillRef"
            contentType="html"
            :options="Options"
          />

这样即可简单的配置富文本编辑器中代码编辑部分高亮效果。但这个方法有个最大的缺陷就是输入代码无法做到实时高亮，必须等到代码输入完毕后才能实现高亮效果。但若对文本编辑要求不是很高，可以尝试用用。

---

总结

以上提到的方法为最简单的代码高亮，如果有更加深入或者复杂的需求，建议去官网看对应的官网文档或者查询其他相关资料，本文章所提到的方法均为个人拙见，仅供参考。😁😁😁😁😁😁