Question

I am using the Syntax highlighter library to display code on a webpage. I would like to highlight certain sections of code in response to various events on the page. It may be a single character, or a multiple line section, but it will always be a contiguous section of text.

I know that SyntaxHighlighter has functionality to highlight individual lines, but I need a little more fine grained control than that.

I know the selection start and selection length points in the original source code, but the highlighter has inserted a lot of html elements, so it is a bit difficult to find those indexes again to wrap them in another tag.

Is there a good way I can override existing formatting, and apply my own css to a specific portion of the text? Is there a different syntax highlighting plugin that may give me what I need?

Answer 1

How about running the generated markup through a function that searches and replaces the specific ‘programmatic word’ with,

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

..and you can style it as follows,

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

I sort of worry about the efficiency of this though.

EDIT: I’ve got something, if you look at the source of the script relative to the highlighter for a language (here, CSS), http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/scripts/shBrushCss.js,

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

..which renders as,

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

..so, just define your ‘word’ as a rule with an equivalent CSS declaration.