javascript - 手动突出显示javascript SyntaxHighlighter中的特定部分

Question

我正在使用 Syntax highlighter在网页上显示代码的库。我想突出显示某些代码部分以响应页面上的各种事件。它可以是单个字符，也可以是多行部分，但始终是连续的文本部分。

我知道 SyntaxHighlighter 具有突出显示各行的功能，但我需要比这更细粒度的控制。

我在原源码中知道selection start和selection length points，但是highlighter插入了很多html元素，所以要重新找到那些索引来把它们包裹在另一个标签中有点困难。

有没有一种好方法可以覆盖现有的格式，并将我自己的 css 应用于文本的特定部分？是否有不同的语法高亮插件可以满足我的需求？

Answer 1

如何通过搜索和替换特定“编程词”的函数来运行生成的标记，

<span class="customHighlight">word</span>

..您可以按如下方式设置样式，

span.customHighlight {
  background:#FAFAD2;
  color:#000;
}

虽然我有点担心这样做的效率。

编辑:如果您查看与语言荧光笔相关的脚本源(此处为 CSS)，我有一些东西，http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/scripts/shBrushCss.js ,

        { regex: /!important/g,
          css: 'color3' },  // !important

..呈现为，

<code class="css color3">!important</code>

..所以，只需将您的“单词”定义为具有等效 CSS 声明的规则即可。