Qt6 QML Markdown 渲染TextEdit 原生实现、工程 Demoflyfish看https://github.com/shaoshengsong/QwenBox这里 怎么把模型返回的 Markdown 内容显示出来。有两个常见解法Electron基于 Chromium 浏览器内核相当于把一个精简版的 Chrome 浏览器打包进了.exe安装包整个聊天窗口、侧边栏、设置页、工作台全都是用React HTML/CSS/JS写的网页这里用的是Qt 的TextEdit.MarkdownText原生。Qt Quick 的TextEdit控件 属性textFormat: TextEdit.MarkdownText。就这一行设置Qt 会把 MarkdownCommonMark 子集文本自动渲染成富文本。不需要引入任何第三方 Markdown 解析库。TextEdit { text: model.content // 模型返回的 Markdown 原文 textFormat: TextEdit.MarkdownText readOnly: true selectByMouse: true // 允许鼠标拖选、CtrlC 复制 }演示工程markdown-demo/qml/main.qml中右侧「渲染结果」面板是同一行代码左侧是可编辑的源码二者用text: src.text绑定做到实时预览。补充说明如果只是展示、不需要选中复制也可以用Text控件并设textFormat: Text.MarkdownText。聊天场景因为要选中/复制所以用TextEdit。两者底层渲染引擎相同。2. 底层原理TextEdit.MarkdownText走的是Qt 内置的 CommonMark 子集实现。Qt 在内部把 CommonMark 文本转换成QTextDocument 富文本表示再由Qt Quick 的场景图Scene Graph绘制。渲染完全在主线程 / UI 线程完成模型侧只负责把 Markdown 字符串通过C 模型MessageModel传给 QML不参与解析。Markdown 文本 │ Qt 内置 CommonMark 子集解析器 ▼ QTextDocument富文本对象模型 │ Qt Quick 场景图Scene Graph ▼ 屏幕上的富文本3. 演示工程使用方法目录markdown-demo/markdown-demo/ ├── markdown-demo.pro # Qt6 工程文件QT qml quick quickcontrols2c17 ├── main.cpp # 启动器从资源读取 sample.md 注入 QML ├── qml.qrc # 资源main.qml sample.md ├── qml/ │ └── main.qml # 左编辑 / 右实时渲染 的演示界面 ├── sample.md # 一份覆盖常用语法的 Markdown 样例下载地址直接用Qt Creator打开markdown-demo.pro选Qt 6.9.x MSVC2022 64-bitkit 即可构建运行。构建完成后bin/目录已是自包含发布包双击markdown-demo.exe即可打开。
Qt6 QML Markdown 渲染TextEdit 原生实现、工程 Demoflyfish看https://github.com/shaoshengsong/QwenBox这里 怎么把模型返回的 Markdown 内容显示出来。有两个常见解法Electron基于 Chromium 浏览器内核相当于把一个精简版的 Chrome 浏览器打包进了.exe安装包整个聊天窗口、侧边栏、设置页、工作台全都是用React HTML/CSS/JS写的网页这里用的是Qt 的TextEdit.MarkdownText原生。Qt Quick 的TextEdit控件 属性textFormat: TextEdit.MarkdownText。就这一行设置Qt 会把 MarkdownCommonMark 子集文本自动渲染成富文本。不需要引入任何第三方 Markdown 解析库。TextEdit { text: model.content // 模型返回的 Markdown 原文 textFormat: TextEdit.MarkdownText readOnly: true selectByMouse: true // 允许鼠标拖选、CtrlC 复制 }演示工程markdown-demo/qml/main.qml中右侧「渲染结果」面板是同一行代码左侧是可编辑的源码二者用text: src.text绑定做到实时预览。补充说明如果只是展示、不需要选中复制也可以用Text控件并设textFormat: Text.MarkdownText。聊天场景因为要选中/复制所以用TextEdit。两者底层渲染引擎相同。2. 底层原理TextEdit.MarkdownText走的是Qt 内置的 CommonMark 子集实现。Qt 在内部把 CommonMark 文本转换成QTextDocument 富文本表示再由Qt Quick 的场景图Scene Graph绘制。渲染完全在主线程 / UI 线程完成模型侧只负责把 Markdown 字符串通过C 模型MessageModel传给 QML不参与解析。Markdown 文本 │ Qt 内置 CommonMark 子集解析器 ▼ QTextDocument富文本对象模型 │ Qt Quick 场景图Scene Graph ▼ 屏幕上的富文本3. 演示工程使用方法目录markdown-demo/markdown-demo/ ├── markdown-demo.pro # Qt6 工程文件QT qml quick quickcontrols2c17 ├── main.cpp # 启动器从资源读取 sample.md 注入 QML ├── qml.qrc # 资源main.qml sample.md ├── qml/ │ └── main.qml # 左编辑 / 右实时渲染 的演示界面 ├── sample.md # 一份覆盖常用语法的 Markdown 样例下载地址直接用Qt Creator打开markdown-demo.pro选Qt 6.9.x MSVC2022 64-bitkit 即可构建运行。构建完成后bin/目录已是自包含发布包双击markdown-demo.exe即可打开。
