HEADLINES:-

Simple and best Alexgorbatchev syntax highlighter for blogger posts

It is tough to display any code directly in blog and it  is very difficult but obviously not impossible. If you are creating a blog to post some cool coding tutorial or if you are a coder and want to display code to your visitors then Alexgorbatchev syntax highlighter is best for you.

How can you apply syntax highlighter in your blog template?

Step 1: Visit your blog

Step 2: Visit template and first backup your blog template and then click on "Edit html".

Step 3: Now click inside html code and press Ctrl + F and search </head>

Step 4: Now Copy the following code and paste before "</head>" tag.

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

Step 5: Save tour blog template

How can you apply syntax highlighter in your blog post ?

To display any code in your blog first you need to parse your html code. The basic use of parse is  to convert your code to a decodable browser code. As an example <li> after parse will become &lt; li &gt;

Step 1: Parse your code first. Use this free online tool to perse your code. Online perse tool.

Step 2: Now visit your blog post and click on html view and add following code

<pre class="brush: js">
Put your parsed code here
</pre>

Step 3: publish or update your blog post.

You have now successfully installed syntax highlighter in your blog. Thanks for reading this article. A comment is highly appreciated.

0 comments:

Post a Comment