Syntax highlighter is a best tool to show your HTML,CSS,JavaScript and other codes in multi colors.There are many great features which makes it more popular such as you can implement and use it very easily,9 beautiful themes,you can highlight the lines which you want and many other features.I am also using this tool on this look you wiil watch it in some of my posts :) Now lets see how to implement it in your blogger blog.



How To Add Syntax Highlighter To Blogger Blog?

Below I am providing a scripts generator which created by Nitin and modified by me,with using the scripts generator you can easily select the theme and brushes which you need.Just follow below instructions carefully,

  1. Select the theme of your highlighter,you can see demo of theme here.
  2. Then select the brushes which you want
  3. Click on the Get Code button
  4. Copy all the code from the text area
  5. Now go to your template
  6. Find for </head> tag in your template
  7. Add copied code just above it,



Now you have successfully implemented the syntax highlighter into your blogger blog,now lets see how to use it,

How To Use Syntax Highlighter Into Blogger Posts?


While creating a post go to Edit HTML section
Use below code yo use syntax highlighter

<pre class='brush:[brushname];'>
ADD THE PARSED CODE HERE
</pre>


  • replace [brushname] with brushname which you want to use to highlight the code,
  • replace ADD THE PARSED CODE HERE with the encoded code,to encode the codes you can use our HTML Code Encoder tool


for an example,if you want to use or highlight CSS code then use the code below,

<pre class="brush:css;">
ADD YOUR CSS CODE HERE
</pre>

if you want to use or highlight HTML code then use the code below,

<pre class="brush:html;">
ADD YOUR CSS CODE HERE
</pre>

use same above trick to highlight any type of code

That's all about adding syntax highlighter into blogger blog,I hope you have liked this tutorial also if you are getting any single problem then feel free to share it via comments,I'll glad to help you :)

pEaCe aNd bLeSsInGs BuDdIeS :)

Post a Comment

  1. i like it but. i want your syntax highlighter color. Yours coding section is different with white and grey color and i need to change the line colors too. you can see my demo: http://lasssssssgdg.blogspot.in/2012/06/thats-all-about-adding-syntax.html

    ReplyDelete
    Replies
    1. Ok then fine below code in your template

      <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>

      replace it with below code

      <link href='http://code.helperblogger.com/syntaxhighlighter/shCore.css' rel='stylesheet' type='text/css'/>

      Note - If you have added different theme then above code may be different from your code then best way to find your theme URL is to find shTheme[THEME NAME HERE]

      Delete
  2. This is nice...
    What is the use of selecting brushes?

    JayRyan'sBlog was inviting you to be a Guest Post Author..

    Thank you so much.

    -jayryan09-

    ReplyDelete
  3. thanks rahul, you just made such a useful widget for bloggers


    Regards
    Blogs Daddy

    ReplyDelete
  4. rahul yr great post .............

    according to my experience your blog contain almost all blogger articles . very usefull

    ReplyDelete
  5. An attention-grabbing dialogue is price comment. I believe that it truly is very best to write a lot far more on this matter, it may possibly not be a taboo subject but usually folks are not sufficient to speak on such topics. To the next.

    Cheers

    The Beautiful Names 99

    ReplyDelete
  6. thanks alot x100 this post helped our blog

    ReplyDelete
  7. Cyberpsychology, Behavior, and social networking is the essential, peer-reviewed journal for understanding the social and psychological impact of today’s social networking practices

    ReplyDelete
  8. Thanks. This would be an effective widget for my blog. These highlighters could be an additional feature.

    ReplyDelete
  9. Thank you rahul, you made this so easy.

    ReplyDelete
  10. This comment has been removed by a blog administrator.

    ReplyDelete
  11. what language support in this syntax highlither??? please send the answer to mail lukkhakim@gmail.com . thanks before ;)

    ReplyDelete
  12. awesome as always...
    i have used it in my blog you can check..

    http://cleartuts.blogspot.com/

    ReplyDelete
  13. স্বাস্থ্য হল আমাদের মানব জীবনের সম্পদ । স্বাস্থ্য সম্পর্কে মানুষের জানার আগ্রহ সেই আদিকাল থেকে । আর বর্তমানে হল অনলাইনের যুগ, সবই যখন হাতের মুঠে তখন আমরা স্বাস্থ্য সম্পর্কে আরো সহজ ভাবে জানতে পারছি । সহজেই শিখতে পারছি অনেক কিছু এখন স্বাস্থ্য সম্পর্কে সাধারণ একটি বিষয় জানতে আর কোন ডাক্তারের কাছে সরাসরি যেতে হয় না । প্রায় যে কোন বিষয় জানতে পারি ইন্টারনেট থেকে. বর্তমানে আমাদের দেশের ইন্টারনেট ব্যবস্থা অনেক উন্নত পাশাপাশি ইন্টারনেটে চালু হচ্ছে বিভিন্ন বিষয় বিত্তিক বিভিন্ন ওয়েবসাইট । আজ আমি আপনাদেরকে আমার দেখা স্বাস্থ্য বিষয়ক ওয়েবসাইট এর সন্ধান দিব ওয়েব সাইট লিংকঃ http://www.janatarhealth.com/

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top