Install Syntax Highligher In Blogger

Oleh Unknown

Sunday, August 11, 2013

Bagikan :

Tweet

SyntaxHighlighter helps a developer/coder to post code snippets online with ease and have it look pretty. SyntaxHighlighter is developed in Javascript by Alex Gorbatchev. SyntaxHighlighter is the most popular script for syntax highlighting and widely used by many blogs, websites. It has many wonderful features like: view source code in plain text, copy to clipboard, valid XHTML, … SyntaxHighlighter supports many languages and has bunch of themes.

Install SyntaxHighlighter In Blogger

Installing SyntaxHighlighter In Blogger is easy, just open your template and paste the following code right before the close tag </head>:

<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/shBrushCss.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/shBrushXml.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>

SyntaxHighlighter supports many languages, each language has its own javascript file. To install syntax highlighting for more languages, you can view list of supported languages, get the javascript’s file name and include it with the following syntax:

<script src="http://alexgorbatchev.com/pub/sh/current/scripts/LANGUAGE_FILE_NAME.js" type="text/javascript"></script>

There’re many themes for SyntaxHighlighter, too. To change theme, go to the homepage and get the file name for theme and change this line:

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

into:

<link href="http://alexgorbatchev.com/pub/sh/current/styles/THEME_FILE_NAME" rel="stylesheet" type="text/css"></link>

Howto Use SyntaxHighlighter

To highlight code, just wrap it into a pre tag with the following syntax:

<pre class="brush: js">
// Your code here
</pre>

Notice the class="brush: js". It defines the language for syntax highlighting, in this situation: JS – Javascript. To know more about brushes, you can see a list of them on the homepage.

The second important note is the code inside pre tag must be escaped (< and > must be changed into &lt; and &gt;). There’re many online tools for blogger to do that, one of them is Code Converter.

Using pre tag is the traditional way. Another way to highlight code is using script tag:

<script type="syntaxhighlighter" class="brush: html"><![CDATA[
// Your code here
]]></script>

The benefit of this method is ability to place virtually anything inside the CDATA without having to escape anything, so this allows for a straight ‘cut and paste’ experience from your favorite text editor.

If you need more information about SyntaxHighlighter or more configuration, please go to thehomepage. You can see SyntaxHighlighter in action here, at Deluxe Blog Tips. It’s really pretty and I’m feel good with it.

We have great collection of Best tricks and tutorials, Bloggingtrainings.blogpsot.com is a Blog Providing with Blogger widgets, help, blogger tips, blogger tricks, hacks, Blogger Gadgets,Plugins and Blogger resources with great skills and templates.practical SEO Tips and all things Blogging,is about Blog tricks & tips, Traffic generation, Backlinks, Search engine optimization, Web designing, E money, Social media, Facebook tricks,Blogging Discussion, Tips & Tricks,logging tips, tricks, how-tos, news, tools and resources, bloggingtrainings.blogspot presented in easy to understand tutorials.Keep visiting us if any links is not working or you want sme more help, then keep looging at bloggingtrainings.blogspot.com.or contact us 0323-7591466.

Tag : Blogging, Blogging Trainings, Blogging Tricks