20 Ways To Make $5000+ From Home. Earn Now!

Table of Content

How To Add Prism Syntax Highlighter In Blogger Template

adding syntax highlighter widget like wordpress style for javascript,css,html,jquery in blogspot website. Learn trick to add Install create implement prism syntax highlighter robust elegant for highlighting code snippet in blogger template.
How to implement add prism syntax highlighter for highlighting code in blogger template
Hello Folks,Today in this article we are going to share How to Add Prism Syntax Highlighter (Light Weight) For blogger template.we have already shared tutorial on Highlighting the code snippet in blogspot themes like Shortcode syntax highlighter . First prism code sharing widget is launched for wordpress now you can easily use in blogger template.Prism is very light weighted elegant syntax highlighter Robust.Syntax highlighter is written in java script and CSS.It is easily customizable and very simple to add in blogger websites or blog.Author of Prism Syntax Highlighter is Lea Verou you can reach her by visiting http://lea.verou.me/ . In syntax highlighter you can share your code snippets with numbering and colorful code display.You can add HTML , CSS , JAVASCRIPT and JQUERY in syntax highlighter.
The most important part of the prism elegant code snippet highlighter is that when you share HTML code you need to convert HTML entity by visiting this HTML Encode Tool in order to display the code in syntax highlighter.Still we have seen so many blogger website using blockquote to sharing codes with their readers.However you can modify block quote too but to display code in perfect view to visitors you must install Prism Syntax Highlighter in Blogger template.You can customize syntax highlighter css in order to change the view of codes display, heading of code snippet box ,fonts and colors.So to grab Prism Syntax Highlighter, Robuts, Elegant for your blogger template follow the steps mentioned below.
DEMO

How To Add Prism Syntax Highlighter In Blogger Template

Installation Steps:

Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.
Step 2. Now Click on -> Template -> Edit HTML.
Step 3. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys.
Step 4. Now Copy the below CSS code snippet and past just before/above </style> or ]]></b:skin>.

/* CSS Prism Syntax Highlighter By www.Bloggersstand.com */
pre {
    padding: 48px 10px 10px 10px;
    margin: .5em 0;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    background-color: #1F232A;
    position: relative;
    border-radius: 4px;
    max-height: 500px;
}

pre::before {
    font-size: 16px;
    content: attrundefinedtitle);
    position: absolute;
    top: 0;
    background-color: #666;
    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 select';
    padding: 2px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 8px;
    color: #fff;
    line-height: 20px;
    transition: all 0.4s 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: #607779;
    background-color: transparent;
    padding: 1px 2px;
    font-size: 12px;
}

pre code {
    display: block;
    background: none;
    border: none;
    color: #FEFEFE;
    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: #BEBCBC;
}

code .namespace {
    opacity: .8;
}

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

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

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

code .token.operator {
    color: #8ECEFE;
}

code .token.atrule,code .token.attr-value {
    color: #006B6B;
}

pre code .token.atrule,pre code .token.attr-value {
    color: #FEB380;
}

code .token.keyword {
    color: #9D2200;
    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: #FEAAAA!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: #A33636!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: counterundefinedlinenumber);
    color: #666;
    display: block;
    padding-right: 0.8em;
    text-align: right;
    transition: 350ms;
}

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

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

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

pre[data-codetype='JQuery']:before {
    background-color: #009999;
}
Step 5 . Now Search For Closing the </body> tag and copy the below java script and jquery paste all of them ( one by one ) just above/before </body>tag.
<script src='https://googledrive.com/host/0B58fhAmOxE7EbDFKTmhfRXFCRUk' type='text/javascript'></script>

Step 6. Now Save your Template

How To Add Prism Syntax Highlighter In Blogger Posts For Sharing Code

In order to add prism syntax (code) highlighter in blogger posts you need to add the html code in your posts.Just change your compose view mode to HTML mode and paste the desired code to display javascript , jquery , css or html choose tags and paste your codes between the tags and hit publish button.For Sharing HTML code you first must encode the code by visiting HTML ENCODER TOOL.
<pre title="HTML" data-codetype ="HTML"><code class="language-markup">HTML ESCAPED CODE HERE</code></pre>
<pre title="CSS" data-codetype ="CSS"><code class="language-css">CSS CODE HERE</code></pre>
<pre title="Javascript" data-codetype ="JavaScript"><code class="language-javascript">JAVASCRIPT CODE HERE</code></pre>
<pre title="jQuery" data-codetype ="JQuery"><code class="language-javascript">JQUERY CODE HERE</code></pre>

Post a Comment