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'));

const result = md.render('# タイトル :smile:');

必須プラグインカテゴリ

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 プラグインリスト