Do you write blogs on Programming or Web designing techniques? How do you Post codes and snippets in your blog post? May be you write codes as it is or you would be using Blockquote to write html codes.
Most Bloggers use blockquote to share tutorials based on codes and snippets but do you know Alex Gorbatchev has created an amazing Syntax Highlighter using Jquery that neatly show all html, JavaScript, php, Sql, Xml etc. The codes are displayed line by line number wise. There are many options available in it like print the code, copy to clipboard and see the source code etc.
Alex has released the lastest updated version of syntax highlighter (3.0.83) but i have used the older version (2.1.383) as it contains the mentioned options as explained earlier. Each code comes with a script called Brush. There are many brushes available for different formats like html, Javascript, php, C++ etc. I have used the most popular brushes as I mentioned. you can select your own brushes check BrushList and select brushes of your choice.
4. Just below it paste the following code.
5. Save your Template and You are done.
Ok now How will you write code?? How Does it works??
Whenever you wish to share any type of code or snippet to your reader simply enclose the code with
I have combined all brushes into one making it easier for newbie to implement the tutorial.
Most Bloggers use blockquote to share tutorials based on codes and snippets but do you know Alex Gorbatchev has created an amazing Syntax Highlighter using Jquery that neatly show all html, JavaScript, php, Sql, Xml etc. The codes are displayed line by line number wise. There are many options available in it like print the code, copy to clipboard and see the source code etc.
Alex has released the lastest updated version of syntax highlighter (3.0.83) but i have used the older version (2.1.383) as it contains the mentioned options as explained earlier. Each code comes with a script called Brush. There are many brushes available for different formats like html, Javascript, php, C++ etc. I have used the most popular brushes as I mentioned. you can select your own brushes check BrushList and select brushes of your choice.
How To Highlight Syntax in Blogger
Here are the few simple steps, I have tried to make installation as easy as possible don't worry these steps are more simple than you imagine
- Go to Blogger. As you are editing your template so better is to create backup of your template Always be on a safeside ;)
- BackUp your template.
- Now click on template and edit html.
]]></b:skin> 4. Just below it paste the following code.
<!--SYNTAX HIGHLIGHTER BY TIPS&101TRICKS 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 = 'http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
<!--SYNTAX HIGHLIGHTER BY TIPS&101TRICKS ENDS--> 5. Save your Template and You are done.
Ok now How will you write code?? How Does it works??
Whenever you wish to share any type of code or snippet to your reader simply enclose the code with
1: <pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">
2: ADD THE CODE HERE
3: </pre>
I have combined all brushes into one making it easier for newbie to implement the tutorial.
Note: Do not add the code directly because you will get error in Blogger Editor, instead first parse the code using the Parser Tool provided by us.
PARSE CODE YOUR HERE with the parsed/encoded code and publish your post to the see the magic.
That's it! Hope you like it. I will publish different color schemes for Syntax Highlighter in my next posts so make sure you don't miss the update.
PARSE CODE YOUR HERE with the parsed/encoded code and publish your post to the see the magic.
That's it! Hope you like it. I will publish different color schemes for Syntax Highlighter in my next posts so make sure you don't miss the update.
Post A Comment:
0 comments:
Post a Comment