How To Add Together Prism Syntax Highlighter Inwards Blogger Template

Hello Folks,Today inward this article nosotros are going to portion How to Add Prism Syntax Highlighter (Light Weight) For blogger template.we convey already shared tutorial on Highlighting the code snippet inward blogspot themes similar Shortcode syntax highlighter . First prism code sharing widget is launched for wordpress similar a shot you lot tin easily role inward blogger template.Prism is really calorie-free weighted elegant syntax highlighter Robust.Syntax highlighter is written inward java script in addition to CSS.It is easily customizable in addition to really unproblematic to add together inward blogger websites or blog.Author of Prism Syntax Highlighter is Lea Verou you lot tin accomplish her past times visiting http://lea.verou.me/ . In syntax highlighter you lot tin portion your code snippets amongst numbering in addition to colorful code display.You tin add together HTML , CSS , JAVASCRIPT in addition to JQUERY inward syntax highlighter.
The almost of import business office of the prism elegant code snippet highlighter is that when you lot portion HTML code you lot request to convert HTML entity past times visiting this HTML Encode Tool inward social club to display the code inward syntax highlighter.Still nosotros convey seen in addition to hence many blogger website using blockquote to sharing codes amongst their readers.However you lot tin modify block quote likewise but to display code inward perfect sentiment to visitors you lot must install Prism Syntax Highlighter inward Blogger template.You tin customize syntax highlighter css inward social club to alter the sentiment of codes display, heading of code snippet box ,fonts in addition to colors.So to catch Prism Syntax Highlighter, Robuts, Elegant for your blogger template follow the steps mentioned below.

DEMO

See the Pen Install Prism Syntax Highlighter Robust,Elegant In Blogger Template past times (@bloggersstand) on CodePen.

How To Add Prism Syntax Highlighter In Blogger Template

Installation Steps:

Step 1. Log inward to your Blogger draw of piece of job organization human relationship in addition to Go to your Blogger Dashboard.

Step 2. Now Click on -> Template -> Edit HTML.
Step 3. Now Search for ]]></b:skin> or </style> past times Pressing Ctrl+F keys.
Step 4. Now Copy the below CSS code snippet in addition to past times simply 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 grade {     background-color: #FEAAAA!important;     color: #fff!important;     padding: 2px;     border-radius: 2px; }  code grade {     background-color: #ea4f4e!important;     color: #fff!important;     padding: 2px;     border-radius: 2px; }  pre code grade {     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 > bridge {     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 five . Now Search For Closing the </body> tag in addition to re-create the below coffee script in addition to jquery glue all of them ( i past times i ) simply 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 social club to add together prism syntax (code) highlighter inward blogger posts you lot request to add together the html code inward your posts.Just alter your compose sentiment trend to HTML trend in addition to glue the desired code to display javascript , jquery , css or html select tags in addition to glue your codes betwixt the tags in addition to hitting release button.For Sharing HTML code you lot get-go must encode the code past times visiting HTML ENCODER TOOL.

<pre title="How To Add Prism Syntax Highlighter In Blogger Template" data-codetype ="HTML"><code class="language-markup">HTML ESCAPED CODE HERE</code></pre> <pre title="How To Add Prism Syntax Highlighter In Blogger Template" data-codetype ="CSS"><code class="language-css">CSS CODE HERE</code></pre> <pre title="How To Add Prism Syntax Highlighter In Blogger Template" data-codetype ="JavaScript"><code class="language-javascript">JAVASCRIPT CODE HERE</code></pre> <pre title="How To Add Prism Syntax Highlighter In Blogger Template" data-codetype ="JQuery"><code class="language-javascript">JQUERY CODE HERE</code></pre>