CODEWITHSUNDEEP
javascriptcsssyntax-highlighting
captncraig
captncraig

Reputation: 23078

Manually highlight a specific section in javascript SyntaxHighlighter

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?

Upvotes: 2

Views: 610

Answers (2)

Vineet1982
Vineet1982

Reputation: 7918

You can use jQuery as in example http://www.tripbase.com/code/highlightTutorial.html. According to me provide a textbox and onchange event send the highlighted text to the function and the function will highlight the text

For your highlight and un-highlight jquery just visit bartaz.github.com/sandbox.js/jquery.highlight.html

Upvotes: 0

Amit
Amit

Reputation: 1346

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.

Upvotes: 3

Related Questions