markdown-it-container 技术文档

markdown-it-container 技术文档

markdown-it-container Fenced container plugin for markdown-it markdown parser 项目地址: https://gitcode.com/gh_mirrors/ma/markdown-it-container

---

安装指南

对于 node.js 环境：

npm install markdown-it-container --save

如果你在进行前端开发并使用 Browserify 或类似工具：

bower install markdown-it-container --save

这两种命令将 markdown-it-container 包含到你的项目依赖中。

---

项目使用说明

markdown-it-container 插件允许你在 markdown 文档中创建自定义的块级容器，类似于这样：

::: warning
这里会有龙！
:::

这段标记会被解析成包含特定类名的 div 标签：

<div class="warning">
  这里会有龙！
</div>

如果没有指定渲染器，它会默认生成一个带相应类的 div。

---

项目API使用文档

要在 markdown-it 解析器中启用此插件，你需要按照以下方式调用它：

var md = require('markdown-it')();
md.use(require('markdown-it-container'), 'container-name', {options});

参数说明

• container-name：必需，定义容器的名字。
• 选项：
  • validate（可选）：验证函数，用于检查在打开标记后的内容，成功时应返回 true。
  • render（可选）：渲染函数，用于自定义容器的开始和结束标签的生成。
  • marker（可选，默认为 :）：分隔符字符。

示例

假设我们想要创建一个名为“spoiler”的特殊容器，可以这样做：

var md = require('markdown-it')();
md.use(require('markdown-it-container'), 'spoiler', {
  validate: function(params) {
    return params.trim().match(/^spoiler\s+(.*)$/);
  },
  render: function(tokens, idx) {
    var m = tokens[idx].info.trim().match(/^spoiler\s+(.*)$/);
    if (tokens[idx].nesting === 1) {
      // 开启标签
      return '<details><summary>' + md.utils.escapeHtml(m[1]) + '</summary>\n';
    } else {
      // 结束标签
      return '</details>\n';
    }
  }
});

console.log(md.render('::: spoiler 点击以显示\n这是秘密内容\n:::\n'));

这将输出：

<details><summary>点击以显示</summary>
<p>这是秘密内容</p>
</details>

---

许可证

本项目遵循 MIT 许可证。详情参见 LICENSE 文件。

通过以上步骤和说明，你现在应该能够顺利地在你的 markdown 内容中添加自定义容器，并利用 markdown-it-container 的强大功能来增强文档的表现力了。希望这份文档对你有所帮助！

markdown-it-container Fenced container plugin for markdown-it markdown parser 项目地址: https://gitcode.com/gh_mirrors/ma/markdown-it-container