bccb: Add code blocks to Blogger

Credit goes to: http://shanhua0131.blogspot.com/2014/01/code.html
Reference: https://code.google.com/p/google-code-prettify/wiki/GettingStarted

1. Use [Edit HTML] in "Template" to add following line into the header.
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script> 2. Then, go "Template", [Customize], [Advanced], [Add CSS] to paste following codes, and click [Apply to Blog]

.post .prettyprint { 
  display: block; /* fixes a strange ie margin bug */
  font-family: Courier New; 
  font-size: 10pt; 
  overflow:auto; 
  background: #f0f0f0 url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAASwCAYAAAAt7rCDAAAABHNCSVQICAgIfAhkiAAAAQJJREFUeJzt0kEKhDAMBdA4zFmbM+W0upqFOhXrDILwsimFR5pfMrXW5jhZr7PwRlxVX8//jNHrGhExjXzdu9c5IiIz+7iqVmB7Hwp4OMa2nhhwN/PRGEMBh3Zjt6KfpzPztxW9MSAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzB8HS+J9kUTvzEDMwAAAABJRU5ErkJggg==) left top repeat-y;
  border: 1px solid #ccc;
  padding: 10px 10px 10px 21px;
  max-height:200px;
  line-height: 1.2em;
}

As the result, codes will be prettified by the script when encapsulated by
<pre class="prettyprint"> def example: codes = here </pre> In some cases: <xmp class="prettyprint"> <some codes="" with=""> <html like="" tags=""> </html></some> <|xmp> (Note the slash need to be changed. It was replaced by vertical bar here for displaying purpose. For more detail, see this)

bccb

June 17, 2015

Add code blocks to Blogger

1 comment:

Blog Archive