Markdown là một ngôn ngữ đánh dấu nhẹ và cú pháp được hỗ trợ bởi nhiều ứng dụng web và máy tính để bàn, chẳng hạn như Notion, Github và Slack. So với HTML, việc viết, định dạng và đọc nội dung của bạn trong markdown dễ dàng hơn
Nói như vậy, sử dụng markdown cho tất cả các bài đăng trên blog của tôi sẽ mang lại cho tôi trải nghiệm viết blog đơn giản
Thách thức bây giờ là hiển thị nội dung Markdown cho trình duyệt. Có rất nhiều bộ xử lý đánh dấu phổ biến hiện có và đối với blog này, tôi quyết định sử dụng
# Test Post
This is a test post.
Điều tuyệt vời về
# Test Post
This is a test post.
Dưới đây là các bước đơn giản để chuyển đổi tệp đánh dấu thành chuỗi HTML mà tôi sử dụng cho blog của mình
// process-markdown.ts
import toVFile, { VFile } from 'to-vfile';
import unified from 'unified';
import remarkParse from 'remark-parse';
import remark2rehype from 'remark-rehype';
import rehypeStringify from 'rehype-stringify';
const processor = unified[]
.use[remarkParse]
.use[remark2rehype]
.use[rehypeStringify];
export async function processMarkdown[filename: string]: Promise {
const file = await toVFile.read[filename];
const data = await processor.process[file];
return { content: data.contents };
}
Như bạn có thể nhận thấy, tôi đã nhập ba plugin để thực hiện 3 việc này
1 - Phân tích cú pháp đánh dấu thành cây cú pháp# Test Post This is a test post.
2 - Chuyển đổi cây cú pháp thành cây cú pháp HTML# Test Post This is a test post.
3 - Biến cây cú pháp HTML thành chuỗi HTML# Test Post This is a test post.
Giả sử bạn có tệp đánh dấu sau
# Test Post
This is a test post.
Nếu tôi tham chiếu đường dẫn tệp ở trên đến hàm
# Test Post
This is a test post.
{ content: "Test Post
\nThis is a test post.
" }
Thêm siêu dữ liệu
Tiếp theo, tôi muốn thêm siêu dữ liệu vào đầu tệp đánh dấu. Đây là nơi tôi muốn ghi lại danh sách các thẻ và ngày tạo của mỗi bài đăng trên blog. Tôi cũng muốn di chuyển tiêu đề ở đó để tôi có thể sử dụng nó ở hai nơi. Là một
# Test Post
This is a test post.
# Test Post
This is a test post.
# Test Post
This is a test post.
# Test Post
This is a test post.
Định dạng siêu dữ liệu sẽ trông như thế này
# Test Post
This is a test post.
Bản cập nhật mà tôi muốn thực hiện trong
# Test Post
This is a test post.
# Test Post
This is a test post.
Sự thay đổi ở trên trông có vẻ phức tạp nhưng hoàn toàn không phải vậy, hãy chia nhỏ nó ra
Trong lần lặp đầu tiên của
# Test Post
This is a test post.
{ content: "Test Post
\nThis is a test post.
" }
{ content: "Test Post
\nThis is a test post.
" }
{ content: "Test Post
\nThis is a test post.
" }
{ content: "Test Post
\nThis is a test post.
" }
Vì tôi muốn lấy siêu dữ liệu ra khỏi phần còn lại của nội dung. Trước tiên, tôi cần chạy phương thức
{ content: "Test Post
\nThis is a test post.
" }
Tôi muốn chỉ ra loại cú pháp siêu dữ liệu có trong YAML và tôi đã thêm plugin
{ content: "Test Post
\nThis is a test post.
" }
{ content: "Test Post
\nThis is a test post.
" }
Sau khi siêu dữ liệu bị xóa, tôi chạy các phương thức
{ content: "Test Post
\nThis is a test post.
" }
{ content: "Test Post
\nThis is a test post.
" }
# Test Post
This is a test post.
Kết xuất khối mã
Cuối cùng, Đây không phải là bài đăng trên blog của nhà phát triển nếu không có cú pháp đánh dấu phong cách cho khối mã. Một trong những thư viện đánh dấu cú pháp phổ biến nhất là
# Test Post
This is a test post.
May mắn thay, có một plugin
# Test Post
This is a test post.
# Test Post
This is a test post.
# Test Post
This is a test post.
Hãy thêm plugin vào
# Test Post
This is a test post.
# Test Post
This is a test post.
# Test Post
This is a test post.
# Test Post
This is a test post.
Để hoàn thiện tệp đánh dấu mà chúng tôi đã tham khảo cho bài đăng này, hãy chèn một khối mã JavaScript vào tệp đó