Add Syntax Highlighter In Blogger Posts

0
Add Syntax Highlighter In Blogger Blogs
Most bloggers use the Blockquote to share tutorials based on scripts and codes.Now,Alex Gorbatchev has created Syntax Highlighter  that displays CSS, HTML, JavaScript, Sql, Python, xml, Php etc.Syntax Highlighter provides three options i.e to Print the code, copy it to clip board and to see the code Source.

The codes comes with a script called Brush.We have used most popular brushes for this Syntax Highlighter but if you to use a different Brush of your choice you can easily replace from Brush List.

how to add syntax highlighter in blogspot

1. Go To Blogger > Design > Edit HTML
2. Search for this code
]]></b:skin>
3. Now paste the following code just below it.
<!--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/current/scripts/shYouBrushJava.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--> 
4. Now,Save your template..Done !

how syntax highlighter works in blogger

whenever you are going to share code in your tuttorial just follow the steps below to publish your code.
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">
ADD THE PARSED CODE HERE
</pre>

Do not add the html,javascript,php,css code directly into your blog.if you use direct code you will get error in your blogger editor box.first parsed the code using the Parser Tool Provided by Us.

  • Replace ADD THE PARSED CODE HERE with the parsed/encoded code.
If you have any query regarding Syntax Highlighter Feel Free To Ask !  Enjoy
how to Add Syntax Highlighter In Blogger Blogs,auto code display in blogspot posts,show code inside blog website post html,css,javascript,php,sql demo,makes your code snippets beautiful
Most bloggers use the Blockquote to share tutorials based on scripts and codes.Now, Alex Gorbatc...
SUMMARY

how to Add Syntax Highlighter In Blogger Blogs,auto code display in blogspot posts,show code inside blog website post html,css,javascript,php,sql demo,makes your code snippets beautiful

You Might Also Like:

We hope this article helped you to learn Add Syntax Highlighter In Blogger Posts. 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 "Add Syntax Highlighter In Blogger Posts" 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