Làm Thế Nào Để Thêm Syntax Highlighter Vào Blogger/Blogspot

Làm Thế Nào Để Thêm Syntax Highlighter Vào Blogger/Blogspot 20

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ọ.

RELATED ARTICLES

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)()+"</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é.

RED : Blogspot tự động lấy label làm keywords cho bài viết

———————————–


Source: https://bloghong.com
Category: Thủ Thuật Blogspot

Leave a Reply