Syntax Highlighter gives your blogger a professional and pleasant look. Sometimes we use to publish the mixture of codes like Jquery, CSS, HTML, JavaScript and many more in our blog posts without Syntax Highlighter and they looks annoying, non-professional. Therefore, a visitor/blog reader do not understand such codes properly.
Pay Attention: Prism Syntax Highlighter Shortcode For BlogSpot Blogs
Syntax Highlighter highlights the codes in an amazing way and it defines the language of the codes nicely. This Syntax Highlighter is known as the Prism. Prism defines the multiple code languages such as Jquery, CSS, HTML5, JavaScript, JavaScript in CSS, CSS in JavaScript, CSS in HTML5 and much more.
Demo
Click here
Installing The Syntax Highlighter to Blogger
- Go to your blogger Dashboard > Template > Edit HTML.
- Click anywhere inside the template editor and press Ctrl + F to locate the </body>
- Paste the following piece of codes just before the </body>.
- At this step, you have to fins the <head> and past the given code right below it
- Now repeat the step number 1 but here your have to locate the </style> instead of </body>
- Click Save Template.
<script> $('pre').attr('class', 'line-numbers'); Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)}) </script>
<script type='text/javascript'> var pres = document.getElementsByTagName("pre"); 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>
<script type="text/javascript" src="https://cdn.rawgit.com/knigulper/github.io/gh-pages/www.knigulper.com/prettyprint.js"></script>
Some blogger templates do not have the </style>. Therefore, in this situation find the ]]></b:skin> and just above the </style> or ]]></b:skin> add this CSS code.
/* CSS Syntax Highlighter */ pre {padding:35px 10px 10px 10px;margin:.5em 0;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#333;position:relative;max-height:500px;box-shadow:0 0 0 1px #eee;border-radius:3px;} pre::before {font-size:13px;content:attr(title);position:absolute;top:0;background-color:transparent;padding:6px 10px 7px 10px;left:0;right:0;color:#333;display:block;margin:0 0 15px 0;font-weight:700;box-shadow:0 0 3px #ccc;} pre::after {content:"Double click to selection";padding:2px 10px;width:auto;height:auto;position:absolute;right:8px;top:4px;font-size:12px;color:#888;line-height:20px;transition:all 0.3s ease-in-out;} pre:hover::after {opacity:0;top:-8px;visibility:visible;} code {font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:16px;color:#aaa;background-color:transparent; padding:1px 2px;font-size:12px;} pre code {display:block;background:none;border:none;color:#aaa;direction:ltr; text-align:left;word-spacing:normal;padding:10px;font-weight:bold;} code .token.punctuation {color:#bbb;} pre code .token.punctuation {color:#777;} code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {color:#aaa;} code .namespace {opacity:.8;} code .token.property,code .token.tag,code .token.boolean,code .token.number {color:#d75046;} code .token.selector,code .token.attr-name,code .token.string {color:#88a9ad;} pre code .token.selector,pre code .token.attr-name {color:#00a1d6;} pre code .token.string {color:#6fb401;} code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {color:#5ac954;} code .token.operator {color:#1887dd;} code .token.atrule,code .token.attr-value {color:#009999;} pre code .token.atrule,pre code .token.attr-value {color:#1baeb0;} code .token.keyword {color:#e13200;font-style:italic;} code .token.comment {font-style:italic;} code .token.regex {color:#ccc;} code .token.important {font-weight:bold;} code .token.entity {cursor:help;} pre mark {background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px;} code mark {background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px;} pre code mark {background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px;} .comments pre {padding:10px 10px 15px 10px;background:#333;border-radius:3px;box-shadow:inset 0 0 5px rgba(0,0,0,0.2);text-shadow:0 -1px 0 rgba(0,0,0,0.3);} .comments pre::before {content:'Code';font-size:10px;font-weight:700;position:relative;top:0;background-color:#363636;padding:2px 8px;left:0;right:0;color:#fff;text-transform:uppercase;display:inline-block;margin:0 0 10px 0;border:none;border-radius:2px;border:1px solid #2a2a2a;box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),inset 0 20px 20px rgba(255,255,255,0.1);text-shadow: 0 -1px 0 rgba(0,0,0,0.3);} .comments pre::after {font-size:11px;} .comments pre code {color:#aaa;} .comments pre.line-numbers {padding-left:10px;} pre.line-numbers {position:relative;padding-left:3.0em;counter-reset:linenumber;} pre.line-numbers > code {position:relative;} .line-numbers .line-numbers-rows {height:100%;position:absolute;top:0;font-size:100%;left:-3.5em;width:3.5em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;padding:10px 0 0 0;background:#444;} .line-numbers-rows > span {display:block;counter-increment:linenumber;} .line-numbers-rows > span:before {content:counter(linenumber);color:#aaa;display:block; padding-right:0.8em;text-align:right;transition:350ms;} pre[data-codetype="CSSku"]:before,pre[data-codetype="HTMLku"]:before, pre[data-codetype="JavaScriptku"]:before,pre[data-codetype="JQueryku"]:before{background-color:#fff;}
Anytime, when you create a new post, add the follow HTML caller codes.
<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... YOUR HTML CODE HERE ... </code></pre>
<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ... YOUR CSS CODE HERE ... </code></pre>
<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... YOUR JAVASCRIPT CODE HERE ... </code></pre>
<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... YOUR jQuery CODE HERE ... </code></pre>
How to Use Syntax Highlighter in Blogger Posts?
Whenever, you publish the codes in your blog posts, convert HTML into XML format. In case, if you don't know how to convert into XML format go to Online HTML to XML Converter and save your precious time by converting them online with a single click.
- Go to your blogger post editor and switch to HTML
- When you finish you blogger post, click Compose and next Publish your post as usual
I assume, you want to highlight the following JavaScript codes:
<script src="https://cdn.rawgit.com/knigulper/github.io/gh-pages/www.knigulper.com/sitemap.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=loadtoc" type="text/javascript"></script>
It should be added as explained below:
<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"><script src="https://cdn.rawgit.com/knigulper/github.io/gh-pages/www.knigulper.com/sitemap.js" type="text/javascript"></script><script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script> </code></pre>
If you face any problem or difficulty or have a question regarding this tutorial, feel free to post your valuable comments in the comment section below.
Speak Your Mind