Markdown 插件生態系統

Markdown 的真正威力在於其可擴展性。通過插件，你可以添加新功能、自定義語法，並將 Markdown 與各種工具和服務整合。

流行的 Markdown 處理器

Marked.js

快速的 JavaScript Markdown 解析器。

安裝

npm install marked

基本使用

const marked = require('marked');

const markdown = '# Hello World';
const html = marked.parse(markdown);

擴展 Marked

const marked = require('marked');

// 自定義渲染器
const renderer = {
  heading(text, level) {
    return `<h${level} class="custom-heading">${text}</h${level}>`;
  },
  link(href, title, text) {
    return `<a href="${href}" target="_blank">${text}</a>`;
  }
};

marked.use({ renderer });

Markdown-it

可插拔的 Markdown 解析器，速度快且易於擴展。

安裝

npm install markdown-it

基本使用

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

const result = md.render('# Hello World');

使用插件

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

// 添加插件
md.use(require('markdown-it-emoji'));
md.use(require('markdown-it-footnote'));
md.use(require('markdown-it-anchor'));
md.use(require('markdown-it-table-of-contents'));

const result = md.render('# 標題 :smile:');

Remark

由插件驅動的 Markdown 處理器，基於統一的生態系統。

安裝

npm install remark remark-html

基本使用

const remark = require('remark');
const html = require('remark-html');

remark()
  .use(html)
  .process('# Hello World', (err, file) => {
    console.log(String(file));
  });

必備插件類別

1. 語法擴展插件

GitHub Flavored Markdown (GFM)

npm install remark-gfm

const remark = require('remark');
const gfm = require('remark-gfm');

remark()
  .use(gfm)
  .process('~~刪除線~~ 和任務列表 [x]');

表情符號

npm install markdown-it-emoji

const md = require('markdown-it')();
md.use(require('markdown-it-emoji'));

md.render('你好 :smile:');  // 你好 😄

2. 目錄 (TOC) 插件

Remark TOC

npm install remark-toc

const remark = require('remark');
const toc = require('remark-toc');

remark()
  .use(toc, { heading: '目錄' })
  .process(markdown);

3. 代碼高亮插件

Highlight.js

npm install highlight.js

const marked = require('marked');
const hljs = require('highlight.js');

marked.setOptions({
  highlight: function(code, lang) {
    if (lang && hljs.getLanguage(lang)) {
      return hljs.highlight(code, { language: lang }).value;
    }
    return code;
  }
});

創建自定義插件

Markdown-it 插件

簡單插件

function myPlugin(md) {
  // 保存原始的段落渲染規則
  const defaultRender = md.renderer.rules.paragraph_open || 
    function(tokens, idx, options, env, self) {
      return self.renderToken(tokens, idx, options);
    };

  // 覆蓋段落渲染
  md.renderer.rules.paragraph_open = function(tokens, idx, options, env, self) {
    tokens[idx].attrSet('class', 'custom-paragraph');
    return defaultRender(tokens, idx, options, env, self);
  };
}

const md = require('markdown-it')();
md.use(myPlugin);

結論

Markdown 插件生態系統非常豐富，幾乎可以滿足任何需求。選擇合適的處理器和插件，可以大大增強 Markdown 的功能。如果找不到合適的插件，創建自定義插件也相對簡單。

其他資源

• Awesome Markdown - Markdown 資源合集
• Markdown-it 插件列表
• Remark 插件列表
• 統一生態系統 - Remark 背後的框架