How to use code box in blogger

All the popular blogs use a type of box to display HTML/Javascript codes.

You might like to have a code box in your blogger or wordpress. It will become easy for anybody to locate the html code and easily copy and paste the code for using it. It will also give a well organised look to your blog posts. Just read and follow all the steps given below to get this function in your blogger blog for each post.

I am explaining two ways:


Option-1: Nice enough but heavy weight.

 Step-1: From blogger account. Go to Dashboard >> Template.

 Step-2: Switch to >> Edit HTML

 Step-3: Add all 4 .js files just before the closing body tag

<script src='https://dl.dropboxusercontent.com/u/15065300/enamita/prettify.js'/>
<script src='https://dl.dropboxusercontent.com/u/15065300/enamita/bootstrap.min.js'/>
<script src='https://dl.dropboxusercontent.com/u/15065300/enamita/init.js'/>
<script src='https://dl.dropboxusercontent.com/u/15065300/enamita/jquery.js'/>

Step-4: Again go to Customize >> Advanced >> Add CSS

Step-5: Copy and paste the following code:

.com { color: #93a1a1; }
.lit { color: #195f91; }
.pun, .opn, .clo { color: #93a1a1; }
.fun { color: #dc322f; }
.str, .atv { color: #D14; }
.kwd, .linenums .tag { color: #1e347b; }
.typ, .atn, .dec, .var { color: teal; }
.pln { color: #48484c; }


code,
pre {
  padding: 0 3px 2px;
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
  font-size: 12px;
  color: #333333;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}

code {
  padding: 2px 4px;
  color: #d14;
  background-color: #f7f7f9;
  border: 1px solid #e1e1e8;
}

pre {
  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 20px;
  max-height: 400px;
  min-height: 16px;
  overflow: auto;
  width: 95%;
  word-break: break-all;
  word-wrap: break-word;
  white-space: pre;
  white-space: pre-wrap;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

Step-6: Now when you compose new post , just select HTML Section and paste below code.

<pre class="prettyprint">

 // Add your code here

</pre>

Step-7: Have a smile... HTML Encoder or from here



 Option-2: Less nice but light weight.

 Step-1: From blogger account. Go to Dashboard >> Template.

 Step-2: Switch to >> Edit HTML

 Step-3: Add the below code just before the closing body tag

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

Step-5: Now when you want to post any code use the code as I have done below.

<pre class="prettyprint html">

 // Add your code here

</pre>

Step-6: Have a smile... HTML Encoder or from here

NB: If you like to use option-1. You can delete the unnecessary (if already have in your website) .js files one by one after implementing them.