写了一个 markdown-it 拓展，让你的 Markdown 变的更加强大！（markdown-it-directive）

[lookas2001]

其实，标题这么讲有些夸张（捂脸）。这个插件的主要作用是实现了 Generic directives/plugins syntax spec 标准，配合另外一个插件 markdown-it-directive-webcomponents 可以将 WebComponents 嵌入到 Markdown 文档中。这样可以很大程度上减轻为 Markdown 拓展功能所需要的写代码负担。

具体来讲，可以将：

text before :directive-name[content](/link "destination" /another "one"){.class #id name=value name="string!"} text after

:: directive-name [inline content] (/link "destination" /another "one") {.class #id name=value name="string!"} content title ::

::: directive-name [inline content] (/link "destination" /another "one") {.class #id name=value name="string!"} content title ::
content
:::

配合 markdown-it 解析成：

<p>text before <tag-name class="class" id="id" name="value" src="/link" title="destination">content</tag-name> text after</p>

<tag-name class="class" id="id" name="value" src="/link" title="destination">inline content</tag-name>

<tag-name class="class" id="id" name="value" src="/link" title="destination">
<p>content</p>
</tag-name>

接下来就可以用 Vue 这种框架来渲染结果啦~~~

希望能为需要的人带来帮助！

项目地址：

markdown-it-directive: https://github.com/hilookas/markdown-it-directive
markdown-it-directive-webcomponents: https://github.com/hilookas/markdown-it-directive-webcomponents

[lookas2001]

如果对你有帮助的话，欢迎给个 star~~~