Hướng dẫn highlight code cho bài viết trong Ghost CMS

Mạnh Hà -

Trong bài này, tôi sẽ chỉ ra cách thêm các đoạn code vào trang web Ghost highlight các đoạn code đó cho dễ đọc.

Tạo code block
Để thêm một code block vào một bài đăng hoặc trang, hãy nhập ba dấu gạch ngược (```) và nhấn enter.
Để đặt ngôn ngữ cho khối mã, hãy viết nó sau dấu gạch ngược.

Ví dụ, nếu tôi đang viết JavaScript, tôi sẽ nhập

```javascript

và nhấn enter.
hoặc, nhập

```

và sau đó điền tên ngôn ngữ ở góc trên cùng bên phải của code block

Thêm syntax highlighting

Mình sử dụng prism nó là 1 thư viện JS nhẹ để highlight code.

  • Chuẩn bị thư viện, vào CDN của Cloudflare để lấy link, bạn có thể sao chép các thẻ trực tiếp từ cdnjs.com hoặc sao chép mã bên dưới. Thời điểm hiện tại, Prism.js ở phiên bản 1.27.0, tùy thời điểm bạn có thể lựa chọn mà tải về. Lấy 2 file chính là prism.min.css và prism.min.js
<!-- link tag --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/themes/prism.min.css" />

<!-- script tag -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/prism.min.js"></script>

Trong phần quản trị của ghost CMS https://your_site_url/ghost, vào "Code injection", chèn "link tag" vào "Site Header" và "script tag" vào "Site Footer"

Lưu lại, vậy là hoàn thành. Bạn có thể tùy chọn theme bằng cách thay prism.min.js bằng themes khác, cũng như có thể thêm các plugin khác cho prism. Tìm hiểu thêm về themes và plugins.

Mở rộng: thêm nút "copy to clipboard" (tùy chọn)

Thêm nút "copy to clipboard" giúp người đọc có thể nhanh chóng copy đoạn code mẫu đó về. Chúng ta thực hiện điều này bằng prism plugin.

Chèn vào phần site header

<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/themes/prism.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/plugins/toolbar/prism-toolbar.min.css" />

Chèn vào phần site footer

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/prism.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/plugins/toolbar/prism-toolbar.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>

Chúc các bạn thành công.
Nếu có khó khăn hay có câu hỏi gì hãy đừng ngại ngần mà viết comment ở phần bên dưới nhé.

Đọc thêm:

Hướng dẫn cài đặt Ghost trên Ubuntu Server 20.04LTS
Chèn Disqus comment cho blog ghost