Kết xuất đánh dấu trong HTML

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ụng

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

  • # Test Post
    
    This is a test post.
    
    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

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

\n

This 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.
1

Bả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.
3

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.
4,
{ content: "

Test Post

\n

This 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

\n

This is a test post.

"
}
2,
{ content: "

Test Post

\n

This is a test post.

"
}
3 và
{ content: "

Test Post

\n

This is a test post.

"
}
4

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

\n

This 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ây

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

\n

This 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

\n

This is a test post.

"
}
7 để chuyển đổi chuỗi giá trị nút thành JSON

Sau khi siêu dữ liệu bị xóa, tôi chạy các phương thức

{ content: "

Test Post

\n

This is a test post.

"
}
3 và
{ content: "

Test Post

\n

This 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.
4

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

May 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.
13

Hã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 đó

Làm cách nào để hiển thị Markdown trong HTML?

Để chuyển Markdown sang HTML bằng Typora, nhấp vào Tệp —> Xuất —> HTML . Sau đó lưu tệp ở vị trí ưa thích của bạn. Hình ảnh bên dưới cho thấy đầu ra HTML giống hệt như cách Markdown được hiển thị bên trong Typora.

Bạn có thể nhúng Markdown vào HTML không?

Bạn có thể nhúng Markdown vào các tệp HTML của mình và hiển thị nó trên ứng dụng khách vào thời điểm yêu cầu . Một số Markdown *embedded* mà `md-block` có thể chuyển đổi cho bạn.

Markdown có thể được chuyển đổi thành HTML không?

Bạn có thể viết Markdown trực tuyến trong trình chỉnh sửa của nó hoặc chỉ cần dán vào văn bản đã hoàn thành của mình, sau đó xem trước phiên bản được định dạng ở bên phải. Sao chép văn bản đã định dạng để xuất nhanh—hoặc nhấp vào menu Xuất dưới dạng để lưu tài liệu của bạn ở định dạng HTML, PDF hoặc văn bản thuần túy

Markdown được hiển thị như thế nào?

Tài liệu đánh dấu không được xử lý trước, nghĩa là chúng được viết, lưu trữ và chuyển giao như nguyên trạng. Trình kết xuất Markdown nhận trực tiếp nội dung văn bản thuần túy. Sau đó, trình kết xuất sẽ chịu trách nhiệm chuyển đổi văn bản thành tài liệu có cấu trúc .

Chủ Đề