Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
842 views
in Technique[技术] by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
等待大神解答

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...