Few days ago, I spent many hours in searching how to display html codes in my blog post and then I found this tip to do that. This is very useful because we can’t display html codes by directly pasting the code in compose or html mode.
We should put a short code first to our template then do a little code conversion.
By following this tutorial, you can now display or share your html codes or java scripts to your blog post.
Take a look at the example below.
<div dir="ltr" style="text-align: left;" trbidi="on">
<script src="http://yourjavascript.com/5710754551/site-map1.js" type="text/javascript"></script>
<script src="http://www.mediatorcorner.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript"> var accToc=true; </script>
<script src="http://yourjavascript.com/4221239320/site-map2.js" type="text/javascript">
</script></div>

Steps to display html codes in blogger posts

Let’s proceed to the steps:

  •  Log-in to your account, go to your template then edit HTML.
  • Ctrl+F then Search the </head>
  • Just above the </head>

, Copy and paste this code:

<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/shThemeEclipse.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/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script language='javascript' type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
  • Now your template is ready to display html codes, but we are not done yet. We need to convert first our raw HTML code to escaped HTML code in order the browser not to render it as code but show as txt.”<” will be replaced with ‘&lt;’ and ‘>’ will be replaced with “&lt;”. Convert your code to escaped HTML HERE
  • Go to html mode in your post and wrap your converted code with <pre> and </pre> tag. Follow the example below.

<pre class=’brush:xml’>
// Paste your converted HTML Code here
</pre>

  • We’re done!
  • I hope that this information helps you!

Feel free to leave comments!

This Post Has 2 Comments

  1. Ronny June 2, 2016 Reply

    Hello this is somewhat of off topic but I was wanting to know if blogs use WYSIWYG editors or if you have to manually code with HTML. I’m starting a blog soon but have no coding experience so I wanted to get guidance from someone with experience. Any help would be greatly appreciated!

    1. jacbizer June 15, 2016 Reply

      hello ronny, making blog doesn’t need too much coding experience. basic html and css knowledge will do..

      you don’t need to manually code all your posts. you have an option to use plain text or html.

Leave a Reply