Electron中Quill JS语法高亮模块无法正常工作求助

我之前折腾过Electron整合Quill和highlight.js的语法高亮，踩了好几个坑，给你捋捋可能的问题和解决办法：

1. 先纠正Quill的配置方式 #

你当前把syntax直接设为require('highlight.js')是不对的，Quill的语法高亮模块只需要将syntax设为true，它会自动查找全局的hljs对象。正确的配置步骤应该是：

// 先导入highlight.js并挂载到全局window对象
const hljs = require('highlight.js');
window.hljs = hljs;

// 初始化Quill
const quill = new Quill('#editor', {
  modules: {
    syntax: true, // 这里设为true，不是直接传highlight.js实例
    toolbar: false
  },
  theme: 'snow'
});

2. 必须引入highlight.js的样式文件 #

语法高亮的视觉效果依赖highlight.js提供的CSS，你大概率只导入了JS部分，漏掉了样式。根据你的项目结构，有两种方式引入：

• 如果用打包工具（如Webpack/Vite），可以直接在JS里导入：

  import 'highlight.js/styles/github.css'; // 选一个你喜欢的主题样式
  

• 如果是直接在Electron的renderer HTML里引入，要注意路径的正确性：

  <link rel="stylesheet" href="./node_modules/highlight.js/styles/github.css">
  

  （如果你的项目打包成asar包，可能需要调整路径，或者把样式文件复制到静态资源目录）

3. 确保内容被标记为代码块 #

Quill的语法高亮只对带有code-block格式的内容生效，如果你只是普通输入文本，不会自动触发高亮。你需要手动给文本设置代码块格式：

• 如果有工具栏，可以点击代码块按钮；
• 没有工具栏的话，用Quill API手动设置：

  // 插入一段代码文本
  quill.insertText(0, `function test() {
    console.log('Hello Quill!');
  }`);
  // 给这段文本设置代码块格式
  quill.formatText(0, quill.getLength(), 'code-block', true);
  

4. 处理Electron的上下文隔离限制 #

如果你的Electron版本在12以上，默认开启了上下文隔离（contextIsolation），这时候renderer进程里的window.hljs会被隔离，Quill访问不到。解决办法是通过preload脚本暴露hljs：

1. 在preload.js中添加：

   const { contextBridge } = require('electron');
   const hljs = require('highlight.js');
   
   contextBridge.exposeInMainWorld('hljs', hljs);
   

2. 在Electron的main.js中配置webPreferences时指定preload：

   const mainWindow = new BrowserWindow({
     webPreferences: {
       preload: path.join(__dirname, 'preload.js'),
       contextIsolation: true // 保持开启，更安全
     }
   });
   

3. 然后在renderer的JS里就不用再require hljs了，直接初始化Quill即可：

   const quill = new Quill('#editor', {
     modules: {
       syntax: true,
       toolbar: false
     },
     theme: 'snow'
   });
   

按上面的步骤排查一遍，应该就能解决语法高亮不生效的问题了。

内容的提问来源于stack exchange，提问作者ParryV