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: '
' +
    '        %导言区
' +
    '        \documentclass[UTF8]{ctexart}
' +
    '        \usepackage{marginnote}
' +
    '        %正文区 begin
' +
    '        \begin{document}
' +
    '        \marginpar[left]{这是边柱}
' +
    '            这里是一段难懂的命令\marginnote{这是一段解释的文字。}。
' +
    '        %正文区 end
' +
    '        \end{document}
' +
    '    ',
  groups: undefined
]
str2 
        %导言区
        这是开始这是结束ctexart}
        这是开始这是结束marginnote}
        %正文区 begin
        egin{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，对这段范围的文字加粗。
但是如果我想实现高亮，我必须知道，这个关键词的起点，才行。
有什么思路吗？

Answer 1

等待大神解答