I want to add a code viewer in Google Blogger like in image given below. How can I add it please help.

Code viewer

  • I'm voting to close this question as off-topic because this question is not about writing, but about programming. Commented May 25, 2018 at 6:39
  • This question is about blogging software and how to use it, which is on-topic. That the OP wants to include technical stuff like programming code is irrelevant and doesn't make the question off-topic.
    – Secespitus
    Commented May 25, 2018 at 8:16

4 Answers 4


There is no native way to do this in Blogger it appears (ie - no button you can click on the editor toolbar to insert a block of formatted code) - however, there are plugins and css / javascript solutions you could try - some of those programmatic solutions can be found here in StackOverflow that discusses this at length:


Another solution: http://rusya7.blogspot.com/2015/02/how-to-insert-code-blocks-in-blogger.html

Good luck!


Just choose html mode, then write

<code> some code </code>

Then switch back to the normal mode, the paste your codes in replace of the "some code"

  • The only thing to note on this solution is it won't add a 'template' as the OP inquired about; it's a pretty vanilla solution. The nice thing is this is a semantic HTML solution with no scripts needed, but at the end of the day really just changes the font of the code.
    – atconway
    Commented Dec 20, 2019 at 22:41

Hilite.me is a good quick way. Copy/paste the HTML code then into your blog post. You might need to switch from Compose View to HTML View.

Alternatively I like to copy/paste from my code editor Visual Studio Code. (no need to switch to HTML View) This will take over the coloring/ syntax highlighting from your editor. It might work as well with other Editors.

If I have bigger portion of code, I like to create a public gist and paste the embed HTML code in the HTML code of the blog.

  • your alternative is superb, upvote Commented Feb 9, 2023 at 23:35

To add code snippet or examples in your blogs, you can use:

  1. Block Codes
  2. planetB Syntax highlight code
  3. Code Blocks Add-ons for Google Doc
  4. markup.su Highlighter
  5. halite.me
  6. Github gist
  • Welcome to Writing.SE! Could you edit the relevant information from your blog post into your answer? Currently, a) this is little more than a spam ad for your blog, b) if, God forbid, something should happen to your blog, your answer will become useless.
    – F1Krazy
    Commented Apr 24, 2020 at 14:58
  • Your link adds nothing to the rest of the answer, which is useful.
    – Chenmunka
    Commented Apr 24, 2020 at 17:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.