Fanda Light: Test Pre

Kumpulan Syntax Highlighter dan cara penggunaannya

For Use This Highlighter

<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

<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

* {
    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

<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

<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

<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

<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/AVvXsEgoJtjC_xWwtP-fEquN4gghFFRzsnlpLlI74ICkeCWdrSk5Ffh9Vdzjs3haCSgD6DrKHAxdKkuWfVTAAeZJA3V9sGK8NEoJSAaTEZZl0Ewn-WStoTAGIhxXaoIENU9HnBY2VOn_t2GrUW0/s1600/noimage.jpg",
        tagName: false
    });
});
//]]>
</script>