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.
3Điều tuyệt vời về
# Test Post
This is a test post.
3 là trở thành một phần của hệ sinh thái UnifiedJS. Điều này cho phép chúng tôi xâu chuỗi các gói khác nhau dưới dạng plugin để giúp trích xuất và thao tác nội dung. Nó thực hiện điều này bằng cách lấy Markdown, HTML hoặc văn bản thuần túy và biến nó thành cấu trúc dữ liệu AST [cây cú pháp trừu tượng] mà các plugin trong hệ sinh thái có thể sử dụngDướ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.
4, giá trị trả về sẽ giống như bên dưới{ 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.
5 trong # Test Post
This is a test post.
6 và một # Test Post
This is a test post.
7 trong # Test Post
This is a test post.
8Định dạng siêu dữ liệu sẽ trông như thế này
# Test Post
This is a test post.
1Bản cập nhật mà tôi muốn thực hiện trong
# Test Post
This is a test post.
4 là tách siêu dữ liệu khỏi phần còn lại của nội dung đánh dấu# Test Post
This is a test post.
3Sự 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.
4, { content: "Test Post
\nThis is a test post.
" }
1 đã được sử dụng và nó chạy nội bộ ba phương thức này, { content: "Test Post
\nThis is a test post.
" }
2, { content: "Test Post
\nThis is a test post.
" }
3 và { content: "Test Post
\nThis is a test post.
" }
4Vì 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.
" }
2 một cách độc lập để tạo cây cú pháp và sau đó xóa nút con đầu tiên khỏi câyTô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.
" }
6 để dễ dàng nhận dạng và định dạng bất kỳ cú pháp YAML nào bên trong cây. Sau đó, tôi đã sử dụng { content: "Test Post
\nThis is a test post.
" }
7 để chuyển đổi chuỗi giá trị nút thành JSONSau 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.
" }
3 và { content: "Test Post
\nThis is a test post.
" }
4 còn lại. Giá trị trả về được cập nhật phải có siêu dữ liệu cùng với chuỗi HTML# Test Post
This is a test post.
4Kế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.
10May mắn thay, có một plugin
# Test Post
This is a test post.
11 để tích hợp # Test Post
This is a test post.
10 vào quá trình chuyển đổi, # Test Post
This is a test post.
13Hãy thêm plugin vào
# Test Post
This is a test post.
4# Test Post
This is a test post.
0# Test Post
This is a test post.
10 đã cung cấp cho bạn các kiểu dáng khác nhau mà bạn có thể sử dụng, tất cả những gì bạn phải làm là nhập tệp css bạn chọn vào dự án. Tôi hiện đang sử dụng chủ đề Atom One Light# Test Post
This is a test post.
2Để 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 đó