Create Shortcode For Blogger Syntax Highlighter

Today in this tutorial we are going to explain how to add syntax highlighter shortcode in blogger.Syntax highlighter  developed in JavaScript.Syntax highligher prettify Code format and display it in an organized numbered list style. Most  of the websites and Blogspot users share HTML, CSS and JavaScript codes with their visitors by  using Blockquotes.This shortcode for syntax highlighter serve better way to  display scripts on your websites or Blog in a presentable way. In This plugin you can share and technologies like as HTML, CSS, JavaScript, Php, Python, Sql, xml etc.Syntax highlighter comes with three features i.e Print the code, copy it to clip board or see the code Source. you can add Syntax Highlighter Shortcode inside your posts , sidebar widgets and also inside comments box.

How to add Syntax Highlighter Shortcode in Blogger

INSTALLATION STEPS

1. Go To Blogger > Template > Backup your template.
2. Click Edit HTML
3. Search </head>
4. Paste the following code just above it.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

6. Go To Blogger > Template > Backup your template
7. Click Edit HTML
8. Search for </body>
9. Paste the following js just above it.

<script src='https://googledrive.com/host/0B58fhAmOxE7EQlBuTkR4d3REbjQ' type='text/javascript'></script>

If you have already added the above codes(Installation Steps) i.e java script and above css style sheet then no need to add it again in your blog,just skip above steps and now follow below steps.if you have not added above code then you need to follow all the steps mentioned here.

Add Syntax Highlighter Style

Brushes defines the programming language of the syntax highlighter. Each code comes with a script called Brush. we have used the most popular brushes,if you want to use  different brush style you can select one from the Brush list.

1. Go To Blogger > Template > Backup your Template

2. Click Edit HTML

3. Search for this code </head>

4. Paste the below code just above it  </head>

<!--SYNTAX HIGHLIGHTER BY BLOGGERSSTAND STARTS-->
<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/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCSharp.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/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPerl.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>
<!--SYNTAX HIGHLIGHTER BY BLOGGERSSTAND ENDS-->

5. Now Save your template..Done !

Customization

The above code will create a default theme i.e white theme.we have 6 theme versions you can choose,if you want to change your theme you just need to replace above highlighted code  from this Emacs theme(for demo of this theme visit demo page).For More Customized Syntax Highlighter Theme Click here.

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

Result:

how to add syntax highlighter shortcode?

when you are going to add Syntax Highlighter Shortcode inside post,sidebar widget or in comment follow below steps.

• First Encode your Code From our HTML Encoder Tool.
• To display syntax highlighter add the following shortcode.

[code]Add Encoded Code Here[/code]

If you want to highlight a certain row of your code.specify the row number with the "hl" attribute. we have highlighted the row 1, 6 and 12.if you want to highlight a single row then simply type hl="6".

[code hl="1, 6, 12"]Add Encoded Code Here[/code]

Result:

Finally now you have syntax highlighter shortcode for blogger,bye bye to long html codes..;) Let me know if you need any help.