Ngoài việc làm đẹp cho blog của mình. việc sử dụng Syntax Highlighter cũng nhằm mục đích cho người đọc có thể dễ dàng nhận ra loại mã do tác giả cung cấp
Ở trong bài này mình xin chia sẻ cách tô sáng đoạn code khi viết bài trong blog của mình. Mình sử dụng cú pháp Highlighter, nó rất tuyệt vời các bạn ạ.
Highlighter có tính năng đặc biệt của quá trình di chuyển một số mã ngôn ngữ lập trình nhất định bằng cách viết, màu sắc của văn bản, vị trí chính xác của những gì có trong mã ngôn ngữ lập trình để được di chuyển hoặc sao chép vào các dạng viết khác để dễ đọc hoặc học nó hơn.
Cách cài đặt cú pháp tô sáng code trong bài viết trên Blog
Đầu tiên, đăng nhập vào Blogger > Chọn Blog> Nhấp vào menu Chủ đề và nhấp vào nút Chỉnh sửa HTML > Thêm mã CSS bên dưới trước thẻ <head>
<style type='text/css'>
/* Highlighter */
pre{white-space:pre;word-wrap:normal;overflow:auto;font-size:14px;margin:0;padding:0}hr{margin-top:2rem;background:#ccc;height:1px;border:0;margin-bottom:2rem}
.post-body code{padding:1.2em}.post-body pre{padding:0;border-radius:3px;background-color:#292e34;word-spacing:normal;word-break:normal;line-height:1.4em}.post-body .hljs{display:block;overflow-x:auto;padding:1.2em;background:#2b2b2c;color:#fff;line-height:1.5;text-align:left;word-spacing:0;font-family:monospace;border-radius:3px}.post-body .hljs-name,.post-body .hljs-strong{font-weight:bold}.post-body .hljs-code,.post-body .hljs-emphasis{font-style:italic}.post-body .hljs-tag{color:#62c8f3}.post-body .hljs-variable,.post-body .hljs-template-variable,.post-body .hljs-selector-id,.post-body .hljs-selector-class{color:#ade5fc}.post-body .hljs-string,.post-body .hljs-bullet{color:#a2fca2}.post-body .hljs-type,.post-body .hljs-title,.post-body .hljs-section,.post-body .hljs-attribute,.post-body .hljs-quote,.post-body .hljs-built_in,.post-body .hljs-builtin-name{color:#ffa}.post-body .hljs-number,.post-body .hljs-symbol,.post-body .hljs-bullet{color:#d36363}.post-body .hljs-keyword,.post-body .hljs-selector-tag,.post-body .hljs-literal{color:#fcc28c}.post-body .hljs-comment,.post-body .hljs-deletion,.post-body .hljs-code{color:#888}.post-body .hljs-regexp,.post-body .hljs-link{color:#c6b4f0}.post-body .hljs-meta{color:#fc9b9b}.post-body .hljs-deletion{background-color:#fc9b9b;color:#333}.post-body .hljs-addition{background-color:#a2fca2;color:#333}.post-body .hljs a{color:inherit}.post-body .hljs a:focus,.post-body .hljs a:hover{color:inherit;text-decoration:underline}mark .post-body .hljs-attr,mark .post-body .hljs-string,mark .post-body .hljs-bullet{background-color:#e67e22;color:#fff}.post-body .hljs mark{background-color:#f24a4a;color:#fff;padding:2px 5px;border-radius:2px}.post-body .hljs mark span.hljs-number,.post-body .hljs mark span.hljs-comment,.post-body .hljs mark span.hljs-symbol,.post-body .hljs mark span.hljs-string,.post-body .hljs mark span.hljs-attr,.post-body .hljs mark span.hljs-keyword,.post-body .hljs mark span.hljs-name,.post-body .hljs mark span.hljs-tag{color:#fff;margin:.15rem 0}
</style>
Hoặc có thể chép thư viện jquery trước thẻ <head>
Sau đó thêm mã sau vào trước </body>
Sau đó nhấp vào nút Lưu chủ đề
<script src = 'h”ttps://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>Sau đó thêm mã sau vào trước </body>
<script type='text/javascript'>
//<![CDATA[
// Highlighter
$('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var pres=document.querySelectorAll("pre,code,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.jsdelivr.net/gh/Arlina-Design/frame@master/highlightr.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>Sau đó nhấp vào nút Lưu chủ đề
Cách viết cú pháp tô sáng trong bài viết trên Blog
Sau khi cài đặt mã yêu cầu, bên cạnh cách viết nó trong bài viết. Tạo một bài đăng mới trên blog của bạn, sau đó để viết thêm mã này vào tab HTML (không soạn) xem như hình!
<pre><code>__DÁN CODE CỦA BẠN VÀO ÐÂY__</code></pre>Thay thế mã được đánh dấu trong mã ở trên bằng mã CSS / HTML / JA V ASCRIPT chúc các bạn thành công!
Các bạn nhớ chuyển qua tab HTML để dán đoạn code bên trên sau đó chuyển về chế độ viết để copy code đè lên khu vực __DÁN CODE CỦA BẠN VÀO ĐÂY__
EmoticonEmoticon