Load More
Trendy Right Now
Navigation
Home Gadget How to Install Syntax Highlighter blog
Gadget

How to Install Syntax Highlighter blog

May 16, 2017
Share it:





it would be nice if pal One-GO! read the previous article that discusses What is that Syntax Highlighter?, If buddy One-GO!already on know, we just continue how to How to Install Syntax Highlighter blog.
Syntax Highlighter uses Syntax Highlighter from Software Maniacs , similar to what I use on this blog, Only on how it looks may be different. The scripts that I share this already comes with the double click to copy his code, so if on the template buddy, One-GO! already equipped JS to copy the tag pre, please just get rid of that code.



How to install on Blogspot

  • Login to your blogger account Mate One-GO! >> Template
  • Click Edit HTML
  • Keyboard press Ctrl + F Then Find the code ]]></b:skin>
  • Put the CSS code below above the code ]]></b:skin>
Spoiler for Code CSS Syntax Highlighter Tutup 
 pre, i[rel="pre"] {
 display: block;
 padding: 5px .5em 5px 1em;
 font: normal normal 12px/15px "Inconsolata", "Monaco", "Consolas", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
 background-color: #e6e9f1;
 border-left: 4px solid #A30000;
 position: relative;
 overflow: auto;
 word-wrap: normal;
 white-space: pre;
 ;
}
pre:hover, i[rel="pre"]:hover {
 background-color: #DDE0E7;
 ;
}
pre code {
 display: block;
 color: #111;
 font: normal normal 12px/15px "Inconsolata", "Monaco", "Consolas", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
 letter-spacing: 0;
 white-space: pre;
 ;
}
pre[rel="HTML"], pre[data-codetype="HTML"] {
 border-left-color: #0B7E88;
 ;
}
pre[rel="CSS"], pre[data-codetype="CSS"] {
 border-left-color: #5DA028;
 ;
}
pre[rel="JavaScript"], pre[data-codetype="JavaScript"] {
 border-left-color: #40627E;
 ;
}
pre[rel="JQuery"], pre[data-codetype="JQuery"] {
 border-left-color: #40627E;
 ;
}
pre[rel="JQuery UI"], pre[data-codetype="JQuery UI"] {
 border-left-color: #40627E;
 ;
}
pre[rel="XML"], pre[data-codetype="XML"] {
 border-left-color: #C44032;
 ;
}
pre[rel*="+"], pre[data-codetype*="+"] {
 border-left-color: #0B7E88;
 ;
}
pre .comment, pre .template_comment, pre .diff .header, pre .doctype, pre .lisp .string, pre .javadoc {
 color: #00BB4B;
 font-style: italic;
 ;
}
pre .keyword, pre .css .rule .keyword, pre pre .winutils, pre .javascript .title, pre .method, pre .addition, pre .css .tag, pre .lisp .title {
 color: #859900;
 ;
}
pre .number, pre .command, pre .string, pre .tag .value, pre .phpdoc, pre .tex .formula, pre .regexp, pre .hexcolor {
 color: #A60A0A;
 ;
}
pre .title, pre .localvars, pre .function .title, pre .chunk, pre .decorator, pre .builtin, pre .built_in, pre .lisp .title, pre .identifier, pre .title .keymethods, pre .id {
 color: #103197;
 ;
}
pre .tag .title, pre .rules .property, pre .django .tag .keyword {
 font-weight: bold;
 ;
}
pre .attribute, pre .variable, pre .instancevar, pre .lisp .body, pre .smalltalk .number, pre .constant, pre .class .title, pre .parent, pre .haskell .label {
 color: #0499D3;
 ;
}
pre .preprocessor, pre .pi, pre .shebang, pre .symbol, pre .diff .change, pre .special, pre .keymethods, pre .attr_selector, pre .important, pre .subst, pre .cdata {
 color: #cb4b16;
 ;
}
pre .deletion {
 color: #dc322f;
 ;
}
pre .tex .formula {
 background: #073642;
 ;
}
pre.numbered {
 border-left-width: 2px;
 padding-left: 1em;
 ;
}
pre .line-number, pre.numbered code {
 display: block;
 line-height: 16px;
 ;
}
pre .line-number {
 float: left;
 margin: 0 1em 0 -1em;
 color: #586E75;
 border-right: 2px solid #9B9DA1;
 text-align: right;
 min-width: 35px;
 ;
}
pre .line-number span {
 display: block;
 position: relative;
 padding: 0 .5em 0 1em;
 ;
}
pre .line-number span:nth-child(even) {
 background-color: #FAFAFA;
 ;
}
pre .line-number span em {
 position: absolute;
 bottom: -1px;
 left: 100%;
 background-color: red;
 padding: 0 2px 1px 2px;
 border: 1px solid black;
 font-style: normal;
 color: black;
 display: none;
 ;
}
pre .line-number span:hover em {
 display: block;
 ;
}
pre .line-number span:target a {
 display: block;
 color: white;
 position: relative;
 background-color: #268bd2;
 margin: 0 -.5em 0 -1em;
 padding: 0 .5em 0 0;
 ;
}
pre.numbered code span {
 line-height: 12px;
 ;
}
pre[data-codetype="HTML"] .line-number span:target a {
 background-color: #4584BE;
 ;
}
pre[data-codetype="CSS"] .line-number span:target a {
 background-color: #5DA028;
 ;
}
pre[data-codetype="JavaScript"] .line-number span:target a {
 background-color: #bbbbbb;
 ;
}
pre[data-codetype="JQuery"] .line-number span:target a {
 background-color: #7073CF;
 ;
}
pre[data-codetype="JQuery UI"] .line-number span:target a {
 background-color: #E36B23;
 ;
}
pre[data-codetype="XML"] .line-number span:target a {
 background-color: #C44032;
 ;
}
pre[data-codetype*="+"] .line-number span:target a {
 background-color: #0B7E88;
 ;
}
pre[rel], pre[data-codetype]:before {
 content: attr(data-codetype);
 display: block;
 position: static;
 top: 0;
 right: 0;
 left: 0;
 background-color: #666;
 padding: 5px 7px;
 margin: -5px -6px 0 -12px;
 font: bold 11px/20px Arial, Sans-Serif;
 color: white;
 ;
}
pre[rel="CSS"], pre[data-codetype="CSS"]:before {
 background-color: #5DA028;
 ;
}
pre[rel="JavaScript"], pre[data-codetype="JavaScript"]:before {
 background-color: #40627E;
 ;
}
pre[rel="HTML"], pre[data-codetype="HTML"]:before {
 background-color: #0B7E88;
 ;
}
pre[rel="JQuery"], pre[data-codetype="JQuery"]:before, pre[rel="JavaScript"], pre[data-odetype="JavaScript"]:before {
 background-color: #40627E;
 ;
}
pre[rel="XML"], pre[data-codetype="XML"]:before {
 background-color: #E55E48;
 ;
}
pre[data-codetype*="+"]:before {
 background-color: #0B7E88;
 ;
}
pre .line-number span:target:before {
 content: "";
 display: block;
 height: 150px;
 margin-top: -150px;
 visibility: hidden;
 ;
}

