使用 lute 支持直接输出 AST 吗?

本贴最后更新于 1440 天前,其中的信息可能已经事过景迁

需求背景

如题,web 端项目的编辑器是基于 Vditor 实现的。移动端项目的实现计划是使用 React Native,根据 lute 引擎产生 markdown AST,然后自己实现 renderer。希望得到类似 marked.js 这个项目中的 marked.lexer 的输出效果,然后映射 RN 的跨端 Component 实现 markdown 的样式渲染目的。

已经做的事情

根据阅读 lute 的 README、vditor 的源码中 types/index.d.ts 及 goDoc 关于 lute 的方法定义,输出的内容感觉与 HTML 已经做了绑定而非解析器的输出。

希望得到的支持

想请教一下是否支持,或可以支持直接的 AST 输出,提供支持供 lute.min.js 或者 *.ts 的调用。

@88250 @Vanessa

  • Lute

    Lute 是一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。

    25 引用 • 191 回帖 • 17 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • 88250

    渲染器支持自定义的,请看 Lute 项目下有示例。

    1 回复
  • HerbertHe

    感谢大佬的指点,根据 demo.js 和 Vditor 源码中的 types 尝试实现了节点的替换,但类型是字符串。对于产生组件来说,好像不是很合适,不知道 callback 的内容的类型是否可以修改。

    如果可以的话,还带来了一个新的问题。

    比如 renderStrong 这一族的自定义渲染器有五个

    • renderStrong
    • renderStrongA6kOpenMarker
    • renderStrongA6kCloseMarker
    • renderStrongU8eOpenMarker
    • renderStrongU8eCloseMarker

    其中的 renderStrong 渲染器自带了 DOM 节点 <strong></strong>,如果是字符串的话可以通过替换 xxxOpenMarkerxxxCloseMarker 的渲染来实现。但是如果支持返回组件的话,就会存在组件不闭合的报错,例如

    // 返回值类型为string
    renderStrongA6kOpenMarker: (node, entering) => {
        if(entering) {
            return ["<View>", Lute.WalkContinue]
        }
    }
    
    // 返回值为组件之后
    renderStrongA6kOpenMarker: (node, entering) => {
        if(entering) {
            return [<View>, Lute.WalkContinue]
        }
    }
    
    // 返回值类型为string
    renderStrongA6kCloseMarker: (node, entering) => {
        if(entering) {
            return ["</View>", Lute.WalkContinue]
        }
    }
    
    // 返回值为组件之后
    renderStrongA6kCloseMarker: (node, entering) => {
        if(entering) {
            return [</View>, Lute.WalkContinue]
        }
    }
    

    如果可以通过对 renderStrong 的渲染器添加清空默认 DOM 的渲染,可以直接规避这个可能的 issue

    renderStrong: (node, entering) => {
        if(entering) {
            return [<View>node.Text()</View>, Lute.WalkContinue]
        }
    }
    
    // 输出
    // <View>node.Text()</View>
    
    // 而非
    // <View>node.Text()</View><strong>node.Text()</strong>
    

    并且还可以直接支持 React、React Native 等生成自定义的组件 emmmm

HerbertHe
主营前端, 热衷于造轮子 ~ 现为西部计划服务新疆专项志愿者~ Nuco.Tech Studio 联合创始人 太原