markdown-it-container 使用教程

47 0 0

markdown-it-container 使用教程

markdown-it-containerFenced container plugin for markdown-it markdown parser项目地址:https://gitcode.com/gh_mirrors/ma/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-containers*(.*)$/);
  },
  render: function(tokens, idx) {
    if (tokens[idx].nesting === 1) {
      // 开始标签
      return '<div class="my-container">
';
    } else {
      // 结束标签
      return '</div>
';
    }
  }
});
 
const result = md.render('::: my-container
这是一个自定义容器
:::');
console.log(result);

应用案例和最佳实践

创建警告框

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

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

对应的渲染函数：


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

创建代码块

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


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

对应的渲染函数：


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