Tạo khung chứa code tuyệt đẹp cho Blog và Website

Tạo khung chứa code tuyệt đẹp cho Blog và Website

Xin chào các bạn, lại là mình Minh CRISTIANO Blog đây. Khá lâu rồi mình đã không chia sẻ nội dung liên qua đến code cho blogspot, vậy thì hôm nay mình sẽ hướng dẫn các bạn tạo khung chứa code nhé.

Tạo khung chứa code

Hướng dẫn tạo khung chứa code

Bước 1: Truy cập vào Blogger ➤ Chủ đề ➤ Chỉnh sửa HTML. Dán toàn bộ code phía dưới vào trước </head>

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/atom-one-dark.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  $('pre').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});
//]]>
</script>

Bước 2: Để sử dụng khung chứa code, các bạn cần đặt code vào giữa<pre>

Để đặt vào giữa thẻ <pre> các bạn cần Mã hóa code

Nếu là HTML

<pre class='xml'>
<!-- nếu code là các thẻ HTML -->
</pre>

Nếu là Css

<pre class='xml'>
<!-- nếu code là các thẻ Css -->
</pre>

Nếu là Javascript

<pre class='xml'>
<!-- nếu code là các thẻ Javascript -->
</pre>

Lời kết

Trên đây là toàn bộ cách sử dụng khung chứa code mà mình đã chia sẻ, nếu có vấn đề về khiéu nại hay bản quyền thì vui lòng comment xuống dưới. Chúc các bạn ngày làm việc hiệu quả!

Copyright © Lê Anh Đức