Skip to content

Posts from the ‘Syntax Highlighter 2.0’ Category


CSS SyntaxHighlighter 2.0: short tutorial on how to create your own syntax highlighter


This is a tutorial showing you how to create your own syntax highlighter using CSS SyntaxHighlighter 2.0. Before reading this tutorial you need to know regular expression pretty well. Read more »


How to use CSS SyntaxHighlighter 2.0 with Ajax/Prototype

CSS SyntaxHighlighterThe default method to use SyntaxHighlighter 2.0 is via SyntaxHighlighter.all() declared in the Javascript section of the main page. What this method does is to register the SyntaxHighlighter.highlight() to call when the main page is loaded. The highlight method then searches for all the <PRE> tags (default configured tag name) and checks any class names containing the ‘brush:’ keyword. If so, then proceeds with syntax highlighting. Read more »


CSS SyntaxHighlighter 2.0: Notes on using with TEXTAREA and PRE

CSS SyntaxHighlighterThe CSS SyntaxHighlighter 2.0 can be used with <pre> or <textarea> tags. However if you have to use with <textarea>, you may have some little surprise that it won’t be <textarea> anymore once the content is highlighted. Because the highlighter will replace the DOM node (same applied to <pre> tag) – according to the source code ) in shCore.js. You will get a new <div> node instead – that’s the only way to have colorful syntax highlight on your page. Read more »