Saturday, April 18, 2015

Now Add Syntax Highlighter With Just A Shortcode!!!


As you know syntax highlighter is very important in blogs which show codes but you must have sometimes faced problems in highlighting your code either it is a code problem or other.So Recently i was gone somewhere so i was not able to post about MBT Famous Shortcode plugin which they released to help the bloggers by which you will be able to add most popular widgets very easily with just a shortcode!!!




MBT SAYS That -
SyntaxHighlighter as you know is a fully functional self-contained code syntax highlighter developed in JavaScript. Which helps you prettify your Code format and display it in an organized numbered list style. Most Blogspot users often share HTML, CSS or JavaScript codes with their audience using Blockquotes but with this new shortcode you can better display scripts on your sites in a presentable way. This plugin neatly displays web technologies such as HTML, CSS, JavaScript, Php, Python, Sql, xml etc. The codes are displayed line by line number wise. It also provides the user with options to Print the code, copy it to clip board or to see the code Source. With SyntaxHighlighter Shortcode you can add codes not only inside your posts or sidebar widgets but you can also insert it inside Blogger comments!


So In This Post I will tell you how to add above shown type syntax highlighter in you blog.

                                                                     DEMO

Note- Before Starting Fir You Need To Install Shortcode. Go Here

After reading you must have seen shortcode featuresand installed it in your blog so now we will start to add this syntaxt highlighter-

  1. Go To Blogger >Template >Edit Html
  2. Paste This Code Above </head>
<!--SYNTAX HIGHLIGHTER BY MBT 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 MBT ENDS-->
3. Save Your Template.
4. How To Add Syntax Highlighter-
1- First Encode Your Html Code
2-Now Simply Use This Short Code-

[code]Add Your Encoded Code Here[/code]
Just Put Your Encoded Code in bold text.

Tip: If you wish to highlight a certain row in your code then you can specify the row number with the "hl" attribute as shown below. Lets highlight row 1, 4 and 7. 
Finally You Will Get This Type Of Output-

No comments:

Post a Comment

PLEASE NOTE:
We have Zero Tolerance to Spam. Spammy Comments and Comments with Links will be deleted immediately upon our review.
For More Rules Read Our Comment Policy