How to highlight html-Css-Javascript codes in blogger posts.

Add Codes to blogger post

Are you about to write a tutorial and wondering how to add codes in blogger? Are you looking for ways to beautify your blogger blog posts with organized code formats?

If yes? Then you're in the right place.

You might want to start writing tutorials and all you want is to present the codes in a nice way, different from the normal texts.

I'm going to give you a hassel free solution to this problem. 

But first, here are some articles you might be interested in reading.

Syntax highlighter as you know is a fully functional self-contained code syntax highlighter developed in JavaScript. Which helps you prettify your source codes by representing them in different colours and font and displays it in an organized numbered list style. 

Most Blogspot users often share HTML, CSS or JavaScript codes with their audience in line with ordinary texts and codes but with this new shortcode you can better display scripts on your sites in a presentable way. 

This hack neatly displays web technologies such as HTML, CSS, JavaScript, Php, Python, Sql, xml etc. The codes are displayed line by line number wise or other wise. 

Online Converter Method.

This easy to use method doesn't even require you to edit your blogger theme's HTML at all. All you need to do is convert the source code you want add to your blogger blog post using a simple online converter to a styled code with written CSS codes integrated into the output code.

A step by step process;

Step #1: Copy the code you want to add to blog post. 

Step #2: Go to  Markup highlighter, paste the code you just copied to convert this code to one that can easily embedded into posts directly. You can change the style if you choose.

Step #3: Then Copy the converted code format.

Step #4: Sign into your blogger account > select posts.

Step #5: Select the post you want to add the highlighted codes, switch to HTML mode and paste the codes then switch back to compose mode to see the result.

Copy converted codes

Blogger Compose mode

Results; If you tick "Line Numbers

It also provides the user with options to Print the code, copy it to clip board or to see the code Source. With Syntax Highlighter Shortcode you can add codes not only inside your posts or sidebar widgets but you can also insert it inside Blogger comments!

Though they are other ways to do this, this is by far the easiest. Have any questions leave your comments below.

Related posts.

Post a comment


  1. This is indeed a nice post
    Thank you bloggertruth for this great tip

    Have a nice day
    Commenting from

  2. This is a very nice post.
    It really love the fact it does not require any coding.