App Inventor 2 Markdown 自研拓展：Markdown 格式渲染、转换为HTML、生成图片

• Markdown 自研拓展
  • 测试代码块
  • 属性
  • 事件
  • 方法
• 使用示例
  • 把 Markdown 渲染成网页
  • 实时渲染大模型的回答
  • 把渲染结果存成长图
• 拓展下载

« 返回首页

Markdown 自研拓展

拓展提供大模型输出 Markdown 格式的渲染、转换为HTML、生成图片等功能。

结合大模型拓展输出的 Markdown 格式，实时渲染，效果如下：

测试代码块

用法如下：

也可页面底部直接下载 demo 源码进行测试。

注：如果希望屏幕内容可以上下滚动，layout 参数设置一个 垂直滚动条布局。

属性

TransparentBackground

设置WebView背景是否透明。

事件

OnImageGenerated(imagePath)

图片保存完成时触发，参数为图片路径（失败时返回空字符串）。

OnPreviewReady()

Markdown预览加载完成时触发。

方法

MarkdownPreview(layout,markdown)

预览Markdown内容到指定布局（不生成图片）。

MarkdownToHtml(markdown)

将Markdown文本转换为HTML。

SaveToImage(isPublic)

将当前预览内容保存为图片，isPublic 为 “真” 时保存到相册，“假” 时保存到App私有目录。

注：由于保存到相册是公共目录，可能需要请求相关权限，而且原生 图像 组件不能直接访问公共目录的图片文件，可以通过 图像选择器 组件进行访问（实际上是拷贝一份到私有目录，提供私有目录路径给图像组件展示）。

使用示例

下面每张积木图的右上角都有「复制代码块」，点一下，再到代码块编辑器里按 Ctrl+V， 积木就直接进工程了——不用照着一块块拖。

组件名按设计器里的默认中文名写（垂直布局1、按钮1…），拓展组件本身是英文名。 粘贴后如果工程里没有同名组件，组件块会标红，把名字改成你自己的组件即可。

把 Markdown 渲染成网页

MarkdownPreview 的第一个参数是显示区域（拖一个垂直布局进界面），第二个是 Markdown 文本。 渲染完成会触发 OnPreviewReady。

when 按钮_预览.Click() {
  Markdown1.MarkdownPreview(垂直布局_预览, 文本输入框_源码.Text)
}

when Markdown1.OnPreviewReady() {
  标签_提示.Text = "渲染完成"
}

实时渲染大模型的回答

大模型输出的就是 Markdown。流式接收时先把片段拼进变量，finished 为真时再整段渲染一次—— 每来一段就重渲染会闪。

when 按钮_发送.Click() {
  global 回答 = ""
  DeepSeek1.Chat(文本输入框_提问.Text)
}

when DeepSeek1.GotStream(part, finished) {
  global 回答 = join(回答, part)
  if finished {
    Markdown1.MarkdownPreview(垂直布局_预览, 回答)
  }
}

把渲染结果存成长图

SaveToImage 把当前渲染结果导出为图片，完成后 OnImageGenerated 返回路径。 参数为真表示存到公共目录（相册可见）。

when 按钮_存图.Click() {
  Markdown1.SaveToImage(true)
}

when Markdown1.OnImageGenerated(imagePath) {
  图像1.Picture = imagePath
  标签_提示.Text = join("已保存：", imagePath)
}

拓展下载

• .aix 最新拓展下载：

  cn.fun123.Markdown.aix

• demo下载：

  TestMarkdown.aia

  也可从“拓展市场”快速导入：