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 != ""'>
<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/AVvXsEhu9N5FvQ94d7zGxXakZACtR0hyphenhyphenE1QiP0YyE6vC-yeLtnYt0KJMiRBWfk_Lo3PExvofF7AtRoCyLfV4ehm47-506doPFsspQTUrfURgN3CaH82EaZLowm7MF0fH5zXUBZ5A9-lagn1IoEU/s1600/noimage.jpg",
tagName: false
});
});
//]]>
</script>
Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://nama_situs.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI...</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI...</em>
Emoticon