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

【问题标题】：Manually highlight a specific section in javascript SyntaxHighlighter手动突出显示 javascript SyntaxHighlighter 中的特定部分
【发布时间】：2011-05-18 19:54:56
【问题描述】：

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

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

我知道原始源代码中的选择起始点和选择长度点，但是荧光笔已经插入了很多html元素，所以再次找到那些索引以将它们包装在另一个标签中有点困难。

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

【问题讨论】：

嘿 CMP，一个示例/示例可能会有所帮助..

基本上，我在

 标记中有一段代码，与该站点上的示例完全相同。我想以编程方式将特定单词突出显示为带有黄色背景的黑色文本，覆盖语法荧光笔已经完成的任何格式。我见过语法高亮和任意文本高亮的例子，但从来没有同时出现过。

已更新，如果有帮助请告诉我。

标签： javascript css syntax-highlighting

【解决方案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 声明的规则。

【讨论】：

这不是完全违背了首先使用语法荧光笔的意义吗？
嗯，是的；或者我会蹒跚地穿过荧光笔的来源。我现在正在看..
我喜欢将它嵌入到源代码中的想法。不过，我不一定要突出显示特定的单词，它是代码中的任意位置。不过，我绝对可以将它包装在可正则表达式中。

【解决方案2】：

您可以使用 jQuery，例如 http://www.tripbase.com/code/highlightTutorial.html。据我说，提供一个文本框和 onchange 事件将突出显示的文本发送到函数，函数将突出显示文本

对于您的突出显示和取消突出显示 jquery，只需访问 bartaz.github.com/sandbox.js/jquery.highlight.html

【讨论】：

这很有用，但要找到我正在寻找的确切文本不再那么容易了，因为语法荧光笔已经将 div 内容从我的原始来源更改为具有更多标记的内容介于两者之间。它不再像正则表达式搜索那么容易。
找到适合您的突出显示和取消突出显示 jquery 的解决方案只需访问 bartaz.github.com/sandbox.js/jquery.highlight.html