Sunday, November 20, 2011

Secret to display nicely formatted programming codes in your blogs/websites

If you have been following this blog for a short period of time, you probably would ask the question of how do I display programming codes in such a nicely formatted manner? I remembered the day that I had the same doubt as you do and there's a secret to it. Introducing... SyntaxHighlighter.


So what can SyntaxHighlighter do?
Click here for the demo of SyntaxHighlighter.

Isn't it interesting? On top of that, SyntaxHighlighter support programming language like as3, xml, php, C++, Javascript, etc... Isn't that nice?
Click here for a more precise list of programming language that SyntaxHighlighter supports.

So how do I configure it?
You just need to copy and paste the following codes into the <head> tag of your HTML Template of your blog.

<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shAutoloader.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushAS3.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js' type='text/javascript'/>
<script type='text/javascript'>
     SyntaxHighlighter.all()
</script>
</head>

and and a <pre> tage like the following example will do.
<pre class="brush: js">
    /**
     * SyntaxHighlighter
     */
    function foo()
    {
        if (counter <= 10)
            return;
        // it works!
    }
</pre>

Click here for a more detailed explanation on how to setup SyntaxHighlighter in your blog.

No comments:

Post a Comment