Wednesday, 16 January 2008

JavaScript Syntax Highlighter for C# SQL XML VB and more

To bring your code to life on your blogs/web sites there is a great syntax highlighter written in JavaScript simply called Syntax Highlighter and best of all ...it's free! Supported languages/markup include C, C++, C#, CSS, Delphi, Java, javaScript, PHP, Python, Ruby, SQL, VB, XML, HTML - see the C# example below:

To get it running on your pages; download the files from the Syntax Highlighter site to your server, on your web page just pull in the CSS file, the required JS files (according to your language choices) and set some JS values on page load:

<link href='/css/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>

<script type='text/javascript' src='/js/shCore.js'/>
<script type='text/javascript' src='/js/shBrushCSharp.js'/>
<script type='text/javascript' src='/js/shBrushXml.js'/>
<script type='text/javascript' src='/js/shBrushJScript.js' />

<script type='text/javascript'>
window.onload = function () {
    dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
    dp.SyntaxHighlighter.HighlightAll('code');
}
</script>

Once this is set up you can just place your code on the page surrounded by pre/textarea tags. Then specify a class according to the language alias you wish to use (aliases are listed on the Syntax Highlighter site).

<textarea name="code" class="c#" cols="50" rows="10">
... some code/markup here ...
</textarea>

3 comments:

Anonymous said...

Hi, i need your help.. whenever i put my code in textarea using :

<textarea name="code" class="c#" cols="50" rows="10">
public static xyz()
{

}
</textarea>



my blogger will give extra <br/> syntax in every line i pressed "enter". so that lines above will be :

<textarea name="code" class="c#" cols="50" rows="10">
<br/>public static xyz()<br/>{<br/>}<br/>
</textarea>


how could i overcome this problem ? Because that result couldn't represent my code snippet well....

Thanks for your attention... i'm looking forward for your help...

Andrew Gunn said...

You need to update this guide to work with verion 2 :-P. I think this might also solve the problem with Blogger adding extra
tags.

Anonymous said...

米蘭情趣用品情趣用品情趣飛機杯自慰套充氣娃娃AV女優按摩棒跳蛋潤滑液角色扮演情趣內衣自慰器穿戴蝴蝶變頻跳蛋無線跳蛋電動按摩棒情趣按摩棒丁字褲G點SM後庭

視訊美女視訊做愛


網頁設計
網頁設計