Add Simple Pre Code for Blogger With Text Selection

We all are using Pre code instead of Blockquote to get a custom look and feel for our website or blog. But for using pre code you must add a big chunk of code in your Blog and sometimes it affect the loading time.

But there is always an alternative way exists. So In this tutorial, I will show you about adding a simple custom pre code with Simple CSS and JavaScript. This looks professional. And you can serve your widget code in different ways.

Live Demo

As usual first of all go to blogger template editor and copy and paste below code before ]]></b:skin> or </style>

/* CSS Simple Pre Code */
pre {
    background: #fff;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
}
pre.code {
    margin: 20px 25px;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.08);
}
pre.code label {
    font-family: sans-serif;
    font-weight: normal;
    font-size: 13px;
    color: #444;
    position: absolute;
    left: 1px;
    top: 16px;
    text-align: center;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}
pre.code code {
    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    display: block;
    margin: 0 0 0 60px;
    padding: 15px 16px 14px;
    border-left: 1px solid #d9d9d9;
    overflow-x: auto;
    font-size: 13px;
    line-height: 19px;
    color: #444;
}
pre::after {
    content: "double click to selection";
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 12px;
    color: #aaa;
    line-height: 20px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 0.3s ease;
}
pre:hover::after {
    opacity: 0;
    visibility: visible;
}
pre.code-css code {
    color: #0288d1;
}
pre.code-html code {
    color: #558b2f;
}
pre.code-javascript code {
    color: #f57c00;
}
pre.code-jquery code {
    color: #78909c;
}

After that copy and paste below code just before </body>

<script type='text/javascript'>
//<![CDATA[
//Pre Auto Selection
$('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
//]]>
</script>

The above code helps you copy the Pre code content by double clicking inside it.

After that save your template.

You can call this custom pre code anywhere in your blog post or website using the below code,

<pre class='code code-html'><label>HTML</label><code>... HTML ...</code></pre>
<pre class='code code-css'><label>CSS</label><code>... CSS ...</code></pre>
<pre class='code code-javascript'><label>JS</label><code>... JavaScript ...</code></pre>
<pre class='code code-jquery'><label>Jquery</label><code>... JQuery ...</code></pre>

That's all. You can customize this code according to your wish. Thank You!