Hướng Dẫn Tích Hợp Prism.js vào Blogger

Giới thiệu 

Hôm nay, chúng ta sẽ cùng nhau nâng cấp blog của mình, biến những đoạn code khô khan trở nên trực quan và dễ đọc hơn.

Trước khi đi vào phần kỹ thuật, hãy cùng thảo luận nhanh về nền tảng mà chúng ta đang sử dụng. Giữa rất nhiều lựa chọn như WordPress.com, Medium, hay các nền tảng khác, tại sao Blogger vẫn là một blog platform yêu thích của mình.

Có 3 yếu tố:

1. Miễn phí Tuyệt đối: Blogger hoàn toàn miễn phí. Bạn không tốn chi phí cho hosting, và thậm chí có thể sử dụng tên miền riêng của mình mà không cần trả thêm phí cho nền tảng (bạn chỉ cần mua tên miền).

2. Đơn giản và Ổn định: Được chống lưng bởi Google, Blogger cực kỳ ổn định và dễ sử dụng. Bạn không cần lo lắng về việc quản trị máy chủ, bảo mật hay cập nhật. Bạn chỉ cần tập trung vào việc quan trọng nhất: viết.

3. Linh hoạt đến bất ngờ: Đây chính là điểm "ăn tiền" nhất. Không giống như gói miễn phí của WordPress.com vốn hạn chế rất nhiều, Blogger cho phép bạn truy cập và chỉnh sửa toàn bộ mã nguồn HTML/CSS/JavaScript của giao diện. Sự tự do này mở ra một cánh cửa vô tận để tùy biến và tích hợp các công cụ của bên thứ ba.

Một trong những minh chứng rõ ràng nhất cho sự linh hoạt này chính là khả năng tích hợp các thư viện JavaScript để nâng cao trải nghiệm người đọc. Và hôm nay, chúng ta sẽ làm chính điều đó với Prism.js, một công cụ không thể thiếu để hiển thị code.

Giới thiệu về Prism.js

Prism.js là một thư viện JavaScript nhẹ, mạnh mẽ và có khả năng mở rộng, dùng để làm nổi bật cú pháp (syntax highlighting) cho các đoạn mã nguồn.

Tại sao nên chọn Prism.js?

• Nhẹ và nhanh: Lõi của Prism chỉ khoảng 2KB (đã nén), giúp trang của bạn tải nhanh hơn.

• Dễ sử dụng: Chỉ cần thêm các file CSS, JS và sử dụng class theo chuẩn HTML5 là xong.

• Hỗ trợ nhiều ngôn ngữ: Prism hỗ trợ một danh sách lớn các ngôn ngữ lập trình.

• Khả năng mở rộng: Có rất nhiều plugin để thêm các tính năng như hiển thị số dòng, thanh công cụ, nút sao chép...

Tích hợp Prism vào Blogger

Cách dễ nhất và hiệu quả nhất để tích hợp Prism là sử dụng plugin Autoloader. Plugin này sẽ tự động tải về định nghĩa của ngôn ngữ mà bạn cần, giúp tối ưu tốc độ trang web.

Các bước thực hiện:

1. Đăng nhập vào Blogger Dashboard.

2. Đi đến mục Chủ đề (Theme) > Tùy chỉnh (Customize) > Chỉnh sửa HTML (Edit HTML).

3. Tìm đến thẻ </head> (sử dụng Ctrl + F hoặc Cmd + F để tìm nhanh).

4. Dán đoạn mã sau vào ngay phía trên thẻ </body>.. Mình chọn thẻ </body> thay vì thẻ head vì có rất nhiều đoạn mã Blogger trong template, mình muốn để những đoạn customize ở cuối body, sau này dễ chỉnh sửa và thay đổi theme

 <!-- PrismJS v1.30.0 Theme -->
<link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/themes/prism-tomorrow.min.css' integrity='sha512-vswe+cgvic/XBoF1OcM/TeJ2FW0OofqAVdCZiEYkd6dwGXthvkSFWOoGGJgS2CW70VK5dQM5Oh+7ne47s74VTg==' referrerpolicy='no-referrer' rel='stylesheet'/>

