Well first you add the following two ‘ google-code ’ lines near the end of the </head> section of your html. In order to do so. Choose customize, and then edit html. After the body tag, an ‘ onload= ’ event should be inserted.
<head>
<!--
...lots of stuff...
...and then some more...
-->
<link href="https://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css" rel="stylesheet"/>
<script src="https://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript"></script>
<!-- prettify -->
</head>
<body onload="prettyPrint()">
In the advanced section, you add the following as custom css. I use a light-gray background, as it contrasts best (it must stand out!) with the dark theme-colors I use. Please adjust your coloring accordingly. 😉
pre.prettyprint {
overflow-x: auto;
margin: 5px 20px 20px;
color: #FFDEAD;
background-color: #CECECE;
}
And you should be good to go. 😉 As evidenced by the resulting code-blocks being highlighted and all that. 😀 Just make sure, when you use syntax highlighting to display for example: xml or html. To encode the opening < (as <) and closing > (as >) accordingly. 😉 As I noticed half of my code disappeared when I just used a plain paste from my text-editor. 🙂
Source: Coding and the cross.
Darn it, I forget to say HOW to add your code: lol
<pre class="prettyprint">
<code>
Your code here.
</code>
</pre>
Yet another fine blog…. 😅 