Tạo trang mã hóa code cho blog

Nếu blog của bạn chuyên viết về thủ thuật Blog thì nên có một trang giúp cho người đọc có thể mã hóa code lại trước khi đưa vào bình luận. Hôm nay, mình sẽ hướng dẫn các bạn làm điều đó.

DEMO

#Cách làm

1. Đăng nhập Blogger
2. > Trang > Trang mới
3. > Nhập tiêu đề trang
4. > Chuyển sang chế độ viết HTML
5. > Dán code dưới vào và save lại

<style type="text/css">
  p {margin-top:20px;}
 code {color:#aa2;}
 
 #codes {
  border:none;
  width:98%;
  height:200px;
  margin:10px auto 10px;
  display:block;
  background-color:#444;
  padding:5px;
  font:normal 12px 'Courier New',Monospace;
 }
 
 #codes:focus {background-color:#3c3c3c;color:white;}

 .button-group {
  margin:0px auto 0px;
  text-align:center;
 }
 
 button,button[disabled]:active {
  background-color:#3c3c3c;
  font:bold 11px Tahoma,Verdana,Arial,Sans-Serif;
  color:#999;
  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;
 }
</style>

<textarea id="codes" placeholder="Đưa code của bạn vào đây!" spellcheck="false"></textarea>
<div class="button-group">
<button id="cvrt" onclick="cdConvert();this.disabled = true;">Chuyển đổi</button>
<button onclick="cdClear();">Clear</button>
</div>
<input id="opt1" type="checkbox" />Chuyển ký tự <code>&amp;</code> sang <code>&amp;amp;</code><br />
<input id="opt2" type="checkbox" />Chuyển ký tự <code>'</code> sang <code>&amp;#039;</code><br />
<input id="opt3" type="checkbox" />Chuyển ký tự <code>"</code> sang <code>&amp;quot;</code><br />
<input checked="true" id="opt4" type="checkbox" />Chuyển ký tự <code>&lt;</code> sang <code>&amp;lt;</code><br />
<input checked="true" id="opt5" type="checkbox" />Chuyển ký tự <code>&gt;</code> sang <code>&amp;gt;</code>
<br />

<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, "&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(/^/, "<pre>");
    } else {
        //cv = cv.replace(/^/, "<i rel=\"pre\">");
  cv = cv.replace(/^/, "<pre>");
    }
    cv = cv.replace(/$/, "</pre>
");
    ctarea.value = cv;
    ctarea.focus();
    ctarea.select();
};
</script>