RSS RSS feed | Atom Atom feed | |

SyntaxHighlighter

Alex Gorbatchev's gift to programmers

The problem of displaying source code on the web is the proverbial reinventing the wheel problem. With so many sites dedicated software development, this is a problem that has been addressed thousands of times. Every solution required the site's users to become familiar with a new approach. The latest version of Alex Gorbatchev's SyntaxHighlighter comes close to a universal solution and has gained wide acceptance. Not only is this an open source solution, there is a hosted version of the scripts that is suitable for low volume web sites. Here is how you can use it on your site.

Step one is including the style sheets used to format code. The major releases of SyntaxHighlighter are available on the web. You can download them to your site or link to them. The latest version is available here

<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/.../styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/.../styles/shThemeDefault.css"/>

Step two is to include the proper javascript for the type of code you are displaying. Each language has a JavaScript file called a "brush".

<script type="text/javascript" src="http://alexgorbatchev.com/.../scripts/shCore.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/.../scripts/shBrushXml.js"></script>

There is a script for most popular web languages. See SyntaxHighlighter/Brushes page for details of what brushes are used for each language.

Step three is changing the configuration to work on your site.

<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/.../scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

Now you are ready to display your code. A <pre> tag is used with with a style value to select a brush. It is a requirement that XML/HTML be escaped. Generally, it is enough to replace "<" with "&lt;".

<pre class="brush: xml">
    <h1>Hello World</h1>
</pre>

You now know enough to get started. There are many advanced features left for you to explore. Make sure to check out the SyntaxHighlighter page and make a contribution to keep Alex in beer.

Tags :



Add a comment Send a TrackBack