Hello, Reader's many days later we have comes again. Hopefully all you have well. Today we start a amazing tutorial about Html, CSS, JavaScript, and Jquery all together called Syntax Code.
The Tutorial Name: Syntax Code Highlighter / Highlihgting
Syntax Highlighting is one of the most important part of blogger. Who want to share any post related Blogspot Trick and Tips, Widget, etc... the tutorial for him.
Step: 1* At first Go to your blogger Dashboard > Template > Edit HTML and copy past below CSS code just before </Style>
Step: 2* Now again copy past below 3 code before </body>
Step: 3* Save the Template
Step: 4* Then when you create a new post, use the code on 'HTML' Tab and past your code in the place of "... Your HTML Code HERE ..." at the time of 'Compose' Tab
The Tutorial Name: Syntax Code Highlighter / Highlihgting
Whats is Syntax Highlighting?
Syntax Highlighting is a feature of text editors that are used for programming, scripting, or markup languages, such as HTML. The feature displays text, especially source code, in different colors and fonts according to the category of terms.Syntax Highlighting is one of the most important part of blogger. Who want to share any post related Blogspot Trick and Tips, Widget, etc... the tutorial for him.
Important Features
- Highlight CSS language
- Highlight HTML language
- Highlight JavaScript language
- Highlight Jquery language
- Highlight embedded languages {i.e. CSS inside HTML, JavaScript inside HTML}
- Highlight inline code as well, not just code blocks
How to install prism syntax code highlighter?
Step: 1* At first Go to your blogger Dashboard > Template > Edit HTML and copy past below CSS code just before </Style>
/* 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: #aaa;
direction: ltr;
text-align: left;
word-spacing: normal;
padding: 0 0;
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: #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: #CC00FF;
}
pre[data-codetype='JQueryku']:before {
background-color: #e5b460;
}
Step: 2* Now again copy past below 3 code before </body>
<script src='https://cdn.rawgit.com/msdesign92/ms-design/master/pismaa.js' type='text/javascript'/>
<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>
Step: 3* Save the Template
Step: 4* Then when you create a new post, use the code on 'HTML' Tab and past your code in the place of "... Your HTML Code HERE ..." at the time of 'Compose' Tab
<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 JQueryuery Code Here ... </code></pre>
Categories:
Blogspot
CSS
HTML
Javascript
Widget
Read More
