Kumpulan Syntax Highlighter ( Kotak Script ) CSS Di Blog

Kumpulan Syntax Highlighter ( Kotak Script ) CSS Di Blog - Syntax Highlighter adalah suatu tempat, atau wadah yang berbentuk text area dimana, didalamnya kita dapat memasukkan kode-kode yang dapat berupa code-code dari bahasa java, HTML, Javascript, PHP, CSS, dan kode-kode lainnya.

Fungsi  Syntax Highlighter atau kotak script
  • Fungsi Dari Syntax Highlighter ini adalah untuk memudahkan Para Pembaca Blog Untuk Mengelompokan Suatu Code Code HTML, JavaScript , CSS dan Lainnya.
  • Fungsi dari Syntax Highlighter lainya adalah untuk menampilkan teks terutama teks yang berupa kode dalam bentuk berbagai macam warna sesuai kode itu sendiri. Fitur syntax highlighter ini sangat cocok digunakan untuk kode pemrograman atau bahasa markup, karena akan lebih mudah dibaca terutama oleh kita.
Cara Membuat Syntax Highlighter ( kotak script ) di blog yang pertama :
Lihat contohnya :
1. Buka akun blogger.
2. Pilih menu template,klik edit Html
3. Silahkan anda copy kode di bawah dan taruh tepat di atas kode </head>


<script src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/>
    <script>
      hljs.initHighlightingOnLoad();
    </script>


4. Selanjutnya copy kode di bawah ini dan letakan tepat di atas kode ]]></b:skin>


/*PRE*/
pre,i[rel=&quot;pre&quot;] {
padding:.8em 1em;
margin:0;
background-color:#2f3741;
border-left:4px solid #40627E;
font-size:13px;
color:#839496;
font-family: Consolas,&quot;Andale Mono WT&quot;,&quot;Andale Mono&quot;,&quot;Lucida Console&quot;,&quot;Lucida Sans Typewriter&quot;,&quot;DejaVu Sans Mono&quot;,&quot;Bitstream Vera Sans Mono&quot;,&quot;Liberation Mono&quot;,&quot;Nimbus Mono L&quot;,Monaco,&quot;Courier New&quot;,Courier,Monospace;
line-height:1.4em;
position:relative;
white-space: pre;
word-wrap: normal;
white-space:pre;
overflow:auto
}
pre.line-number {
background:#2f3741 url(http://4.bp.blogspot.com/-13ewIh6Vm50/UnBe-_3zqDI/AAAAAAAAF-o/4FNnjpi-N5c/s1600/new-line-number.png)no-repeat top left;
padding-left:54px;
border-left:none;
}
  pre.line-number:after{
    content:&quot;&quot;;
    width:35px;
    height:8px;
    background-color:#39424e;
    bottom:0;
    left:0;
    position:absolute;
  }

pre[data-codetype=&quot;CSS&quot;]{border-left-color:#5fbbba}
pre[data-codetype=&quot;HTML&quot;]{border-left-color:#4fc1eb}
pre[data-codetype=&quot;JavaScript&quot;]{border-left-color:#ff6c60}
pre[data-codetype=&quot;JQuery&quot;]{border-left-color:#99c262}

pre.line-number[data-codetype]:before {
content:attr(data-codetype);
display:block;
margin:-11px -13px 10px -54px;
padding:8px 12px;
font-family:Oswald,Arial,Sans-serif;
font-size:14px;
text-transform:uppercase;
background-color:#41749f;
color:white
}
pre.line-number[data-codetype=&quot;CSS&quot;]:before{background-color:#a9d86e}
pre.line-number[data-codetype=&quot;HTML&quot;]:before{background-color:#4fc1eb}
pre.line-number[data-codetype=&quot;JavaScript&quot;]:before{background-color:#ff6c60}
pre.line-number[data-codetype=&quot;JQuery&quot;]:before{background-color:#99c262}

code {
font-family: Consolas,&quot;Andale Mono WT&quot;,&quot;Andale Mono&quot;,&quot;Lucida Console&quot;,&quot;Lucida Sans Typewriter&quot;,&quot;DejaVu Sans Mono&quot;,&quot;Bitstream Vera Sans Mono&quot;,&quot;Liberation Mono&quot;,&quot;Nimbus Mono L&quot;,Monaco,&quot;Courier New&quot;,Courier,Monospace;
font-size:13px;
color: #d14;
}
#comments code {
 color:#bbbb6d;
}
#comments pre {
    margin-bottom:-15px;
}
pre code {
padding:0 !important;
color: #a3a49a;
background: none !important;
border:none !important;
display:block;
}
pre mark {background-color:#1a5752;color:#a3a483}
pre .line-number {
  float:left;
  margin:0 1em 0 -1em;
  color:#61686d;
  background-color:#39424e;
  text-align:right;
  min-width:2.5em;
    padding-right:4px;
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .pi,
pre .lisp .string,
pre .javadoc {
color: #586e75;
font-style: italic;
}
pre .keyword,
pre .winutils,
pre .method,
pre .addition,
pre .css .tag,
pre .request,
pre .status,
pre .nginx .title {
color: #859900;
}
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .rules .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
color: #7195a3;
}
pre .title,
pre .localvars,
pre .chunk,
pre .decorator,
pre .built_in,
pre .identifier,
pre .vhdl .literal,
pre .id,
pre .css .function {
color: #569dcf;
}
pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
color: #aa985a;
}
pre .preprocessor,
pre .preprocessor .keyword,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata,
pre .clojure .title,
pre .css .pseudo {
color: #509a55;
}
pre .deletion {
color: #dc322f;
}
pre .tex .formula {
background: #073642;
}


5. Cara Menggunakan :
Untuk bisa menampilkan di postingan blog, maka harus pasang kode dibawah ini, caranya :
Letakan kode CSS/HTML/JS di antara kode  <pre><code> dan </code></pre>

<pre><code>...kode HTML, CSS, JavaSript di sini..</code></pre>

Setelah code ditambahkan klik compose.
Untuk melihat hasilnya klik pratinjau
Kemudian klik Save

Cara Membuat Syntax Highlighter ( kotak script ) di blog yang kedua :
Lihat contohnya :

1. Pilih menu template,klik edit Html
2. Silahkan anda copy kode di bawah dan taruh tepat di atas kode </head>


<script src='https://sites.google.com/site/fansublogger/javascript/SyntaxHighlighterbyFansublogger.js' type='text/javascript'/>
<script>
$(&#39;pre&#39;).attr(&#39;class&#39;, &#39;line-numbers&#39;);
Prism.hooks.add(&quot;after-highlight&quot;,function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf(&quot;line-numbers&quot;)===-1){return}var n=1+e.code.split(&quot;n&quot;).length;var r;lines=new Array(n);lines=lines.join(&quot;<span/>&quot;);r=document.createElement(&quot;span&quot;);r.className=&quot;line-numbers-rows&quot;;r.innerHTML=lines;if(t.hasAttribute(&quot;data-start&quot;)){t.style.counterReset=&quot;linenumber &quot;+(parseInt(t.getAttribute(&quot;data-start&quot;),10)-1)}e.element.appendChild(r)})
</script>

<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>
<script src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/>
<script>
hljs.initHighlightingOnLoad();
</script>

3. Selanjutnya copy kode di bawah ini dan letakan tepat di atas kode ]]></b:skin>


/* CSS Syntax Highlighter - Mykuper.my.id */
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 untuk Menyeleksi Semua';
    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: #C2C2C2;
}

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

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

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

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

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;
 border-left: 1px solid #5F5F5F;
 padding-left: 9px;
}

.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='CSSkuper']:before {
    background-color: #00a1d6;
}

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

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

