Làm Thế Nào Để Thêm Syntax Highlighter Vào Blogger/Blogspot
Syntax Highlighter là gì?
Syntax Highlighter là một script có thể làm cho mã trở nên đầy màu sắc. Chúng ta thường thấy đoạn mã đầy màu sắc này trên các blog có chứa nội dung hướng dẫn hoặc chia sẻ thủ thuật về blogger, bao gồm các đoạn mã CSS, HTML, JavaScript, jQuery, v.v.
Nó được dùng để làm gì?
Script này thường được sử dụng để thêm một xíu màu mè các dòng mã trong các bài đăng trên blog, việc sử dụng Syntax Highlighter cũng nhằm để người đọc dễ dàng nhận ra loại mã mà tác giả cung cấp.
Một tác dụng khác của việc sử dụng Syntax Highlighter là khách truy cập sẽ cảm thấy thoải mái hơn khi đọc nội dung của blog, và đối với tác giả hoặc quản trị viên blog, nó sẽ giúp họ chuyên nghiệp hơn trong việc trình bày bài viết trên blog hướng dẫn của họ.
Syntax Highlighter hoạt động giống Blockquote không?
Syntax Highlighter hoạt động gần giống như Blockquote, nhưng điểm khác biệt là tính năng blockquote màu chữ thường chỉ có một màu, để đổi màu thì bạn phải tự thêm màu. Vì vậy, có thể nói rằng Syntax Highlighter sẽ hiệu quả hơn so với tính năng blockquote.
Cách Thêm Syntax Highlighter Vào Blogger/Blogspot
Để sử dụng Syntax Highlighter trên blog của bạn hãy làm theo các bước sau đây nhé, nó rất dễ thôi hihi.
Lưu ý: Nếu bạn chưa thêm thư viện JQuery thì hãy thêm nó vào nhé, không là nó không hoạt động đâu. Hãy thêm thư viện JQuery:<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
Bước 1: Đăng nhập vào Blogger.
Bước 2: Trên bảng điều khiển Blogger , Chọn Chủ Đề ➺.Chỉnh Sửa HTML.
Bước 3: Tìm thẻ </head> và dán đoạn CSS dưới vào trên nó nhé.
<style type='text/css'>
/* Syntax Highlighter www.nguyenlamblog.xyz */
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> Bước 4: Sau khi thêm CSS xong thì bạn hãy tìm đến thẻ </body> và dán đoạn JavaScript bên dưới vào trên nó.
<script type='text/javascript'>
//<![CDATA[
// Syntax Highlighter www.nguyenlamblog.xyz
$('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 khi thêm xong các bạn Lưu chủ đề lại nhé.
Cách Sử Dụng Syntax Highlighter Vào Bài Viết
Để sử dụng, các bạn hãy các bạn hãy đăng bài như bình thường nhưng hãy để chỗ trống để dán mã. Sau khi viết bài xong các bạn hãy chuyển qua Chế độ xem HTML và dán nó vào chỗ trống đó, sau đó quay lại chế độ Soạn thư và dán đoạn mã của bạn cần thêm vào nhé.
<pre><code>__Dán CSS/HTML/JAVASCRIPT Vào__</code></pre> Thế là xong, vậy là mình đã hướng dẫn cho các bạn các thêm Syntax Highlighter Vào Blogger rồi, rất là đơn giản phải hong nào. Nếu có vấn đề gì hãy comment bên dưới cho mình biết nhé.