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>
Để duy trì blog ngoài link rút gọn & mình có làm aff cho 1 số bên hosting.
Các nhà cung cấp uy tín về mặt chất lượng & đội ngũ support nên mọi người cứ yên tâm.
Nếu bạn đang có ý định mua Hosting, VPS mình có list dưới đây các bạn click vào link trước khi mua để ủng hộ mình nhé. Mình cảm ơn nhiều
- Azdigi: Giá rẻ thì dùng gói Pro Gold Hosting còn chất lượng hơn thì em khuyên dùng Business Hosting. Có điều kiện thì lên VPS nhé
- Tino: Business Hosting, NVMe Hosting và NVMe VPS
- iNet: Cloud VPS và Web Hosting
/* 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ỹ.
