Add Simple Pre code Highlighter with Selector in Blogger post

Add Simple Pre code Highlighter with Selector in Blogger post

Writing codes in blogger post are little tricky. But don't worry blogger logics presents a beautiful tool to write codes in blogger post. Add simple pre code Highlighter with selecting option to your blogger blog, It enables visitors to copy the source code as a text.
In an HTML document, the pre element represents preformatted text. This means your tab indents, double-spaces, newlines, and other typographic formatting will be preserved inside a pre element.
By default, browsers will display the content inside a pre element using a monospaced (or fixed-width) font such as Courier or Monaco. This is typical when displaying code, which, as we’ll see, is one of the primary uses for the pre element.

DEMO DISPLAY:

This For my frienda who often share blogger tutorial course, already familiar with the application of good code HTML, CSS, JavaScript or jQuery in the posting.And as a container for applying the codes on the post, my friend need to wrap each code with pre tags.

Please follow the below steps.

1-Header stuff:

Edit your blogger template. and add the below code just above the </head>.

<script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>

2-CSS

To install simple pre code with highlighting. Open blogger> Templates> Edit HTML and apply the code below right before the </ style> or]]> </ b: skin>

/* CSS Simple Pre Code */
pre {
    background: #ffffff;
    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;
}

3-JavaScript

Copy and paste the following code just above </body>

<script> $('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>

Conculusion: 

Writing codes in posts are so easy with "Write Codes in Simple Pre Code with selector"
Now finally you are done. I hope you liked the Simple Pre Code. For your suggestions and questions please comment. Thank you.