• 1.3k

quill 实现代码高亮

代码

    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,对这段范围的文字加粗。
但是如果我想实现高亮,我必须知道,这个关键词的起点,才行。
有什么思路吗?

阅读 103
评论
    0 个回答
    撰写回答

    登录后参与交流、获取后续更新提醒

    相似问题
    推荐文章