How to Show HTML, CSS pre code in Prism Syntax on Blogger

Now I will show you how to make Prism Syntax in blogspot platform. This feature will help you if your blog talking about blogging tutorial. Any time you will need to share HTML, CSS, Javascript or jQuery Code to show. To make its different with your post we can use Prism Syntax. For example, You can see th box where I put some code that you will copy next. Scroling down now.

Step 1. Go to your blogger. Choose Theme in left side. Now Edit HTML. You will see a box with a code. Now click anywhere on the box. Press CTRL+F in keyboard and then type ]]><:/bskin>. Thus, put this code above ]]><:/bskin>

CSS/* CSS Prism Syntax 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;
}

Step 2. Now you press CTRL+F again. but Type </body> then above this tag you put CSS Code below.

JS<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>

Step 3. Save Your Theme/Template. Now to write on your post. Open the page where you post content. Write your content. Now, Choose HTML write mode (button left of your Title Post). You put this HTML code. Before you put your code, you have to parse the code. To parse HTML/Javascript code you can do in the page : PARSE HTML.

HTML<pre class='code code-html'><label>HTML</label><code>...Your HTML CODE (Parsed) ...</code></pre><br/>
<pre class='code code-css'><label>CSS</label><code>... Your CSS CODE ...</code></pre><br/>
<pre class='code code-javascript'><label>JS</label><code>... YOUR JAVASCRIPT CODE ...</code></pre><br/>
<pre class='code code-jquery'><label>Jquery</label><code>... Your jQuery Code ...</code></pre><br/>

Now Publish your post. Your HTML/CSS will show in the special box.