@zhennann/markdown-it-block 是一个Markdown插件，它允许您在Markdown文件中使用自定义块。
本文将详细介绍 @zhennann/markdown-it-block 如何使用以及如何在您的项目中添加它，希望能对您的前端开发工作有所帮助。
安装 @zhennann/markdown-it-block
安装 @zhennann/markdown-it-block 很简单，只需在您的终端中运行以下命令：
npm install @zhennann/markdown-it-block
在您的项目中使用 @zhennann/markdown-it-block
安装完成后，在您的 JS 文件中引入 markdown-it 和 @zhennann/markdown-it-block。
import MarkdownIt from 'markdown-it'; import block from '@zhennann/markdown-it-block'; const md = new MarkdownIt(); md.use(block);
接下来，您将可以在 Markdown 中使用自定义块。
例如：
::: warning 这是一个警告。 :::
将渲染为以下 HTML：
<div class="warning"> <p>这是一个警告。</p> </div>
自定义块的语法
您可以使用以下语法来创建自定义块：
::: [选项列表] {className}
内容
:::其中，
- 选项列表是用于传递自定义块数据的对象。
- className 是将应用于自定义块的HTML类名。
- 内容是自定义块的内容。
例如，您可以创建一个名为 myblock 的自定义块：
::: {myData: "myValue"} {myClass}
这是我的自定义块。
:::这将渲染为以下 HTML：
<div class="myClass" data-my-data="myValue"> <p>这是我的自定义块。</p> </div>
选项列表的使用
您可以通过向选项列表中添加键值对来传递自定义块数据。这将允许您使用自定义块中的数据，并从那里操作它们。
例如，您可以创建带有选项列表的块：
::: {author: "Alice", date: "2021-06-04"} {myClass}
这是作者为 Alice，日期为 2021-06-04 的自定义块。
:::接下来，您就可以在您的代码中使用这些数据：
md.renderer.rules.block_myblock = (tokens, idx) => {
const { author, date } = tokens[idx].info;
// Do something with author and date
return "<div>My custom block</div>";
}示例代码
以下是一个使用 @zhennann/markdown-it-block 的示例代码：
-- -------------------- ---- ------- ------ ---------- ---- -------------- ------ ----- ---- ------------------------------ ----- -- - --- ------------- -------------- ------------------------------- - -------- ---- -- - ----- ------- - ----------------------------- - ------------ ------------ ------ ----- ---------------------------------- -- ----- -------- - - --- ------- ------- --- -- ---------------------------------
当您使用这些代码时，您将在控制台中看到以下输出：
<div class="warning"><p>这是一个警告。</p></div>
总结
在本文中，我们介绍了 @zhennann/markdown-it-block 的用法和语法，以及如何在您的项目中使用它来创建自定义块。我们希望这篇文章对您的前端开发工作有所帮助，让您可以更加灵活地使用Markdown。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f0bbdce403f2923b035c107