Quill 2.0.0 beta4 自动语法高亮不起作用

Question

我通读了 quill 的语法高亮指南，但无法让它工作，因为 quill 一直抱怨 highlight.js 没有首先加载。

我在网上尝试了很多解决方案，但没有一个有效。我得到了一个语言选择器（在我的本地项目中，当保存为 html 并重新打开时，还会添加带有语言名称的不必要的 p 标签）。

这是一个沙箱https://codesandbox.io/s/importing-sass-in-vue-forked-skuss?file=/src/components/HelloWorld.vue

我直接在index.html上通过cdn导入highlight.js。

Answer 1

已更新

根据要求，要求是禁用选择框并自动进行语法突出显示。

自 quill 2.0.0 以来，语法突出显示的工作方式发生了巨大变化，其中必须选择语言。

为了实现目标，我们需要重写 quill Syntax 类。

class CodeSyntax extends Syntax {
  // override initListener to avoid creating selection box
  initListener() {}
  
  // overrider highlightBlot to highlight the text automatically
  highlightBlot(text, language = 'plain') {
    const container = this.quill.root.ownerDocument.createElement('div');
    container.classList.add(CodeBlock.className);
    container.innerHTML = this.options.hljs.highlightAuto(text).value;
    ...
  }
}

mounted() {
    const editorOpts = {
      modules: {
        syntax: {
          hljs // inject highlight.js to quill
        },
        toolbar: {
          container: [
            [{ header: [1, 2, 3, false] }],
            ["bold", "italic", "underline", "code-block"],
          ],
        },
      },
      theme: "snow",
    };
    editorOpts["scrollingContainer"] = this.$refs.scrollingContainer;
    
    // override the default syntax module with our own version of it
    Quill.register({ "modules/syntax": CodeSyntax }, true);
    this.editorInstance = new Quill(this.$refs.editorNode, editorOpts);
},

Codesandbox 似乎无法正确处理覆盖包类。我上传了代码到Github。

附注为了简单起见，我只是使用 css 而不是 scss。

---

我认为你只是错过了highlightjs css。

https://codesandbox.io/s/importing-sass-in-vue-forked-fympz?file=/src/components/HelloWorld.vue:1717-1758

@import "highlight.js/styles/github.css";

导入并再次测试，语法应该突出显示。