[Blogger] Mã hóa code HTML,CSS,JavaScript khi đăng bài trên blogspot

Thông thường khi muốn chia sẻ 1 thủ thuật gì đó về blog như các đoạn code HTML,CSS,JavaScript ta thường chuyển sang chế độ HTML và trình bày nội dung ở đó. Tuy nhiên nếu bạn chưa mã hóa các kí tự đặc biệt thì đoạn code đó vô tình lại được thực thi trên chính trang của bạn nên thường gây ra lỗi không hiển thị hoặc làm ảnh hưởng đến các tiện ích hiện có

Vì vậy nếu muốn chia sẻ đoạn code đó với mục đích show ra cho blogger khác copy bạn phải tiến hành mã hóa chúng rồi mới nhúng vào khung html viết bài

Ví dụ demo

<div id="bttop">
<i class="fa fa-chevron-up" title="Back to top"></i></div>
<script type="text/javascript">$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$('#bttop').fadeIn();}else{$('#bttop').fadeOut();}});$('#bttop').click(function(){$('body,html').animate({scrollTop:0},400);});});
</script>
<a class="btbottom" href="javascript:window.scrollTo(0,999999)" title="Back to bottom"><i class="fa fa-chevron-down"></i></a>

Đoạn code này là hiệu ứng back to top/bottom trong blog của mình, nếu như đơn thuần đặt trong cặp thẻ <pre> rồi nhúng vào khung HTML của bài viết chắc chắn sẽ xung đột, và mục đích của mình chỉ show ra cho mọi người copy thôi thì phải mã hóa các kí tự đặc biệt đề không bị hiểu nhầm mình muốn thực thi đoạn lệnh đó

Hiện mình hay dùng trang http://hilite.me/ để mã hóa code trước khi nhúng. Trang này hỗ trợ luôn việc tạo viền khung, số thứ tự dòng cũng như kiểu hiển thị của rất nhiều ngôn ngữ. Bạn chỉ cần copy code HTML,CSS,JavaScript vào ô bên trái , chỉnh các thông số cho vừa ý và chọn Highlight lập tức nó sẽ demo kiểu hiển thị bạn vừa chọn cùng đoạn code nhúng vào HTML ở ô bên phải,

Bạn copy đoạn code đã mã hóa đó và dán vào bài viết của mình là xong !

Chúc thành công