Tuesday, October 9, 2012

How to use highlight.js with Blogger

This is simple walkthrough of how to add syntax highlighting to a Blogger blog.  Specifically, we will use the highlight.js javascript/css sources.  This will turn boring code snippets like this:

#include 
int main() {
    printf("Hello, world!\n");
}
into highlighted beauties like this:
#include 
int main() {
    printf("Hello, world!\n");
}

The steps are loosely defined at the highlight.js home here.
  1. Click the "Template" link on your Blogger page.
  2. Click "Edit HTML"
  3. Add the following to your <head>...</head>:
        <link href='http://yandex.st/highlightjs/7.2/styles/ir_black.min.css' rel='stylesheet'/>
        <script src='http://yandex.st/highlightjs/7.2/highlight.min.js'/>
        <script>
          hljs.initHighlightingOnLoad();
        </script>

  4. Wrap your code in <pre><code> # YOUR CODE HERE </code></pre> tags.
  5. There is no step five.  That's it!



10 comments:

  1. I have problem when i insert tag for example





    it will appear nothing but pre only
    how you can insert tag?

    oh yeah, i have created post in html editing

    ReplyDelete
  2. thank you so much! very usefully for me!

    ReplyDelete
  3. Wow, great website! I absolutely appreciated the articles material! Please keep it up writing about these postings, I’m able to more likely be subscribing subsequent!
    website design

    ReplyDelete
  4. I want to thanks to you for that. It's really working good but I have a problem like this: When I write the more or long codes in one line, the codes are overflow the code block :(

    How do I solve this problem?

    ReplyDelete
  5. Easton Bell Electrical are your Melbourne based electricians, and it is our priority that
    we provide you with a friendly and courteous service while being professional and well presented.
    We pride ourselves on being on time and discussing with you what work suits you best. And best of all,

    We Clean Up!Brighton Electrician

    ReplyDelete
  6. Thanks Mike. Keep up the good work

    ReplyDelete
  7. After reading highlight js documentation, I was still missing a step. This blog post is much clearer and easy to understand. Brilliant - thanks! :)

    ReplyDelete
  8. can i use this code into textarea ? thank you.

    ReplyDelete