Selamat Pagi 😀. saya mau bagi tutorial cara menampilkan Kode Prism atau syntax Highlighter di komentar yang agak terbilang terlarang .
ya memang . tapi bagaimana lagi di saat ini kita butuh itu untuk memudahkan komentator mekspresikan diri nya di komentar dalam tanda kutip "NO SPAM" .
oke berikut tutorial nya.
Pertama yang harus kita lakukan adalah menambahkan jquery dan stylsheet terlebih dahulu.
Taruh di atas
<b:skin>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet' type='text/css'/>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
Lalu Tambahkan Jquery di bawah kode
]]> </ b: skin>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js' type='text/javascript'></script>
Lalu cari kode
<div class='comments' id='comments'> ,kode yang pertama bukan yang kedua.lalu tambahkan kode di bawah ini diatas
<div class='comments' id='comments'> .
<b:if cond='data:blog.pageType != "static_page"'>
<div class='panel panel-info'>
<div class='panel-heading'>Meletakan Kode Di komentar</div>
<div class='panel-body'>
Untuk menyisipkan kode, gunakan tag &lt;code&gt;&amp;lt;i rel=&amp;quot;code&amp;quot;&amp;gt;&amp;lt;/i&amp;gt;&lt;/code&gt; atau &lt;code&gt;&amp;lt;i rel=&amp;quot;pre&amp;quot;&amp;gt;&amp;lt;/i&amp;gt;&lt;/code&gt;&lt;/br&gt;
Untuk menyisipkan gambar, gunakan tag &lt;code&gt;&amp;lt;i rel=&amp;quot;image&amp;quot;&amp;gt;&amp;lt;/i&amp;gt;&lt;/code&gt;&lt;/br&gt;
Untuk menyisipkan judul, gunakan tag &lt;code&gt;&amp;lt;b rel=&amp;quot;h3&amp;quot;&amp;gt;&amp;lt;/b&amp;gt;&lt;/code&gt;&lt;/br&gt;
Untuk menyisipkan catatan, gunakan tag &lt;code&gt;&amp;lt;b rel=&amp;quot;quote&amp;quot;&amp;gt;&amp;lt;/b&amp;gt;&lt;/code&gt;&lt;/br&gt;
Untuk menciptakan efek tebal gunakan tag &lt;code&gt;&amp;lt;b&amp;gt;&amp;lt;/b&amp;gt;&lt;/code&gt;&lt;/br&gt;
Untuk menciptakan efek huruf miring gunakan tag &lt;code&gt;&amp;lt;i&amp;gt;&amp;lt;/i&amp;gt;&lt;/code&gt; &lt;/br&gt;
&lt;/br&gt;&lt;/br&gt;
&lt;a class=&quot;btn btn-primary btn-xs&quot; data-toggle=&quot;modal&quot; data-target=&quot;#myModal&quot;&gt;Parse&lt;/a&gt;
&lt;!-- Modal --&gt;
&lt;div id=&quot;myModal&quot; class=&quot;modal fade&quot; role=&quot;dialog&quot;&gt;
&lt;div class=&quot;modal-dialog&quot;&gt;
&lt;!-- Modal content--&gt;
&lt;div class=&quot;modal-content&quot;&gt;
&lt;div class=&quot;modal-header&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;&gt;&amp;times;&lt;/button&gt;
&lt;h4 class=&quot;modal-title&quot;&gt;Html Parser&lt;/h4&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-body&quot;&gt;
&lt;style scoped=&quot;&quot; type=&quot;text/css&quot;&gt;
code{font-family:Consolas,Monaco,&#39;Andale Mono&#39;,&#39;Courier New&#39;,Courier,Monospace;color:#2a5ead;font-size:13px;padding:2px 4px;color:#d14;}
#codes{border:1px solid #ccc;width:68%;height:250px;margin:0 auto;display:block;background-color:#fafafa;color:#333;padding:15px;font:400 14px &#39;Courier New&#39;,Monospace;border-radius:4px}
.button-group{float:none;margin:0 auto 0;text-align:center}
button,button[disabled]:active{border:none;padding:5px 12px;text-align:center;color:#fff;display:inline-block;white-space:nowrap;background-color:#0ea6d8;cursor:pointer;font-family:&#39;Open Sans&#39;,Arial,Sans-Serif; font-size:13px;position:relative;top:-1px;margin:0 10px;line-height:23px;border-radius:3px;transition:all 0.3s ease-in-out;}
button:active{background:#0095c6;}
button[disabled],button[disabled]:active{background:#0095c6;}
#opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;margin:0 10px 0 0;vertical-align:middle;border:none;outline:none}
&lt;/style&gt;
&lt;textarea id=&quot;codes&quot; placeholder=&quot;Tulis/paste kode di sini lalu klik &#39;Konversi&#39;&quot; spellcheck=&quot;false&quot;&gt;&lt;/textarea&gt;
&lt;/p&gt;
&lt;div class=&quot;button-group&quot;&gt;
&lt;button id=&quot;cvrt&quot; onclick=&quot;cdConvert();this.disabled = true;&quot; disabled=&quot;&quot;&gt;Konversi&lt;/button&gt;&lt;button onclick=&quot;cdClear();&quot;&gt;Bersihkan&lt;/button&gt;&lt;/div&gt;
&lt;ul id=&quot;wrapin&quot;&gt;
&lt;li&gt;
&lt;input checked=&quot;true&quot; id=&quot;opt1&quot; type=&quot;checkbox&quot;&gt;Konversi &lt;code&gt;&amp;amp;&lt;/code&gt; menjadi &lt;code&gt;&amp;amp;amp;&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;input id=&quot;opt2&quot; type=&quot;checkbox&quot;&gt;Konversi &lt;code&gt;&#39;&lt;/code&gt; menjadi &lt;code&gt;&amp;amp;#039;&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;input id=&quot;opt3&quot; type=&quot;checkbox&quot;&gt;Konversi &lt;code&gt;&quot;&lt;/code&gt; menjadi &lt;code&gt;&amp;amp;quot;&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;input checked=&quot;true&quot; id=&quot;opt4&quot; type=&quot;checkbox&quot;&gt;Konversi &lt;code&gt;&amp;lt;&lt;/code&gt; menjadi &lt;code&gt;&amp;amp;lt;&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;input checked=&quot;true&quot; id=&quot;opt5&quot; type=&quot;checkbox&quot;&gt;Konversi &lt;code&gt;&amp;gt;&lt;/code&gt; menjadi &lt;code&gt;&amp;amp;gt;&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
function cdClear() {
var wtarea = document.getElementById(&#39;codes&#39;);
wtarea.value = &#39;&#39;;
wtarea.focus();
document.getElementById(&#39;cvrt&#39;).disabled = false;
}
function cdConvert() {
var ctarea = document.getElementById(&#39;codes&#39;),
cv = ctarea.value,
opt1 = document.getElementById(&#39;opt1&#39;),
opt2 = document.getElementById(&#39;opt2&#39;),
opt3 = document.getElementById(&#39;opt3&#39;),
opt4 = document.getElementById(&#39;opt4&#39;),
opt5 = document.getElementById(&#39;opt5&#39;);
cv = cv.replace(/\t/g, &quot; &quot;);
if (opt1.checked) cv = cv.replace(/&amp;/g, &quot;&amp;amp;&quot;);
if (opt2.checked) cv = cv.replace(/&#39;/g, &quot;&amp;#039;&quot;);
if (opt3.checked) cv = cv.replace(/&quot;/g, &quot;&amp;quot;&quot;);
if (opt4.checked) cv = cv.replace(/&lt;/g, &quot;&amp;lt;&quot;);
if (opt5.checked) cv = cv.replace(/&gt;/g, &quot;&amp;gt;&quot;);
ctarea.value = cv;
ctarea.focus();
ctarea.select();
};
&lt;/script&gt;
&lt;/div&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;div class=&quot;clear&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-footer&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</div>
</div>
</b:if>
Sekarang Kita Cari Kode
</body>Lalu Tambahkan Kode Di Bawah ini Tepat Di Atas Kode Tersebut
<script type='text/javascript'>
//<![CDATA[
$('#comments p, #comments dd').each(function() {
$('b[rel^="h"]', this).nextAll().filter('br').remove();
$('i[rel="pre"]', this).replaceWith(function() {
return $('<pre></pre>').append($(this).contents());
});
$('i[rel="image"]', this).replaceWith(function() {
return $('<img />').attr('src', $(this).text());
});
// Menyisipkan tag `<h3>`
$('b[rel="h3"]', this).replaceWith(function() {
return $('<h3></h3>').append($(this).contents());
});
$('b[rel="quote"]', this).replaceWith(function() {
return $('<blockquote></blockquote>').append($(this).contents());
});
$('i[rel="code"]', this).contents().unwrap().wrap('<code></code>');
});
//]]>
</script>
Simpan Semua Perubahan Dan Lihat Hasil Nya 😐
Oke Tutorial Selesai 😐
Doain saya juga ya semoga saya lulus mengaji 😀