After that find the code </body> , put this script on it
<script type="text/javascript" src='https://googledrive.com/host/0B-GXzRKoPbNnMW01UElwUUNCR2s'></script>

Save Template buddy,

How Users


Each language has its own class of its own.
  • Java Script ⇒ data-codetype="JavaScript" , code class="Javascript"
  • CSS ⇒ data-codetype="CSS" , code class="CSS"
  • HTML code ⇒ data-codetype="HTML code" , code class="HTML"
  • XML ⇒ data-codetype="XML" , code class="XML"
  • JQuery ⇒ data-codetype="JQuery" , code class="JQuery"



<pre class="numbered" data-codetype="JavaScript"><code class="Javascript"> ... kode Javascript di sini ... </code></pre>
<pre class="numbered" data-codetype="CSS"><code class="CSS"> ... kode CSS di sini ... </code></pre>
<pre class="numbered" data-codetype="HTML"><code class="HTML"> ... kode HTML di sini ... </code></pre>
<pre class="numbered" data-codetype="JQuery"><code class="JQuery"> ... kode JQuery di sini ... </code></pre>
<pre class="numbered" data-codetype="XML"><code class="XML"> ... kode XML di sini ... </code></pre>
<pre class="numbered" data-codetype="JQuery Ui"><code class="JQuery Ui"> ... kode JQuery Ui di sini ... </code></pre>

If the lack of fit with the theme / appearance Syntax Highlighter, please modified the appearance according to taste buddy. Finally the tutorial How to Install SyntaxHighlighter blog finish also, if you One-GO! there is a question please comment below
Tags: Gadget
Share it:

Gadget

Post A Comment: