基于 Tauri， 我写了一个 Markdown 桌面 App

本文视频地址

前言

大家好，我是小马。

去年，我开发了一款微信排版编辑器 MDX Editor。它可以自定义组件、样式，生成二维码，代码 Diff 高亮，并支持导出 Markdown 和 PDF 等功能。然而，作为一个微信排版编辑器，它的受众面比较有限，并不适用于每个人。因此，我基于该编辑器开发了 MDX Editor 桌面版，它支持 Mac、Windows 和 Linux，并且非常轻量，整个应用的大小只有 7M。现在，MDX Editor 桌面版已经成为我的创作工具。如果你对它感兴趣，可以在文末获取。

演示

技术选型

开发 MDX Editor 桌面 App，我使用了如下核心技术栈:

• 
  
• 
  

  React (Next.js)

  
  
  
• 
  

  Tauri —— 构建跨平台桌面应用的开发框架

  
  
  
• 
  

  Tailwind CSS —— 原子类样式框架，支持深色皮肤

  
  
  
• 
  

  Ant Design v5 —— 使用"Tree"组件管理文档树

  
  
  

功能与实现

1. MDX 自定义组件

MDX 结合了 Markdown 和 JSX 的优点，它让你可以在 Markdown 文档中直接使用 React 组件，构建复杂的交互式文档。如果你熟悉 React，你可以在 "Config" 标签页中自定义你的组件；如果你不是一个程序员，你也可以基于现有模板进行创作。例如，模板中的 "Gallery" 组件实际上就是一个 "flex" 布局。

代码

function Gallery({children}) {

return <div className="flex gallery">


{children}

</div>


}

2. 深色皮肤

对于笔记软件来说，深色皮肤已经成为一个不可或缺的部分。MDX Editor 使用 Tailwind CSS 实现了深色皮肤。

3. 多主题

编辑器内置了 10+个文档主题和代码主题，你可以点击右上方的设置按钮进行切换。

4. 本地文件管理

桌面 App 还支持管理本地文件。你可以选择一个目录，或者将你的文档工作目录拖入编辑器，便能够实时地在编辑器中管理文档。

当我在开发这个功能之前，我曾担心自己不熟悉 Rust，无法完成这个功能。但是，熟悉了 Tauri 文档之后，我发现其实很简单。Tauri 提供了文件操作的 API，使得我们不需要编写 Rust 代码，只需要调用 Tauri API 就能完成文件管理。

import { readTextFile, BaseDirectory } from '@tauri-apps/api/fs';

// 读取路径为 `$APPCONFIG/app.conf` 的文本文件

const contents = await readTextFile('app.conf', { dir: BaseDirectory.AppConfig });

文档目录树采用了 Ant Design 的 Tree 组件实现，通过自定义样式使其与整体皮肤风格保持一致，这大大减少了编码工作量。

5. 文档格式化

在文档写作的过程中，格式往往会打断你的创作思路。虽然 Markdown 已经完全舍弃了格式操作，但有时你仍然需要注意中英文之间的空格、段落之间的空行等细节。MDX Editor 使用了 prettier 来格式化文档，只需按下 command+s 就能自动格式化文档。

最后

如果你对这个编辑器感兴趣，可以在 Github 下载桌面版体验。如果你对实现过程感兴趣，也可以直接查看源码。如果您有任何好的建议，可以在上面提出 Issues，或者关注微信公众号 "JS