bny-md Markdown 扩展

基于 HTMX 扩展模式的 Markdown 运行时渲染器。无需构建步骤，将 Markdown 文本实时渲染为 bny-ui 组件。支持基本语法、GFM 扩展、常用 hack 语法、自定义插件，并与 HTMX 响应无缝集成。

1. 元素触发

hx-ext="bny-md"

直接在容器元素上写 hx-ext="bny-md"，该元素的 textContent 会被解析为 Markdown 并替换为渲染后的 HTML。bny-md-config 属性写在与 hx-ext 相同的标签上即可作为元素级配置。

预览
代码

# 内联 Markdown 这段内容会被 **bny-md** 自动渲染。 - 列表项 1 - 列表项 2 - [x] 已完成 - [ ] 待办 > 引用块也支持

<div hx-ext="bny-md">
# 内联 Markdown

这段内容会被 **bny-md** 自动渲染。

- 列表项 1
- 列表项 2
</div>

2. 加载 .md 文件

hx-get + .md 响应

当 HTMX 请求的 URL 以 .md 结尾（或响应头 Content-Type: text/markdown）时， bny-md 会自动将响应体解析为 HTML 再交换到目标元素。

预览
代码

<button hx-get="sample.md"
        hx-target="#md-output"
        hx-ext="bny-md"
        bny-md-config='{"html":true}'
        class="bny-btn" color="blue">
    加载 sample.md
</button>

<div id="md-output"></div>

3. 命令式调用

bny.markdown(text)

通过全局 API bny.markdown(text, options) 在任意 JavaScript 中将 Markdown 文本渲染为 HTML 字符串，可用于动态内容、表单预览等场景。修改下方文本框内容后点击「渲染」按钮查看效果。

预览
代码

<textarea id="md-input"># 输入 Markdown</textarea>
<button onclick="render()">渲染</button>
<div id="md-output-2"></div>

<script>
function render() {
    document.getElementById('md-output-2').innerHTML =
        bny.markdown(document.getElementById('md-input').value);
}
</script>

4. 自定义插件

bny.md.block()

通过 bny.md.block() 注册自定义块级规则，无需修改核心解析器。下方示例注册了一个 :::callout 语法，将其渲染为 bny-alert 组件。

预览
代码

:::callout 这是一个自定义 callout 块 :::

<script>
// multiline 模式下 ctx.__lines 收集从开始到结束的所有行
bny.md.block({
    name: 'callout',
    test: /^:::callout\s*$/,
    multiline: true,
    render: function(match, ctx) {
        var lines = (ctx.__lines || []).slice(1, -1);
        var body = lines.join('\n').trim();
        return '<div class="bny-alert" color="blue">' +
            ctx.inline(body) + '</div>';
    }
});
</script>

<div hx-ext="bny-md">
:::callout
这是一个自定义 callout 块
:::
</div>