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 Editor（VS Code 同款编辑器内核）提供 Markdown 源码编辑
• 右侧实时渲染 Markdown 预览，语法高亮开箱即用
• 支持一键切换预览开关、导出 PDF（预留入口）
• 整套界面运行在 Tauri 桌面包壳中，体验与原生应用无差异

核心技术栈一览 📦

MdHub 用到的核心依赖都定义在项目的package.json中，这里整理成一张表方便你快速把握：

从入口看实现：路由与视图 🗺️

MdHub 的页面入口定义在src/routes.tsx中，路由路径为/tools/mdhub，对应组件位于src/views/mdhub/index.tsx。页面整体结构很清晰：

<FullScreen taskbar={...}> <Editor lang="markdown" onChange={handleEditor} preview={...} /> </FullScreen>

FullScreen是项目通用的全屏布局组件（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 变得更强大 💡

学会了核心实现，你还可以沿着这个方向继续扩展：

1. 文件读写：结合src/system/fs.ts中封装的readTextFile/writeFile方法，为 MdHub 接入打开、保存 Markdown 文件的能力
2. 多语言支持：项目已集成 i18next 多语言体系（locales/目录），可以为新功能同步补充中英文文案
3. 自定义主题：Monaco Editor 支持切换主题，可以让编辑器适配深浅色模式
4. 导出 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