Website Blog
Syntax Highlighting with SyntaxHighlighter
Posted by LP_Nasri @ 2011-08-14 21:03:44
Alex Gorbatchev's SyntaxHighlighter is a Javascript plug-in to easily highlight programming code syntax in web pages. It supports a wide variety of programming and markup languages including PHP, Javascript, HTML, CSS, SQL and more.
SyntaxHighlighter Wiki
The SyntaxHighlighter Wiki contains all you need to get started to download the required files and how to add syntax highlighting to your pages. It's as simple as adding some Javascript and CSS files to your HTML file, adding a class to your code "pre" tags and then invoking "SyntaxHighlighter.all()" in Javascript.
Example Usage
After extracting the downloaded file to your website, add the following to the "head" section of your HTML template, adjusting the paths as necessary, and adding additional brush files. The example below includes the Javascript brush file only.
Now in your HTML somewhere add a "pre" tag with the class set as the appropriate brush:
And finally either at the end of your page just before the closing "body" tag, or in a jQuery document.ready section or similar, add this:
These instructions are all borrowed from the SyntaxHighlighter Usage page.
"pre" vs "script" tags
Version 2.1 of the SyntaxHighligher supports a new style which can be used instead of "pre" tags but I wouldn't recommend the use of this.
If for some reason there is no Javascript (e.g. in a feed reader, or the browser has it switched off etc) then nothing will render, whereas the content of a "pre" tag will.
Also, it's important for some people to have their pages validate and the "script" syntax will fail validation for an XHTML document which does not allow a "class" attribute in a script tag.
The HTML brush
The complete list of bundled brushes can be found on the Brushes page of the Wiki. Just in case you miss seeing it at first, the brush for HTML is the "xml" one.
Usage of the SyntaxHighlighter on my blog
I have started to use the SyntaxHighlighter on my blog from this post. I may go back and add in syntax highlighting to older posts as well if I need to edit them in the future.
Rather than have to include a large number of external CSS and JS files to use the Syntax Highlighter I merge them together into a single file and then use the YUI Compressor to make a minified file. These are then compressed using Apache's mod_deflate to ensure maximum transfer speed.
SyntaxHighlighter Wiki
The SyntaxHighlighter Wiki contains all you need to get started to download the required files and how to add syntax highlighting to your pages. It's as simple as adding some Javascript and CSS files to your HTML file, adding a class to your code "pre" tags and then invoking "SyntaxHighlighter.all()" in Javascript.
Example Usage
After extracting the downloaded file to your website, add the following to the "head" section of your HTML template, adjusting the paths as necessary, and adding additional brush files. The example below includes the Javascript brush file only.
Now in your HTML somewhere add a "pre" tag with the class set as the appropriate brush:
function foo() {
}
And finally either at the end of your page just before the closing "body" tag, or in a jQuery document.ready section or similar, add this:
These instructions are all borrowed from the SyntaxHighlighter Usage page.
"pre" vs "script" tags
Version 2.1 of the SyntaxHighligher supports a new style which can be used instead of "pre" tags but I wouldn't recommend the use of this.
If for some reason there is no Javascript (e.g. in a feed reader, or the browser has it switched off etc) then nothing will render, whereas the content of a "pre" tag will.
Also, it's important for some people to have their pages validate and the "script" syntax will fail validation for an XHTML document which does not allow a "class" attribute in a script tag.
The HTML brush
The complete list of bundled brushes can be found on the Brushes page of the Wiki. Just in case you miss seeing it at first, the brush for HTML is the "xml" one.
Usage of the SyntaxHighlighter on my blog
I have started to use the SyntaxHighlighter on my blog from this post. I may go back and add in syntax highlighting to older posts as well if I need to edit them in the future.
Rather than have to include a large number of external CSS and JS files to use the Syntax Highlighter I merge them together into a single file and then use the YUI Compressor to make a minified file. These are then compressed using Apache's mod_deflate to ensure maximum transfer speed.
Comments - oldest entries appear first, most recent entries at the end.
Posted by Lyes @ 2012-10-29 10:01:22
Posted by bdqevt @ 2012-10-30 01:39:34
Posted by cxjhqoi @ 2012-10-30 21:41:11
Posted by iumcqhbhrdr @ 2012-10-31 06:21:46
Posted by sakwokbys @ 2012-10-31 16:43:33
Posted by hkpflwzw @ 2013-03-26 23:45:17
Leave a comment:
All comments are moderated, name and email fields are mandatory, but only the name will be displayed in the comment, your email address will remain private, and will not be added to any lists. The requirement of the email address is to help ensure that the comments are being submitted by legitimate people.