markdown-it-container 使用教程

项目介绍

markdown-it-container 是一个用于 markdown-it 解析器的插件，允许你创建自定义的块级容器。这些容器可以用于包装 Markdown 内容，并通过自定义渲染规则来扩展 Markdown 的功能。

项目快速启动

安装

首先，你需要安装 markdown-it 和 markdown-it-container：

npm install markdown-it markdown-it-container

使用

以下是一个简单的示例，展示如何使用 markdown-it-container 创建一个自定义容器：

const MarkdownIt = require('markdown-it');
const markdownItContainer = require('markdown-it-container');

const md = new MarkdownIt();

md.use(markdownItContainer, 'my-container', {
  validate: function(params) {
    return params.trim().match(/^my-container\s*(.*)$/);
  },
  render: function(tokens, idx) {
    if (tokens[idx].nesting === 1) {
      // 开始标签
      return '<div class="my-container">\n';
    } else {
      // 结束标签
      return '</div>\n';
    }
  }
});

const result = md.render('::: my-container\n这是一个自定义容器\n:::');
console.log(result);

应用案例和最佳实践

创建警告框

你可以使用 markdown-it-container 创建一个警告框，用于突出显示重要信息：

::: warning
这是一个警告信息
:::

对应的渲染函数：

md.use(markdownItContainer, 'warning', {
  render: function(tokens, idx) {
    if (tokens[idx].nesting === 1) {
      return '<div class="warning">\n';
    } else {
      return '</div>\n';
    }
  }
});

创建代码块

你还可以创建一个自定义代码块，用于显示特定语言的代码：

::: code-block javascript
console.log('Hello, world!');
:::

对应的渲染函数：

md.use(markdownItContainer, 'code-block', {
  validate: function(params) {
    return params.trim().match(/^code-block\s*(.*)$/);
  },
  render: function(tokens, idx) {
    const match = tokens[idx].info.trim().match(/^code-block\s*(.*)$/);
    if (tokens[idx].nesting === 1) {
      return `<pre><code class="language-${match[1]}">`;
    } else {
      return '</code></pre>\n';
    }
  }
});

典型生态项目

markdown-it-container 是 markdown-it 生态系统中的一个重要插件。以下是一些相关的项目：

• markdown-it: 一个快速且易于扩展的 Markdown 解析器。
• markdown-it-attrs: 允许你在 Markdown 内容中添加 HTML 属性。
• markdown-it-emoji: 支持在 Markdown 中使用表情符号。

这些项目共同构成了一个强大的 Markdown 处理工具集，适用于各种复杂的文档处理需求。