Kumpulan Syntax Highlighter dan cara penggunaannya

For Use This Highlighter

line-1-11line-1-22line-1-33line-1-44line-1-55line-1-66<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>

Pre Javascript

line-2-11line-2-22line-2-33line-2-44line-2-55line-2-66line-2-77line-2-88line-2-99line-2-1010line-2-1111line-2-1212line-2-1313line-2-1414<script type='text/javascript'>
//<![CDATA[
var pre = document.getElementsByTagName('blockquote'),
    pl = pre.length;
for (var i = 0; i < pl; i++) {
    pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';
    var num = pre[i].innerHTML.split(/\n/).length;
    for (var j = 0; j < num; j++) {
        var line_num = pre[i].getElementsByTagName('span')[0];
        line_num.innerHTML += '<span>' + (j+1) + '</span>';
    }
}
//]]>
</script>

Pre CSS

line-3-11line-3-22line-3-33line-3-44line-3-55line-3-66line-3-77line-3-88line-3-99line-3-1010line-3-1111line-3-1212line-3-1313line-3-1414line-3-1515line-3-1616line-3-1717line-3-1818line-3-1919line-3-2020line-3-2121* {
    box-sizing: border-box;
}
#search-result * {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}
li {
    display: list-item;
}
#form-search {
    position: absolute;
    width: 200px;
    left: 200px;
    top: 4px;
}
#ajax-search-form {
    position: relative;
    font: normal normal 13px Arial, Sans-Serif;
}

Pre HTML

line-4-11line-4-22line-4-33line-4-44line-4-55line-4-66line-4-77line-4-88line-4-99line-4-1010line-4-1111line-4-1212line-4-1313line-4-1414line-4-1515<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'> 
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Pre JQuery

line-5-11line-5-22line-5-33line-5-44line-5-55line-5-66line-5-77line-5-88line-5-99line-5-1010line-5-1111line-5-1212line-5-1313<script type='text/javascript'>
//<![CDATA[
$(function () {
    $('.Label h2').on("click", function (t) {
        $(this).toggleClass("on").next().slideToggle(200);
        t.stopPropagation()
    });
    $(document.body).on("click", function () {
        $('.Label').find(".on").removeClass("on").next().slideUp(200);
    });
});
//]]>
</script>

Pre XML

line-6-11line-6-22line-6-33line-6-44line-6-55line-6-66line-6-77line-6-88line-6-99line-6-1010line-6-1111<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/><fb:comments-count expr:href='data:post.url'/> Comments</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments</div>
<div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'><div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='500'/></b:if></div>
<div class='comments comments-page' id='blogger-comments-page'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><script src='http://code.jquery.com/jquery-latest.js'/><meta content='ID Facebook' property='fb:admins'/><script type='text/javascript'>function commentToggle(selectTab) {$(".comments-tab").addClass("inactive-select-tab");$(selectTab).removeClass("inactive-select-tab");$(".comments-page").hide();$(selectTab + "-page").show();}</script><style>.comments-page { background-color: #f2f2f2;}#blogger-comments-page { padding: 0px 5px; display: none;}.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}.comments-tab:hover { background-color: #eeeeee;}.inactive-select-tab { background-color: #d1d1d1;}</style>

Pre JQuery Ui

line-7-11line-7-22line-7-33line-7-44line-7-55line-7-66line-7-77line-7-88line-7-99line-7-1010line-7-1111line-7-1212line-7-1313line-7-1414line-7-1515line-7-1616line-7-1717line-7-1818<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
    pengaturan({
        blogURL: 'http://nama_blog_anda.blogspot.com',
        MaxPost: 5,
        RandompostActive: false,
        ImageSize: 620,
        NumCharacter: 150,
        idcontaint: "#skitterslideshow",
        cmtext: "Komentar",
        NoCmtext: "No Comment",
        pBlank: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu9N5FvQ94d7zGxXakZACtR0hyphenhyphenE1QiP0YyE6vC-yeLtnYt0KJMiRBWfk_Lo3PExvofF7AtRoCyLfV4ehm47-506doPFsspQTUrfURgN3CaH82EaZLowm7MF0fH5zXUBZ5A9-lagn1IoEU/s1600/noimage.jpg",
        tagName: false
    });
});
//]]>
</script>