How to Implement Syntax Highlighter in Blogger or Blogspot Post.

To implement Syntax Highlighter function in Blogspot /Blogger's post, follow the below step by step procedure.

Step 1:

Open Blogger and go to template section and click on 'Edit Html' button.

i.e

Blogger> Template > Edit Html

Then copy the below code and paste it before

</style> tag.

	/* CSS Prism Syntax Highlighter */
	pre {
	padding: 50px 10px 10px 10px;
	margin: .5em 0;
	white-space: pre;
	word-wrap: break-word;
	overflow: auto;
	background-color: #2c323c;
	position: relative;
	border-radius: 4px;
	max-height: 500px;
	}

	pre::before {
	font-size: 16px;
	content: attr(title);
	position: absolute;
	top: 0;
	background-color: #eee;
	padding: 10px;
	left: 0;
	right: 0;
	color: #fff;
	text-transform: uppercase;
	display: block;
	margin: 0 0 15px 0;
	font-weight: bold;
	}

	pre::after {
	content: 'Double click to selection';
	padding: 2px 10px;
	width: auto;
	height: auto;
	position: absolute;
	right: 8px;
	top: 8px;
	color: #fff;
	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: #88a9ad;
	background-color: transparent;
	padding: 1px 2px;
	font-size: 12px;
	}

	pre code {
	display: block;
	background: none;
	border: none;
	color: #e9e9e9;
	direction: ltr;
	text-align: left;
	word-spacing: normal;
	padding: 0 0;
	font-weight: bold;
	}

	code .token.punctuation {
	color: #ccc;
	}

	pre code .token.punctuation {
	color: #fafafa;
	}

	code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
	color: #777;
	}

	code .namespace {
	opacity: .8;
	}

	code .token.property,code .token.tag,code .token.boolean,code .token.number {
	color: #e5dc56;
	}

	code .token.selector,code .token.attr-name,code .token.string {
	color: #88a9ad;
	}

	pre code .token.selector,pre code .token.attr-name {
	color: #fafafa;
	}

	pre code .token.string {
	color: #40ee46;
	}

	code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
	color: #ccc;
	}

	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: #2c323c;
	}

	.comments pre::before {
	content: 'Code';
	font-size: 13px;
	position: relative;
	top: 0;
	background-color: #f56954;
	padding: 3px 10px;
	left: 0;
	right: 0;
	color: #fff;
	text-transform: uppercase;
	display: inline-block;
	margin: 0 0 10px 0;
	font-weight: bold;
	border-radius: 4px;
	border: none;
	}

	.comments pre::after {
	font-size: 11px;
	}

	.comments pre code {
	color: #eee;
	}

	.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;
	pointer-events: none;
	top: 0;
	font-size: 100%;
	left: -3.5em;
	width: 3em;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	padding: 0;
	}

	.line-numbers-rows > span {
	pointer-events: none;
	display: block;
	counter-increment: linenumber;
	}

	.line-numbers-rows > span:before {
	content: counter(linenumber);
	color: #999;
	display: block;
	padding-right: 0.8em;
	text-align: right;
	transition: 350ms;
	}

	pre[data-codetype='CSSku']:before {
	background-color: #00a1d6;
	}

	pre[data-codetype='HTMLku']:before {
	background-color: #3cc888;
	}

	pre[data-codetype='JavaScriptku']:before {
	background-color: #75d6d0;
	}

	pre[data-codetype='JQueryku']:before {
	background-color: #e5b460;
	}

view raw Step:1 HTML - (Syntax Highlighter) hosted with ❤ by GitHub

Step 2:
After the above step, copy the below three codes and paste before the </body> or </head> tags.

<script src='https://arlina-design.googlecode.com/svn/prism.js' type='text/javascript'/>

view raw Step:2 Java Script (Syntax Highlighter) hosted with ❤ by GitHub

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

view raw Step:2 J-query (Syntax Highlighter) hosted with ❤ by GitHub

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

view raw Step:2 J-query(2) (Syntax Highlighter) hosted with ❤ by GitHub

Save the template.

Step 3:
When you create a new post, apply the below callers on the Html tab of post in Blogger.

	<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ..Insert your HTML Code here.. </code></pre>
	<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ..Insert your CSS Code here.. </code></pre>
	<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ..Insert your Java Script Code here.. </code></pre>
	<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ..Insert your JQuery Code Here.. </code></pre>