How to show source code of HTML or program beautifully on Google Blogger

In our company, basically we share our knowledge and know-how on blog. Not only we share them among members of our company but also we can publish them all. This blog is build on Google Blogger. In this blog, I'd like to introduce one of the way to show source code beautifully. I hope this helps you write tech blog!


It's just load "Google Code Prettify".
The way to use is to put this script tab just before </head> tag like this.

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css&amp;skin=sunburst"></script>

</head>

We can choose from some styles. The sample above is for sunburst. After you put this script tag, all you have to do is to enclose source code with pre tag like this.

<pre class="prettyprint linenums">
Here's source code
</pre>

*Please note that you can write source code strings on create mode but you need to put pre tags on HTML mode.

If you liked this article

Let's subscribe the updates of Scuti!

Share on Google Plus

About Tomohide Kakeya

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.