3分钟搞定代码高亮：vue-quill-editor集成highlight.js完全指南

3分钟搞定代码高亮：vue-quill-editor集成highlight.js完全指南

【免费下载链接】vue-quill-editor @quilljs editor component for @vuejs(2) 项目地址: https://gitcode.com/gh_mirrors/vu/vue-quill-editor

你是否还在为富文本编辑器中的代码块显示杂乱无章而烦恼？是否想让技术文章中的代码示例像专业博客一样美观易读？本文将带你通过简单三步，为vue-quill-editor集成highlight.js实现语法高亮，让代码展示效果提升一个档次。

准备工作：了解项目结构

在开始之前，先熟悉一下vue-quill-editor的核心文件结构：

• 编辑器组件核心代码：src/editor.vue
• 项目入口文件：src/index.js
• 项目依赖配置：package.json

通过查看package.json可知，项目已内置highlight.js依赖（版本^9.12.0），无需额外安装。

第一步：引入highlight.js资源

首先需要在项目中引入highlight.js的样式文件。highlight.js提供了多种代码高亮主题，你可以根据项目风格选择合适的主题。以下是引入"atom-one-dark"主题的示例：

// 在入口文件[src/index.js](https://link.gitcode.com/i/8477c5497bec1def7eee9da9b2a91a56)中添加
import 'highlight.js/styles/atom-one-dark.css'
import hljs from 'highlight.js'

// 将hljs挂载到window对象，供全局使用
window.hljs = hljs

第二步：配置Quill编辑器

接下来需要配置Quill编辑器，使其支持代码块格式并应用高亮效果。修改src/editor.vue中的Quill配置：

// 在defaultOptions的modules配置中添加代码块支持
modules: {
  toolbar: [
    // 保留原有配置...
    ['code-block']  // 添加代码块按钮
  ],
  // 添加语法高亮模块
  syntax: true
}

第三步：实现代码高亮逻辑

最后，在编辑器内容变化时触发代码高亮。在src/editor.vue的text-change事件中添加高亮处理：

// 在text-change事件处理函数中添加
this.quill.on('text-change', (delta, oldDelta, source) => {
  // 保留原有代码...
  
  // 代码高亮处理
  setTimeout(() => {
    const blocks = this.$refs.editor.querySelectorAll('pre code');
    blocks.forEach(block => {
      window.hljs.highlightBlock(block);
    });
  }, 0);
});

效果验证与扩展

完成以上配置后，重新编译项目即可看到代码高亮效果。你可以通过以下命令运行测试用例验证功能：

npm run test

测试文件位于test/unit/specs/VueQuillEditor.spec.js。

如果需要切换其他高亮主题，只需修改highlight.js的样式文件引入路径。所有可用主题可在node_modules/highlight.js/styles/目录中查看。

总结

通过本文介绍的三个步骤，我们成功为vue-quill-editor集成了highlight.js代码高亮功能：

1. 引入highlight.js资源文件
2. 配置Quill编辑器支持代码块
3. 实现代码高亮逻辑

这种实现方式充分利用了项目已有的依赖，通过简单配置即可获得专业级的代码展示效果。完整的实现代码可参考项目的src/目录下相关文件。

官方文档：README.md 开发配置：config/ 测试用例：test/

【免费下载链接】vue-quill-editor @quilljs editor component for @vuejs(2) 项目地址: https://gitcode.com/gh_mirrors/vu/vue-quill-editor