Installation -
1. Log in to Blogger Dashboard > Design > Edit Hml
2. Check Expand Widgets and find ]]></b:skin>
3. Paste below code before ]]></b:skin>
/*--Code View--------------*/
code {
color: #000099;
font: 108% "Courier new",Courier,mono;
padding: 0 2px;
white-space: nowrap;
}
pre code {
-moz-box-shadow: 0 0 10px #DDDDDD;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcQjyDiKLdzMbBffr8g_jmUO2i2B1pwIvTW0B9_HrecY1x9fPuxWFz22Sm6gi_KZIJ0eIVpOmawWl122VhfRgJcGFba4dZhC8GMXjcVfERVAu48JGfw9VnxFJTs-n0hkhnuNVW4sSv-zvw/s1600/btsnts_color_background.png") repeat scroll 0 0 #FFFFFF;
border: 2px solid #CCCCCC;
clear: both;
color: #333333;
display: block;
font-size: 12px;
line-height: 15px;
margin: 10px auto 10px 30px;
overflow: auto;
padding: 15px;
white-space: pre;
width: 85% !important;
word-wrap: break-word;
}
code .comment {
color: #888;
}
code .class, code .rules {
color: #ff00ff;
font-size: 100%;
}
code .value, code .title, code .string {
color: #0000FF;
}
code .tag {
color: #000099;
}
code .keyword {
color: #000099;
}
.html .attribute {
color: #006600;
}
Live Demo
* Important Tips -1) If you want to show HTML/JavaScript codes in blogger posts then 1st
Escape them.
2) Before adding codes in post you have to type <pre><code> before code starts and </pre></code> after post ends.
tried this on my test blog and all though the code i added appeared there was no box around it or coloured background to highlight the code...also there was no need to use the pre code tags before or after or Escape the code first.
ReplyDeletewhy isn't my code sitting inside the coloured box like yours does in the preview and on your site?
Excellent Artical.Thank you very much for your hard work.
ReplyDeletePHP Online Training | Pega Online Training | Oracle Soa Online Training
Its good learning about HTML
ReplyDeletehttp://glimtechnologies.in/mainframe-training-in-chennai.html | http://glimtechnologies.in/informatica-training-in-chennai.html | http://glimtechnologies.in/hadoop-training-in-chennai.html | http://glimtechnologies.in/sap-mm-training-in-chennai.html | http://glimtechnologies.in/etl-testing-training-in-chennai.html