Edit in JSFiddle

<script type='text/javascript'>
//<![CDATA[
    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, "&amp;"); if (opt2.checked) cv = cv.replace(/'/g, "&#039;"); if (opt3.checked) cv = cv.replace(/"/g, "&quot;"); if (opt4.checked) cv = cv.replace(/</g, "&lt;"); if (opt5.checked) cv = cv.replace(/>/g, "&gt;"); if (cv.lastIndexOf('\n') != -1 || cv.length > 40) { cv = cv.replace(/^/, "<i rel=\"pre\">"); } else { cv = cv.replace(/^/, "<i rel=\"code\">"); } cv = cv.replace(/$/, "</i>"); ctarea.value = cv; ctarea.focus(); ctarea.select(); }
//]]>

<textarea id="codes" placeholder="Tulis/paste kode di sini lalu klik 'Konversi'" spellcheck="false"></textarea> 
<div class="button-group">
<button id="cvrt" onclick="cdConvert();this.disabled = true;">Konversi</button> <button onclick="cdClear();">Bersihkan</button> </div>
<input checked="true" id="opt1" type="checkbox" />Konversi <code>&amp;</code> menjadi <code>&amp;amp;</code>
<input id="opt2" type="checkbox" />Konversi <code>'</code> menjadi <code>&amp;#039;</code>
<input id="opt3" type="checkbox" />Konversi <code>"</code> menjadi <code>&amp;quot;</code>
<input checked="true" id="opt4" type="checkbox" />Konversi <code>&lt;</code> menjadi <code>&amp;lt;</code>
<input checked="true" id="opt5" type="checkbox" />Konversi <code>&gt;</code> menjadi <code>&amp;gt;</code> 

    body { background-color:black; padding:20px; color:#fff; font-family: Tahoma, Verdana, Arial, Sans-Serif; font-size: 11px; font-style: normal; font-weight: normal; font-variant: normal; } p {margin-top:20px;} code { color:#FF0; } #codes { border:none; width:98%; height:200px; margin:10px auto 10px; display:block; background-color:#384C60; padding:5px; font:normal 12px 'Courier New',Monospace; } #codes:focus {background-color:#9ea6ae;color:black;} .button-group { margin:0px auto 0px; text-align:center; } button,button[disabled]:active { background-color: #008080; font:bold 11px Tahoma,Verdana,Arial,Sans-Serif; color:black; padding:5px 10px; border:none; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; cursor:pointer; } button:active {background-color:white;color:black;} button[disabled],button[disabled]:active {opacity:0.4;cursor:default;} #opt1, #opt2, #opt3, #opt4, #opt5 { display:inline-block; margin:0px 10px 0px 0px; vertical-align:middle; border:none; outline:none; }