How to display code in blogger

Using Google Code Prettify

Method 1: Using the HTML/Javascript Gadget feature
1. Layout->Add a Gadget＞HTML/Javascript

2. Copy the following context,

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

3. In each blog HTML, place before the code,

<pre class = "prettyprint">

and place after the code

</pre>

4. Google Code Prettify has different Skin choices，just need to modify the script,

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert"></script>

Method 2: Modify the Theme HTML
1: Find </head> inside the HTML;

2: Before the </head>, copy the following lines:

<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>

3. In each blog HTML, place before the code,

<pre  class = "prettyprint">

and place after the code

</pre>

Done.

Bonus:

1: If you want to show the code line number, add the following lines before </head> in the Theme HTML,

<style>
li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8
{ list-style-type: decimal !important }
</style>

2: If you want to modify the code background and other parameters, try to place the following lines in the same place,

<style>
CODE {
display: block; /* fixes a strange ie margin bug */
font-family: Calibri (Body);
font-size: 12pt;
overflow:auto;
background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:4000px;
line-height: 1.2em;
}
</style>

3. In each blog HTML, place before the code,

<pre class = "prettyprint linenums code">

and place after the code

</pre>

Done.