MDX Notes - 跨平台 MDX 笔记与公众号排版编辑器

本文介绍 MDX Notes，一个功能强大的跨平台笔记软件和微信公众号排版编辑器。该项目使用 MDX 技术实现 Markdown 的增强排版功能，目前已获得 1.6k+ Stars，是开源社区中备受关注的工具型项目。

项目简介

MDX Notes 是由开发者 maqi1520 创建的开源项目，原项目名为 mdx-editor，现已迁移至 mdx-notes。该项目巧妙地结合了 Markdown 的简洁性和 JSX 的灵活性，解决了传统 Markdown 在微信公众号排版方面的不足。

截至目前，该项目在 GitHub 上已获得 1.6k+ Stars 和 187 Forks，采用 GPL-3.0 开源协议。

核心特性

Web 版本功能

• 一键复制到公众号：无缝对接微信公众号编辑器
• 自定义样式组件：支持生成二维码、代码差异高亮等
• 自动生成文章索引：快速构建文章目录结构
• 微信脚注支持：轻松创建专业的脚注格式
• 外链自动转换：将微信外部链接自动转为 span 元素
• 代码格式精准保持：确保代码块显示效果
• 文章分享功能：内置分享机制
• Markdown 文件下载：支持导出原始 Markdown
• PDF 导出：一键生成 PDF 文档

桌面端额外功能

基于 Tauri 构建的桌面版除了包含 Web 版所有功能外，还提供：

• 实时本地文件保存：自动保存编辑内容
• 本地文件目录管理：高效的文件组织
• HTML 导出功能：支持导出为 HTML 格式

技术栈

核心技术包括：

• Next.js - React 框架
• MDX - Markdown + JSX 混合语法
• Tauri - 跨平台桌面应用框架
• Tailwind CSS - 原子化 CSS 框架

安装指南

Web 版本开发

# 切换到 main 分支
git clone https://github.com/maqi1520/mdx-notes.git
cd mdx-notes
git checkout main

# 安装依赖
yarn

# 启动开发服务器
yarn dev

桌面版本开发

# 切换到 tauri-app 分支
git checkout tauri-app

# 安装依赖
yarn

# 启动桌面应用
yarn tauri dev

使用示例

基础 MDX 排版

---
title: 我的文章
description: 使用 MDX Notes 排版
---

## 介绍

这是一篇使用 MDX Notes 编辑的文章。

### 代码高亮示例

```javascript
function greet(name) {
  return `Hello, ${name}!`;
}

自定义组件

可以使用内置的组件来增强排版效果：

模板示例

MDX Notes 提供多种精美模板：

macOS 安装注意事项

由于 MDX Notes 未进行代码签名，在 macOS 上可能遇到安全提示：

"文件已损坏" 错误

# 信任开发者
sudo spctl --master-disable

# 允许 MDX Notes
xattr -cr /Applications/MDX\ Notes.app

无响应问题

如果上述命令无效，尝试：

xattr -c /Applications/MDX\ Notes.app/*

# 或
sudo xattr -d com.apple.quarantine /Applications/MDX\ Notes.app/

部署方式

项目支持通过 Vercel 平台一键部署：

项目灵感

Markdown 作为程序员喜爱的写作格式，在满足公众号排版需求方面存在不足。MDX 的出现弥补了这一缺陷。开发者在使用 MDX 编写博客的过程中，受到 mdxjs playground 的启发，思考是否能实现写作与排版的统一解决方案，于是诞生了 MDX Notes。

相关资源

• 官方网站: https://mdxnotes.com/
• GitHub 仓库: https://github.com/maqi1520/mdx-notes
• MDX Playground: https://mdxjs.com/playground/
• Tailwind Playground: https://play.tailwindcss.com/

总结

MDX Notes 是一个将 Markdown 简洁性与 JSX 灵活性完美结合的开源项目。无论是用于个人笔记管理，还是微信公众号文章排版，它都能提供专业级的编辑体验。跨平台支持和丰富的模板生态使其成为内容创作者的有力工具。