Create Shortcode For Blogger Syntax Highlighter

0
Shortcode For Blogger Syntax Highlighter In Blogger
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:
    highlighted rows in syntax highlighter in blogger
    Finally now you have syntax highlighter shortcode for blogger,bye bye to long html codes..;) Let me know if you need any help.
    How to add Shortcode For Blogger Syntax Highlighter In blogspot,create syntax highlighter shortcodes for website blog in blogger
    Today in this tutorial we are going to explain how to add syntax highlighter shortcode in blogg...
    SUMMARY

    How to add Shortcode For Blogger Syntax Highlighter In blogspot,create syntax highlighter shortcodes for website blog in blogger

    You Might Also Like:

    We hope this article helped you to learn Create Shortcode For Blogger Syntax Highlighter. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

    SUBSCRIBE ARTICLES BY EMAIL

    Post a Comment Blogger Disqus

    0 Comments on "Create Shortcode For Blogger Syntax Highlighter" So Far
    Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

    MARKUP FOR WRITING COMMENTS:
    1. To Insert Code Length Use<i rel="pre">Code Here</i>
    2. To Insert Short Codes Use<i rel="code">Code Here</i>
    3. To Insert Quote Use<b rel="quote">Quote</b>
    4. To Insert Image Use<i rel="image">Image URL</i>
    5. To Insert Video Use<i rel="youtube">You Tube Url</i>

    Note: You Can Also Convert Your Code Directly From The Conversion Box.
    --------------------------------------------------------------------------------------------------------------------------------------------------------
    Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
    Regards:
    Team Bloggersstand