Tạo khung chứa code chuyên nghiệp cho blogspot

Khung chứa code là gì?

Việc chia sẻ mã nguồn trên blog là một phần quan trọng của việc tạo nội dung chất lượng và hữu ích cho độc giả. Đối với những người viết blog chuyên về lập trình, việc sử dụng khung chứa code với hiệu ứng syntax highlighting (tô màu cú pháp) không chỉ giúp làm cho mã nguồn trở nên rõ ràng hơn mà còn tăng tính thẩm mỹ. Trong bài viết này, chúng ta sẽ tìm hiểu cách tạo khung chứa code sử dụng Syntax Highlighter trong bài viết trên nền tảng Blogspot.

Tạo khung chứa code Syntax Highlighter trên Blogspot

Bước 1: Cập nhật CSS

Vào Blogger.com > Chủ đề > Chỉnh sửa HTML

Copy đoạn css bên dưới và chèn trên thẻ ]]></b:skin>

/* Syntax Highlighter */
pre{padding:.8em 1em;margin:0.5em 0;background-color:#F7F7F9;border:1px solid #ddd;font-size:13px;color:#000;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:1.4em;position:relative;white-space:pre-wrap;word-wrap:break-word;overflow:auto;max-height:300px}
code{font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;font-size:13px;color:#d14}
pre code{padding:0!important;color:#839496;background:none!important;border:none!important;display:block}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#93a1a1;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#F5821E}
pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#008800}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#268bd2}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#A2886F}
pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title,pre .css .pseudo{color:#000;font-weight:bold}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#eee8d5}

Bước 2: Cập nhật thư viện

Dán các thư viện bên dưới trên thẻ </head>

<!-- Syntax Highlighter -->
<link href='//cdn.rawgit.com/isagalaev/highlight.js/cf4b46e5/src/styles/googlecode.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>
<!-- End Syntax Highlighter -->

Sau đó lưu template lại

Xem thêm: Cách tạo hiệu ứng popup lightbox với Fancybox cho ảnh trong blogspot

Cách hiển thị khung chứa code

Để hiển thị khung chứa code Syntax Highlighter ở bài viết, bạn dùng đoạn code sau:

<pre><code>Code bạn để vào đây</code></pre>

Lời kết

An Trần Digital đã hướng dẫn các bạn cách tạo khung chứa code chuyên nghiệp cho blogspot với Syntax Highlighter cực đẹp & thẩm mỹ.