Membuat Konversi Kode Pada Halaman Statis

Membuat Konversi Kode Pada Halaman Statis

Ketika ingin memasukkan kode entah itu CSS, HTML, JavaScript atau JQuery pada halaman blog sering kali tidak muncul. Mengapa demikian? hal tersebut dikarenakan kode terasebut masih aktif. Jadi, ketika kode dimasukkan pada halaman post kode akan aktif bila tidak diparse terlebih dahulu. Mungkin saat pertama belajar ngeblog sobat ingin memasukkan kode pada Syntax Highler, namun kodenya tidak muncul. Maka dari itu dibutuhkan konverter untuk memunculkan kode yang akan dimasukkan.

Telah banyak website yang menyediakan jasa parse kode, seperti accessify.com. Saya dulu langganan tool Quick Escape dari web ini untuk parse kode, namun sekarang tidak lagi. Saya memasang tool ini pada blog sendiri agar tidak repot lagi pergi ke website orang lain. Bagi yang ingin mengikuti jejak saya silahkan mengikuti tutorial ini. Berikut tutorial Membuat Konversi Kode Pada Halaman Statis.

1. Buat halaman statis baru.

2. Ubah ke mode HTML

3. Masukkan CSS konversi kodenya

<style scoped="" type="text/css">
code{font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;font-size:13px;padding:2px 4px;color:#de8019;}
#codes{border:none;width:80%;height:250px;margin:0 auto;display:block;background-color:#1d1f21; color:#fff;padding:15px;font:normal 14px 'Courier New',Monospace;border-radius:4px;}
.button-groupku{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:#4399cd;cursor:pointer;font-family:'Open Sans',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:#2e3641;}
button[disabled],button[disabled]:active{background:#2e3641;}
#opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;margin:0 10px 0 0;vertical-align:middle;border:none;outline:none}
#post-wrapper {width:100%;max-width:1000px;margin:0 auto;text-align:left;float:none;background-position:center!important;}
#blog1,#artikel,.blog-posts{background-position:center!important;}
#sidebar-wrapper {display:none;margin-top:0;margin:0;}
.post-inner {padding:0 0 0 0;margin:20px auto;}
.post-body ul#wrapin {display:block;position:relative;margin:30px auto 0 auto;}
.post-body ul#wrapin li {display:block;margin:0 auto;text-align:left;}
.post-body ul#wrapin br {display:none;}
</style>

Baca juga : Cara Memasang Widget Recent Post Keren Pada Blog

4. Masukkan kode pemanggil konversi kodenya

<textarea id="codes" placeholder="Tulis/paste kode di sini lalu klik 'Konversi'" spellcheck="false"></textarea>
<div class="button-groupku">
<button id="cvrt" onclick="cdConvert();this.disabled = true;">Konversi</button><button onclick="cdClear();">Bersihkan</button></div>
<ul id="wrapin">
<li>
<input checked="true" id="opt1" type="checkbox" />Konversi <code>&amp;</code> menjadi <code>&amp;amp;</code>
</li>
<li>
<input id="opt2" type="checkbox" />Konversi <code>'</code> menjadi <code>&amp;#039;</code>
</li>
<li>
<input id="opt3" type="checkbox" />Konversi <code>"</code> menjadi <code>&amp;quot;</code>
</li>
<li>
<input checked="true" id="opt4" type="checkbox" />Konversi <code>&lt;</code> menjadi <code>&amp;lt;</code>
</li>
<li>
<input checked="true" id="opt5" type="checkbox" />Konversi <code>&gt;</code> menjadi <code>&amp;gt;</code>
</li>
</ul>
<script type="text/javascript">
function cdClear() {
    var wtarea = document.getElementById('codes');
    wtarea.value = '';
    wtarea.focus();
    document.getElementById('cvrt').disabled = false;
}
function cdConvert() {
    var ctarea = document.getElementById('codes'),
        cv = ctarea.value,
        opt1 = document.getElementById('opt1'),
        opt2 = document.getElementById('opt2'),
        opt3 = document.getElementById('opt3'),
        opt4 = document.getElementById('opt4'),
        opt5 = document.getElementById('opt5');
    cv = cv.replace(/\t/g, "    ");
    if (opt1.checked) cv = cv.replace(/&/g, "&");
    if (opt2.checked) cv = cv.replace(/'/g, "'");
    if (opt3.checked) cv = cv.replace(/"/g, """);
    if (opt4.checked) cv = cv.replace(/</g, "<");
    if (opt5.checked) cv = cv.replace(/>/g, ">");
    ctarea.value = cv;
    ctarea.focus();
    ctarea.select();
};
</script>
<script type="text/javascript">
//<![CDATA[
//Pre Comments Box
function cdClear(){var e=document.getElementById("codes");e.value="";e.focus();document.getElementById("cvrt").disabled=false}function cdConvert(){var e=document.getElementById("codes"),t=e.value,n=document.getElementById("opt1"),r=document.getElementById("opt2"),i=document.getElementById("opt3"),s=document.getElementById("opt4"),o=document.getElementById("opt5");t=t.replace(/\t/g,"    ");if(n.checked)t=t.replace(/&/g,"&");if(r.checked)t=t.replace(/'/g,"&#039;");if(i.checked)t=t.replace(/"/g,"&quot;");if(s.checked)t=t.replace(/</g,"&lt;");if(o.checked)t=t.replace(/>/g,"&gt;");if(t.lastIndexOf("\n")!=-1||t.length>40){t=t.replace(/^/,'<i rel="pre">')}else{t=t.replace(/^/,'<i rel="code">')}t=t.replace(/$/,"</i>");e.value=t;e.focus();e.select()};
//]]>
</script>

5. Publikasikan dan selesai.

Demo

Bagikan Artikel ini