<!-- PrismJS Core + Plugins -->
<script crossorigin='anonymous' integrity='sha512-HiD3V4nv8fcjtouznjT9TqDNDm1EXngV331YGbfVGeKUoH+OLkRTCMzA34ecjlgSQZpdHZupdSrqHY+Hz3l6uQ==' referrerpolicy='no-referrer' src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/prism.min.js'/>

<!-- Autoloader Plugin: auto load languages -->
<script crossorigin='anonymous' integrity='sha512-SkmBfuA2hqjzEVpmnMt/LINrjop3GKWqsuLSSB3e7iBmYK7JuWw4ldmmxwD9mdm2IRTTi0OxSAfEGvgEi0i2Kw==' referrerpolicy='no-referrer' src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/plugins/autoloader/prism-autoloader.min.js'/>

Nhấn Lưu (Save).

Thêm Ngôn ngữ và Sử dụng

Với Autoloader, bạn chỉ cần bọc đoạn mã của mình trong thẻ <pre> và <code> với class language-xxxx (trong đó xxxx là tên ngôn ngữ).

<pre><code class="language-javascript">
  // Your JavaScript code goes here
  function sayHello(name) {
    console.log(`Hello, ${name}!`);
  }
  sayHello('World');
</code></pre>

Một số tên ngôn ngữ phổ biến: csharp, javascript, python, java, csharp, css, html, sql, bash.

Nếu bạn đã từng sử dụng 1 số js khác, thì phần markup có thể khác với cú pháp khi sử dụng Prism.js. Trước khi execute code js Prism, mình sẽ gọi 1 hàm jQuery để chỉnh sửa lại thẻ Pre.

Ví dụ trước kia mình sử dụng SyntaxHighlight, code class="csharp" thay vì code class="language-csharp"

<!-- Change pre code tag to adapt with Prism -->
<script type='text/javascript'>
document.addEventListener("DOMContentLoaded", function () {
const langMap = {
	html: "markup",
	js: "javascript",
	py: "python",
	sh: "bash",
	ts: "typescript",
	csharp: "csharp",
	cpp: "cpp",
	cs: "csharp",
	yml: "yaml",
	rb: "ruby",
	txt: "plaintext"
};

document.querySelectorAll("pre code").forEach(function (codeBlock) {
	const classes = codeBlock.className.split(/\s+/);
	classes.forEach(function (cls) {
		if (!cls.startsWith("language-")) {
			let lang = langMap[cls] || cls;
			codeBlock.classList.remove(cls);
			codeBlock.classList.add("language-" + lang);
		}
	});
	const pre = codeBlock.closest("pre");
 // Add the "data-prismjs-copy" attribute to the <pre> tag.
	// This is the correct way to enable the Copy to Clipboard plugin.
	// Note: We use setAttribute, not add a class.
	if (!pre.hasAttribute("data-prismjs-copy")) {
		pre.setAttribute("data-prismjs-copy", "Copy");
	}
});
});
</script>

Các Theme Cơ bản

Để đổi theme, bạn chỉ cần thay đổi đường link CSS.

<!-- PrismJS v1.30.0 Theme -->
<link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/themes/prism-tomorrow.min.css' integrity='sha512-vswe+cgvic/XBoF1OcM/TeJ2FW0OofqAVdCZiEYkd6dwGXthvkSFWOoGGJgS2CW70VK5dQM5Oh+7ne47s74VTg==' referrerpolicy='no-referrer' rel='stylesheet'/>

Tích hợp các Plugin Hữu ích

Chúng ta sẽ tích hợp 3 plugin được yêu cầu nhiều nhất: Line Numbers (số dòng), Toolbar (thanh công cụ) và Copy to Clipboard (nút sao chép).

⚠️ Lưu ý: Plugin "Copy to Clipboard" yêu cầu phải có plugin "Toolbar".

graph TD A[Prism Core] --> B(Toolbar Plugin); B --> C(Copy to Clipboard Plugin); A --> D(Line Numbers Plugin);

<!-- 4. Plugin JS: Toolbar, Copy to Clipboard, Line Numbers -->
<!-- Toolbar must be loaded before other toolbar-dependent plugins -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/plugins/toolbar/prism-toolbar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/plugins/line-numbers/prism-line-numbers.min.js"></script>

