Code Syntax Highlighter

Table of Contents | All Slides | Link List | Examples | CSCI E-12

<< previous | next >>

Code Syntax Highlighter

Using the dp.SyntaxHighlighter, plain textarea elements can be transformed into highlighted code.

What is needed:

Link to the SyntaxHighligher CSS and scripts <link href="SyntaxHighlighter/Styles/SyntaxHighlighter.css" rel="stylesheet" type="text/css"/> <script src="SyntaxHighlighter/Scripts/shCore.js" type="text/javascript"> </script> <script src="SyntaxHighlighter/Scripts/shBrushJScript.js" type="text/javascript"> </script> <script src="SyntaxHighlighter/Scripts/shBrushXml.js" type="text/javascript"> </script> <script src="SyntaxHighlighter/Scripts/shBrushCss.js" type="text/javascript"> </script>
Put your code in a textarea <textarea name="code" class="xml" cols="60" rows="10"> <html> <head> ... </head> <body> ... </body> </html> </textarea>
Put a name="code" attribute with any textarea that should be processed
Use class attribute to control the syntax highlighting applied (e.g. xml, js, css, java)

With and Without

And here is the same code, without the SyntaxHighlighter invoked:

Table of Contents | All Slides | Link List | Examples | CSCI E-12

<< previous | next >>