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

我通过cdn直接在index.html上导入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 似乎无法正确处理覆盖包类。我上传了the code in 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";

导入并再次测试，语法应该被高亮显示。