Tạo khung chứa code sử dụng Syntax Highlighter trong bài viết Blogspot

Anh Trai Nắng
0
Syntax Highlighter là công cụ thay thế cho blockquote nhưng cách hiển thị sẽ có nhiều màu sắc trên code hoặc văn bản trông đẹp mắt hơn.

Khung chứa code là gì? cụ thể là tính năng soạn thảo văn bản dùng để đánh dấu hoặc chèn các loại code hoặc tập lệnh khác nhau như HTML, Javascript , CSS và những thứ khác.

Tạo khung chứa code sử dụng Syntax Highlighter trong bài viết Blogspot
Tạo khung chứa code sử dụng Syntax Highlighter trong bài viết Blogspot.

Khung chứa code thường làm cho văn bản dễ nhìn hơn và nhiều màu sắc hơn tùy theo mẫu các bạn sử dụng với bài viết.

Syntax Highlighter là công cụ thay thế cho blockquote nhưng cách hiển thị trong blockquote rất đơn giản và không hỗ trợ hiển thị code script đầy màu sắc nên giải pháp là sử dụng Syntax Highlighter Tool này.

Cài đặt CSS và Syntax Highlighter

Có rất nhiều bài hướng dẫn làm cái này nhưng với phương pháp mình chỉ đây thì hết sức đơn giản nha. Demo thì trực tiếp là khung chứa code mình đang sử dụng trong bài này.

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

Sử dụng đoạn CSS sau chèn trên ]]></b:skin> hoặc bỏ nó vào cắp thẻ <style>...</style> rồi để trên thẻ </body>

/* 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}

Tiếp theo, dán đoạn code dưới đây trên thẻ đóng </head> là xong phần cài đặt.

<!-- 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 -->

Lưu template lại và trở ra viết bài để setup phần hiển thị.

Hiển thị

Để hiển thị khung chứa code có Syntax Highlighter đẹp các bạn chỉ cần sử dụng đoạn cú pháp sau:

<pre><code>Nội dung code chèn vào đây.</code></pre>

Một lưu ý nhỏ cho những bạn nào không rành lắm thì chúng ta sử dụng cú pháp này ở phần soạn thảo Chế độ xem HTML và code nằm trong khung chứa code đã được mã hóa code.

Tạo khung chứa code sử dụng Syntax Highlighter trong bài viết Blogspot
Chế độ xem HTML.

Để mã hóa code trước khi chèn vào khung soạn thảo các bạn có thể sử dụng công cụ Mã hóa code tại đây: anhtrainang.com/p/ma-hoa-code.html

Lời kết

Với các bước thực hiện đơn giản trên các bạn đã có thể tạo được một khung chứa code hết sức bắt mắt cho bài viết của mình với chức năng Syntax Highlighter. Nếu có chỗ nào thắc mắc hãy để lại bình luận phía dưới nhé. Chúc các bạn thành công!

Đăng nhận xét

HƯỚNG DẪN BÌNH LUẬN

0 Nhận xét

Đăng nhận xét (0)

#buttons=(Thanks!) #days=(7)

À mình có làm website tăng tương tác MXH giá rẻ. Mọi người nếu cần thì ghé sử dụng các dịch vụ thử nha. Ghé xem dịch vụ
Ok, Go it!

HƯỚNG DẪN BÌNH LUẬN

Chèn link

Sử dụng công cụ Tạo link

Chèn hình ảnh

LINK_ANH - sử dụng công cụ upload ảnh. Và chỉ cần lấy link ảnh chèn vào bình luận là ảnh tự động hiển thị.

Định dạng chữ

<b>Chữ in đậm</b>
<i>Chữ in nghiêng</i>
<u>Chữ gạch chân</u>
<strike>Chữ gạch ngang</strike>

Chèn một đoạn Code

Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]

Khác

Nhập Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.
Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

Đã hiểu