目录
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"
/>
这样即可简单的配置富文本编辑器中代码编辑部分高亮效果。但这个方法有个最大的缺陷就是输入代码无法做到实时高亮,必须等到代码输入完毕后才能实现高亮效果。但若对文本编辑要求不是很高,可以尝试用用。
总结
以上提到的方法为最简单的代码高亮,如果有更加深入或者复杂的需求,建议去官网看对应的官网文档或者查询其他相关资料,本文章所提到的方法均为个人拙见,仅供参考。😁😁😁😁😁😁