Tauri Tutorial Markdown 编辑器开发Monaco Editor markdown-it 打造 MdHub【免费下载链接】tauri-tutorial Tauri Tutorial (系列教程 - 打造属于自己的跨端应用)项目地址: https://gitcode.com/gh_mirrors/ta/tauri-tutorial想要用Tauri 教程系列的方式从零打造一款属于自己的跨端桌面应用吗本文带你走进tauri-tutorial项目中的MdHub——一个基于Monaco Editor与markdown-it构建的轻量级 Markdown 编辑器。它是 Tauri 开发中前端 Web 技术 桌面能力组合的绝佳范例非常适合新手学习 Tauri 跨端应用开发与 Markdown 编辑器实现思路。MdHub 是什么✨MdHub 是tauri-tutorial项目应用名为 OhMyBox内置的工具之一在仪表盘中通过/tools/mdhub路由即可进入。它的核心能力很简单左侧使用Monaco EditorVS Code 同款编辑器内核提供 Markdown 源码编辑右侧实时渲染 Markdown 预览语法高亮开箱即用支持一键切换预览开关、导出 PDF预留入口整套界面运行在 Tauri 桌面包壳中体验与原生应用无差异核心技术栈一览 MdHub 用到的核心依赖都定义在项目的package.json中这里整理成一张表方便你快速把握依赖作用monaco-editor/reactReact 版 Monaco Editor负责代码编辑体验markdown-it把 Markdown 文本解析为 HTMLhighlight.js代码块语法高亮github-markdown-cssGitHub 风格的 Markdown 预览样式allotment可拖拽调整宽度的分栏布局tauri-apps/api调用 Tauri 的桌面能力文件系统、弹窗等从入口看实现路由与视图 ️MdHub 的页面入口定义在src/routes.tsx中路由路径为/tools/mdhub对应组件位于src/views/mdhub/index.tsx。页面整体结构很清晰FullScreen taskbar{...} Editor langmarkdown onChange{handleEditor} preview{...} / /FullScreenFullScreen是项目通用的全屏布局组件src/layouts/FullSreen.tsx顶部任务栏放置了返回按钮、预览开关和 PDF 导出图标符合 Tauri 桌面应用的操作习惯。编辑器核心Monaco Editor 集成 编辑体验由通用组件src/components/Editor/index.tsx提供它接收lang、defaultValue、onChange、preview四个 props内部通过Allotment实现左右分栏左栏渲染MonacoEditor传入defaultLanguage与内容回调右栏仅在传入preview时才渲染实现编辑 实时预览双栏效果面板最小宽度设为 100px用户可以自由拖拽调节比例这样的组件设计让 Editor 不只服务于 Markdown任何语言如 JSON、Rust都能复用体现了工具集项目的通用性。实时预览markdown-it 的魔法 预览渲染的关键在src/utils/mdParser.ts这里封装了一个全局可复用的 markdown-it 实例export const mdParser MarkdownIt({ html: true, highlight: (str, lang) { /* hljs 高亮逻辑 */ }, });几个值得注意的细节开启html: true允许 Markdown 中嵌入 HTML 片段对json5语言做了兼容处理自动映射为js高亮高亮结果包装为omb-code-wrap/omb-code-container类便于在src/views/mdhub/index.scss中定制深色代码块样式在 MdHub 视图中编辑器每次输入都会触发handleEditor把mdParser.render(content)的结果交给预览区通过dangerouslySetInnerHTML注入到markdown-body容器里再套用github-markdown-css呈现出的效果和 GitHub 阅读体验几乎一致。手动体验本地运行指南 如果你想把项目跑起来亲手体验 MdHub可以 clone 仓库到本地git clone https://gitcode.com/gh_mirrors/ta/tauri-tutorial按照README.md的说明需要先安装 Rust、Node.js、wasm-pack 和 rsw。启动时必须开两个终端窗口顺序不能乱# 终端一先启动 Rust wasm 监听不要关闭 yarn rsw watch # 终端二再启动 Tauri 开发模式 yarn tauri dev应用启动后在仪表盘工具区点击 MdHub 图标就能看到我们文章里介绍的 Markdown 编辑器了。扩展思路把 MdHub 变得更强大 学会了核心实现你还可以沿着这个方向继续扩展文件读写结合src/system/fs.ts中封装的readTextFile/writeFile方法为 MdHub 接入打开、保存 Markdown 文件的能力多语言支持项目已集成 i18next 多语言体系locales/目录可以为新功能同步补充中英文文案自定义主题Monaco Editor 支持切换主题可以让编辑器适配深浅色模式导出 PDF任务栏已预留 PDF 入口可以调用 Tauri 的能力实现文档导出写在最后 通过 MdHub 这个例子我们完整看到了Monaco Editor markdown-it这套组合如何在 Tauri 跨端应用中被组织起来通用 Editor 组件负责编辑、mdParser负责解析、github-markdown-css 负责观感各司其职又高度解耦。对于想入门Tauri 桌面应用开发或想实现 Markdown 编辑器的同学来说这份代码就是一份开箱即用的优质样板。跟着tauri-tutorial系列教程动手敲一遍你会发现用 Web 技术打造跨端应用比想象中更简单。【免费下载链接】tauri-tutorial Tauri Tutorial (系列教程 - 打造属于自己的跨端应用)项目地址: https://gitcode.com/gh_mirrors/ta/tauri-tutorial创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Tauri Tutorial Markdown 编辑器开发：Monaco Editor + markdown-it 打造 MdHub
Tauri Tutorial Markdown 编辑器开发Monaco Editor markdown-it 打造 MdHub【免费下载链接】tauri-tutorial Tauri Tutorial (系列教程 - 打造属于自己的跨端应用)项目地址: https://gitcode.com/gh_mirrors/ta/tauri-tutorial想要用Tauri 教程系列的方式从零打造一款属于自己的跨端桌面应用吗本文带你走进tauri-tutorial项目中的MdHub——一个基于Monaco Editor与markdown-it构建的轻量级 Markdown 编辑器。它是 Tauri 开发中前端 Web 技术 桌面能力组合的绝佳范例非常适合新手学习 Tauri 跨端应用开发与 Markdown 编辑器实现思路。MdHub 是什么✨MdHub 是tauri-tutorial项目应用名为 OhMyBox内置的工具之一在仪表盘中通过/tools/mdhub路由即可进入。它的核心能力很简单左侧使用Monaco EditorVS Code 同款编辑器内核提供 Markdown 源码编辑右侧实时渲染 Markdown 预览语法高亮开箱即用支持一键切换预览开关、导出 PDF预留入口整套界面运行在 Tauri 桌面包壳中体验与原生应用无差异核心技术栈一览 MdHub 用到的核心依赖都定义在项目的package.json中这里整理成一张表方便你快速把握依赖作用monaco-editor/reactReact 版 Monaco Editor负责代码编辑体验markdown-it把 Markdown 文本解析为 HTMLhighlight.js代码块语法高亮github-markdown-cssGitHub 风格的 Markdown 预览样式allotment可拖拽调整宽度的分栏布局tauri-apps/api调用 Tauri 的桌面能力文件系统、弹窗等从入口看实现路由与视图 ️MdHub 的页面入口定义在src/routes.tsx中路由路径为/tools/mdhub对应组件位于src/views/mdhub/index.tsx。页面整体结构很清晰FullScreen taskbar{...} Editor langmarkdown onChange{handleEditor} preview{...} / /FullScreenFullScreen是项目通用的全屏布局组件src/layouts/FullSreen.tsx顶部任务栏放置了返回按钮、预览开关和 PDF 导出图标符合 Tauri 桌面应用的操作习惯。编辑器核心Monaco Editor 集成 编辑体验由通用组件src/components/Editor/index.tsx提供它接收lang、defaultValue、onChange、preview四个 props内部通过Allotment实现左右分栏左栏渲染MonacoEditor传入defaultLanguage与内容回调右栏仅在传入preview时才渲染实现编辑 实时预览双栏效果面板最小宽度设为 100px用户可以自由拖拽调节比例这样的组件设计让 Editor 不只服务于 Markdown任何语言如 JSON、Rust都能复用体现了工具集项目的通用性。实时预览markdown-it 的魔法 预览渲染的关键在src/utils/mdParser.ts这里封装了一个全局可复用的 markdown-it 实例export const mdParser MarkdownIt({ html: true, highlight: (str, lang) { /* hljs 高亮逻辑 */ }, });几个值得注意的细节开启html: true允许 Markdown 中嵌入 HTML 片段对json5语言做了兼容处理自动映射为js高亮高亮结果包装为omb-code-wrap/omb-code-container类便于在src/views/mdhub/index.scss中定制深色代码块样式在 MdHub 视图中编辑器每次输入都会触发handleEditor把mdParser.render(content)的结果交给预览区通过dangerouslySetInnerHTML注入到markdown-body容器里再套用github-markdown-css呈现出的效果和 GitHub 阅读体验几乎一致。手动体验本地运行指南 如果你想把项目跑起来亲手体验 MdHub可以 clone 仓库到本地git clone https://gitcode.com/gh_mirrors/ta/tauri-tutorial按照README.md的说明需要先安装 Rust、Node.js、wasm-pack 和 rsw。启动时必须开两个终端窗口顺序不能乱# 终端一先启动 Rust wasm 监听不要关闭 yarn rsw watch # 终端二再启动 Tauri 开发模式 yarn tauri dev应用启动后在仪表盘工具区点击 MdHub 图标就能看到我们文章里介绍的 Markdown 编辑器了。扩展思路把 MdHub 变得更强大 学会了核心实现你还可以沿着这个方向继续扩展文件读写结合src/system/fs.ts中封装的readTextFile/writeFile方法为 MdHub 接入打开、保存 Markdown 文件的能力多语言支持项目已集成 i18next 多语言体系locales/目录可以为新功能同步补充中英文文案自定义主题Monaco Editor 支持切换主题可以让编辑器适配深浅色模式导出 PDF任务栏已预留 PDF 入口可以调用 Tauri 的能力实现文档导出写在最后 通过 MdHub 这个例子我们完整看到了Monaco Editor markdown-it这套组合如何在 Tauri 跨端应用中被组织起来通用 Editor 组件负责编辑、mdParser负责解析、github-markdown-css 负责观感各司其职又高度解耦。对于想入门Tauri 桌面应用开发或想实现 Markdown 编辑器的同学来说这份代码就是一份开箱即用的优质样板。跟着tauri-tutorial系列教程动手敲一遍你会发现用 Web 技术打造跨端应用比想象中更简单。【免费下载链接】tauri-tutorial Tauri Tutorial (系列教程 - 打造属于自己的跨端应用)项目地址: https://gitcode.com/gh_mirrors/ta/tauri-tutorial创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考