Pages - Menu

Sunday, January 10, 2010

Syntax highlighter by Alex Gorbatchev

I was looking forward to put some codes here. This is when I came across this cool tool. Syntax Highlighter is an open source code highlighter developed in JavaScript by Alex Gorbatchev. It highlights codes written in various lanuages like C++, C#, Java, Javascript, SQL, XML and many more. It also has 6 different themes for the background. Great stuff Alex!!

Download the Syntax Highlighter and upload the libraries in some web space.  Link those libraries into the HTML code of your blog. Or you can also use the online version where the libraries are already present online. The demo below uses the online version.

I was looking for some support on how to use it, and ended up with something funny like this picture here. Well, they were using Syntax Highlighter to show 'how to use Syntax Highlighter'.
Anyways visit the site, download codes or use the online version.

Links:

Steps:
Copy the HTML codes below:


<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>




Open Blogger Dashboard, open Layout, in that select Edit HTML
Paste the above HTML codes just below
<head>
tag
Now save the template and try a new post.
Type these codes in HTML


<pre name="code" class="brush: cpp">
while(foo==1){
int bar==0;

printf("Welcome to the foo-bar methodology of algorithms !! ");
}
</pre>



And voilĂ ! You have the Syntax Highlighter showing the code in a clean format as show below
while(foo==1){
int bar==0;
printf("Welcome to the foo-bar methodology of algorithms !! ");
}




Images:



No comments:

Post a Comment