Skip to content

Plugin và Tiện ích Mở rộng Markdown

Các plugin mở rộng chức năng Markdown, cho phép bạn thêm tính năng tùy chỉnh, cải thiện xử lý và tạo trải nghiệm nội dung độc đáo.

Hệ thống Plugin Phổ biến

markdown-it (JavaScript)

javascript
const MarkdownIt = require('markdown-it');
const md = new MarkdownIt();

// Kích hoạt plugins
md.use(require('markdown-it-emoji'));
md.use(require('markdown-it-footnote'));
md.use(require('markdown-it-abbr'));
md.use(require('markdown-it-container'), 'warning');

const html = md.render('# Xin chào :smile:');

Remark (JavaScript)

javascript
import {unified} from 'unified';
import remarkParse from 'remark-parse';
import remarkGfm from 'remark-gfm';
import remarkHtml from 'remark-html';

unified()
  .use(remarkParse)
  .use(remarkGfm)
  .use(remarkHtml)
  .process('# Xin chào');

Python-Markdown

python
import markdown

md = markdown.Markdown(extensions=[
    'extra',
    'codehilite',
    'toc',
    'tables'
])

html = md.convert('# Xin chào')

Danh mục Plugin Phổ biến

Emoji và Biểu tượng

javascript
// markdown-it-emoji
md.use(require('markdown-it-emoji'));

// Sử dụng
Tôi yêu Markdown! :heart: :rocket:

Bảng và Sơ đồ

javascript
// hỗ trợ mermaid
md.use(require('markdown-it-mermaid'));
markdown
\`\`\`mermaid
graph TD
  A[Bắt đầu] --> B[Xử lý]
  B --> C[Kết thúc]
\`\`\`

Hộp Container Tùy chỉnh

javascript
md.use(require('markdown-it-container'), 'warning', {
  render: function (tokens, idx) {
    if (tokens[idx].nesting === 1) {
      return '<div class="warning">\n';
    } else {
      return '</div>\n';
    }
  }
});
markdown
::: warning
Đây là cảnh báo quan trọng!
:::

Tạo Plugin Tùy chỉnh

markdown-it Plugin

javascript
function customPlugin(md, options) {
  // Quy tắc tùy chỉnh
  md.inline.ruler.before('emphasis', 'custom', function(state, silent) {
    // Logic xử lý tùy chỉnh
  });

  // Trình kết xuất tùy chỉnh
  md.renderer.rules.custom = function(tokens, idx) {
    return '<span class="custom">' + tokens[idx].content + '</span>';
  };
}

module.exports = customPlugin;

Plugin Được khuyến nghị

markdown-it

  • markdown-it-emoji - Hỗ trợ emoji
  • markdown-it-footnote - Chú thích cuối trang
  • markdown-it-abbr - Viết tắt
  • markdown-it-deflist - Danh sách định nghĩa
  • markdown-it-container - Container tùy chỉnh
  • markdown-it-table-of-contents - Mục lục

Remark

  • remark-gfm - Hỗ trợ GitHub Flavored Markdown
  • remark-math - Phương trình toán học
  • remark-toc - Mục lục
  • remark-frontmatter - Hỗ trợ frontmatter

Thực hành Tốt nhất

  1. Hiệu suất: Chỉ sử dụng các plugin cần thiết
  2. Tương thích: Kiểm tra tương thích phiên bản
  3. Bảo mật: Kiểm tra plugin cho các lỗ hổng
  4. Tài liệu: Ghi lại các plugin đã sử dụng
  5. Bảo trì: Cập nhật plugin thường xuyên

Kết luận

Các plugin Markdown cung cấp tính linh hoạt vô hạn để tùy chỉnh xử lý và hiển thị Markdown của bạn. Chọn các plugin phù hợp với nhu cầu của bạn và tuân theo các thực hành tốt nhất để có kết quả tốt nhất.

Tài nguyên Bổ sung

Được xây dựng bởi www.markdownlang.com