pre[data-codetype='JQuerykuper']:before {
    background-color: #e5b460;
}
pre code{display:block}=
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#2DCFF2;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#E6D90C}
pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#EB4F4F}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#03C425}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#1B6FC3}
pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title,pre .css .pseudo{color:#D94CEA}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#073642}
.comments pre {padding:10px 10px 15px 10px;background:#333;}
.comments pre::before {content:'Code';font-size:13px;position:relative;top:0;
background-color:#e25633;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 code {color:#eee;}


4. Cara Menggunakan :
Untuk bisa menampilkan di postingan blog, maka harus pasang kode dibawah ini, caranya :
Letakan kode CSS/HTML/JS di

<pre data-codetype="HTMLkuper" title="HTML MY KUPER"><code class="leangue-markup">Kode Disini</code></pre>

<pre data-codetype="CSSkuper" title="CSS MY KUPER"><code class="css-markup">Kode Disini</code></pre>

<pre data-codetype="JavaScriptkuper" title="JavaScript MY KUPER"><code class="javascript-markup">Kode Disini</code></pre>

<pre data-codetype="jQuerykuper" title="jQuery MY KUPER"><code class="javascript-markup">Kode Disini</code></pre>

Catatan :
Dari ke empat kode  diatas untuk dimasukin di postingan HTMLkuper , CSSkuper , JavaScriptkuper , jQuerykuper 
Pilih salah satu, jangan ke empat empatnya ya. !!!
Setelah code ditambahkan klik compose.
Untuk melihat hasilnya klik pratinjau
Kemudian klik Save

Cara Membuat Syntax Highlighter ( kotak script ) di blog yang keTiga :
Caranya sama :
1. Pilih menu template,klik edit Html
2. Silahkan anda copy kode di bawah dan taruh tepat di atas kode </head>


<script src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/>
    <script>
      hljs.initHighlightingOnLoad();
    </script>


3. Selanjutnya copy kode di bawah ini dan letakan tepat di atas kode ]]></b:skin>

4. Silahkan pilih kode CSS klik Kumpulan CSS Syntax Highlighter
5. Cara Menggunakan :
Untuk bisa menampilkan di postingan blog, maka harus pasang kode dibawah ini, caranya :
Letakan kode CSS/HTML/JS di antara kode  <pre><code> dan </code></pre>

<pre><code>...kode HTML, CSS, JavaSript di sini..</code></pre>

Setelah code ditambahkan klik compose.
Untuk melihat hasilnya klik pratinjau
Kemudian klik Save

Demikian artikel kumpulan syntax higtlighter atau kumpulan cara membuat kotak script untuk blog, kumpulan css syntax higtlighter terbaru.
Terimakasih sudah membaca kumpulan syntax higtlighter ( kotak script ) di blog , jika bermanfaat silahkan di share.

Salam Kuper