Cách sử dụng các plugin:

• Line Numbers: Thêm class line-numbers vào thẻ <pre>. Hoặc bạn thêm class vào thẻ <body>

• Toolbar & Copy to Clipboard: Tự động kích hoạt.

<pre class="line-numbers"><code class="language-python">
# This code block will have line numbers and a copy button.
def fibonacci(n):
    a, b = 0, 1
    while a < n:
        print(a, end=' ')
        a, b = b, a+b
    print()

fibonacci(100)
</code></pre>

Tree view

Bạn thêm đoạn code này vào file layout

<!--Tree view -->
<link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/plugins/treeview/prism-treeview.min.css' integrity='sha512-T2070kymkL/92LGEdTHzxTu6cHJjQI66uq8uJ768/iOs6M7yTceI2YcHFh2BHUcqbsDUFn4t9iaXNYAbmUKp8A==' referrerpolicy='no-referrer' rel='stylesheet'/>
<script crossorigin='anonymous' integrity='sha512-uMvB4vWdwV+sAcjP68GzxHkfyBg71sDCuhY+TYGD994ptnsfMxgb6Zs3AHKEuVieOKvbaO+c+6WGduVKahLJUg==' referrerpolicy='no-referrer' src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/plugins/treeview/prism-treeview.min.js'/>
<link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css' integrity='sha512-DxV+EoADOkOygM4IR9yXP8Sb2qwgidEmeqAEmDKIOfPRQZOWbXCzLC6vjbZyy0vPisbH2SyW27+ddLVCN+OMzQ==' referrerpolicy='no-referrer' rel='stylesheet'/>
<style>
.treeview-part .entry-line {
  position: relative;
  text-indent: -99em;
  display: inline-block;
  vertical-align: top;
  width: 1.2em;
}

.treeview-part .entry-line:before,
.treeview-part .line-h:after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
}

.treeview-part .line-h:before,
.treeview-part .line-v:before {
  border-left: 1px solid #ccc;
}

.treeview-part .line-v-last:before {
  height: 50%;
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.treeview-part .line-h:after {
  height: 50%;
  border-bottom: 1px solid #ccc;
}

.treeview-part .entry-name {
  position: relative;
  display: inline-block;
  vertical-align: top;
  padding: 0 0 0 1.8em;
}

.treeview-part .entry-name:before {
  position: absolute;
  top: 0;
  left: 0.25em;
  height: 100%;
  width: 20px;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 7 Free";
  font-weight: 900; /* solid icons */
}

/* Mặc định file */
.treeview-part .entry-name[class*="ext-"]:before {
  content: "\f15b"; /* file */
}

/* Thư mục */
.treeview-part .entry-name.dir:before {
  content: "\f07b"; /* folder */
}

/* File code */
.treeview-part .entry-name:is(.ext-ts, .ext-js, .ext-njk, .ext-css, .ext-cs, .ext-rdl, .ext-sql, .ext-config, .ext-webconfig):before {
  content: "\f1c9"; /* file-code */
}

/* JavaScript */
.treeview-part .entry-name.ext-js:before {
  font-family: "Font Awesome 7 Brands";
  content: "\f3b9"; /* js */
}

/* CSS */
.treeview-part .entry-name.ext-css:before {
  font-family: "Font Awesome 7 Brands";
  content: "\f38b"; /* css3-alt */
}

/* PNG */
.treeview-part .entry-name:is(.ext-png):before {
  content: "\f03e"; /* image */
}
</style>

Mình thêm 1 folder structure đơn giản như sau:

 project-root/
├── css/
│   └── style.css
├── js/
│   ├── app.js
│   └── vendor/
│       └── jquery.min.js
├── images/
│   ├── logo.png
│   └── icon.svg
└── index.cshtml
└── program.cs
└── web.config

    

Kết quả:

        
project-root/
├── css/
│   └── style.css
├── js/
│   ├── app.js
│   └── vendor/
│       └── jquery.min.js
├── images/
│   ├── logo.png
│   └── icon.svg
└── index.cshtml
└── program.cs
└── web.config