Infolinks

Adsense

Wednesday, January 20, 2016

SYNTAX HIGHLIGHTER: Display Beautifully The Sourcecodes in Blogger

My blog is about code snippets related to programming such as php, sql, javascript, etc. So I need to highlight my codes to make it different from other contents. I've added a syntax highlighter to do it. I got this one from alexgorbatchev.com. Thanks to the author of this highlighter. Makes a big different in my blog to highlight source code of different programming languages.

So here are the steps to implement this syntax highlighter in your blog.
Put the code below before the closing head</head> section of your template. Log in to your blogger account -> go to My Blogs -> select the blog where you want to put the syntax highlighter and then click Template -> Edit HTML. Next is search for </head> and paste the code below above the </head> and you're done!

<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"></link> 
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css"></link> 
<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>



 














 
Alex Gorbatchev's syntax highlighter can support javascript, php, C++, C Sharp, Python, Ruby, Sql, CSS, Java, VB, XML and Perl. To be able to used it, enclose your code with a pre tag to interpret your content as a content and not as part of your html code.

<pre class="brush:JScript">....your code here...</pre>

Sample Output







Example Code in Java
public class HelloWorld
{
public static void main(String[] args) {
System.out.println("Hello World!");
}
}

Classes for different language:
Java = brush:java
Javascript = brush:jscript/javascript/js
CSS = brush:css
C++ = brush:cpp/c
C# = brush:c-sharp/csharp
php= brush:php
Python = brush:python
Ruby = brush:ruby
Sql= brush:sql
Visual Basic = brush:vb
XML = brush:xml
Perl = brush:perl

Hope this works for you too! Have a good day! ^_^

SYNTAX HIGHLIGHTER: Display Beautifully The Sourcecodes in Blogger

No comments:

Post a Comment

Adbox