quill 实现代码高亮

Question

代码

    let start = `((\\\\)(?:usepackage|documentclass))(?:(\\[)([^\\]]*)(\\]))?(\\{)`;
    let end = `\\}`;


    let reg = new RegExp(`${start}`, 'gi');


    let str = `
        %导言区
        \\documentclass[UTF8]{ctexart}
        \\usepackage{marginnote}
        %正文区 begin
        \\begin{document}
        \\marginpar[left]{这是边柱}
            这里是一段难懂的命令\\marginnote{这是一段解释的文字。}。
        %正文区 end
        \\end{document}
    `;


    let arr = reg.exec(str);

    console.log('arr', arr);

    let str2 = str.replace(reg, `这是开始$2这是结束`);

    console.log('str2', str2);

这是利用正则对一段代码进行匹配关键词。

运行如下：

arr [
  '\\documentclass[UTF8]{',
  '\\documentclass',
  '\\',
  '[',
  'UTF8',
  ']',
  '{',
  index: 22,
  input: '\n' +
    '        %导言区\n' +
    '        \\documentclass[UTF8]{ctexart}\n' +
    '        \\usepackage{marginnote}\n' +
    '        %正文区 begin\n' +
    '        \\begin{document}\n' +
    '        \\marginpar[left]{这是边柱}\n' +
    '            这里是一段难懂的命令\\marginnote{这是一段解释的文字。}。\n' +
    '        %正文区 end\n' +
    '        \\end{document}\n' +
    '    ',
  groups: undefined
]
str2 
        %导言区
        这是开始\这是结束ctexart}
        这是开始\这是结束marginnote}
        %正文区 begin
        \begin{document}
        \marginpar[left]{这是边柱}
            这里是一段难懂的命令\marginnote{这是一段解释的文字。}。
        %正文区 end
        \end{document}

这个正则是从atom的源码文件里面复制的，atom这种编辑器，实现代码高亮一般都是通过正则 replace，直接替换成指定的span。

比如

<span class="keyword-1">这是关键词</span>

从而实现代码高亮

但是我现在用的是quill编辑器

他的接口是这样的

quill.formatText(0, 2, 'bold', true);

这段话的意思就是，指定范围从0到2，对这段范围的文字加粗。
但是如果我想实现高亮，我必须知道，这个关键词的起点，才行。
有什么思路吗？