How to add code block into blogger posts
This post will guide you the way to add a code block into your post MANUALLY. You may find a lot of tutorials that have widgets already built and pack to do this. I really think you should write code to do it at least to know the way it works.
Assume that you got a text need to be added to code block:
TRACE-SOLUTION.COM
Now, open your blog, take a new post, go to Edit HTML tag. Finally add this code to your HTML editor:
<style type="text/css">
pre.CICodeFormatter{
font-family:arial;
font-size:12px;
border:1px dashed #CCCCCC;
width:99%;
height:100px;
overflow:auto;
background:#f0f0f0;
line-height:20px;
padding:0px;
color:#000000;
text-align:left;
}
pre.CICodeFormatter code{
color:#000000;
word-wrap:normal;
}
</style>
<pre class="CICodeFormatter" ><code class="CICodeFormatter"> TRACE-SOLUTION.COM
</code></pre>
Now switch to Compose to see your result
TRACE-SOLUTION.COM
From now onwards, anytime you want to add a code block into your post, just use this trick.
Comments
Post a Comment