# MarkdownX

**Repository Path**: super825/markdown-x

## Basic Information

- **Project Name**: MarkdownX
- **Description**: MarkdownX - 极简所见即所得 Markdown 编辑器
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-08
- **Last Updated**: 2026-01-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MarkdownX - 极简所见即所得 Markdown 编辑器

一个基于 Web 的桌面级 Markdown 编辑器，提供极致的"所见即所得"(WYSIWYG)写作体验。

## 功能特性

### 核心功能

- **实时双向同步渲染**：毫秒级实时渲染，左侧编辑，右侧即时预览
- **无干扰编辑模式**：极简界面，专注于内容创作
- **滚动同步**：编辑区和预览区滚动条智能联动
- **主题切换**：支持亮色和暗黑两种主题

### Markdown 支持

- **标题**：H1-H6 完整支持
- **文本样式**：粗体、斜体、删除线
- **列表**：无序和有序列表，支持嵌套
- **引用**：优雅的区块引用样式
- **代码**：行内代码和代码块，支持语法高亮
- **链接与图片**：完整的链接和图片支持，图片可调整大小
- **分割线**：美观的水平分割线

### 高级功能

- **数学公式**：支持 LaTeX 语法（行内 `$...$` 和块级 `$$...$$`），使用 KaTeX 渲染
- **流程图/图表**：支持 Mermaid 语法，可直接渲染流程图、时序图等
- **大纲视图**：自动生成文档目录，支持点击跳转
- **代码高亮**：使用 highlight.js 支持多种编程语言

## 技术栈

- **前端框架**：React 18+ with TypeScript
- **构建工具**：Vite
- **编辑器**：CodeMirror 6
- **Markdown 解析**：marked.js
- **数学公式**：KaTeX
- **图表**：Mermaid
- **代码高亮**：highlight.js
- **安全**：DOMPurify

## 安装和运行

### 前置要求

- Node.js 16+ 
- npm / pnpm / yarn

### 安装依赖

```bash
# 使用 npm
npm install

# 或使用 pnpm
pnpm install

# 或使用 yarn
yarn install
```

### 启动开发服务器

```bash
# 使用 npm
npm run dev

# 或使用 pnpm
pnpm run dev

# 或使用 yarn
yarn dev
```

开发服务器将在 `http://localhost:3000` 启动。

### 构建生产版本

```bash
# 使用 npm
npm run build

# 或使用 pnpm
pnpm run build

# 或使用 yarn
yarn build
```

构建产物将输出到 `dist` 目录。

### 预览生产版本

```bash
# 使用 npm
npm run preview

# 或使用 pnpm
pnpm run preview

# 或使用 yarn
yarn preview
```

## 项目结构

```
markdownX/
├── src/
│   ├── components/
│   │   ├── Editor/          # 源码编辑区组件
│   │   ├── Preview/         # 实时预览区组件
│   │   ├── Toolbar/         # 工具栏组件
│   │   └── Outline/         # 大纲视图组件
│   ├── App.tsx              # 主应用组件
│   ├── App.css              # 主应用样式
│   ├── main.tsx             # 应用入口
│   └── index.css            # 全局样式
├── index.html               # HTML 入口文件
├── package.json             # 项目配置和依赖
├── tsconfig.json            # TypeScript 配置
├── vite.config.ts           # Vite 配置
└── README.md                # 项目文档
```

## 使用说明

### 基本操作

1. **编辑 Markdown**：在左侧编辑区输入 Markdown 语法
2. **实时预览**：右侧预览区会实时显示渲染结果
3. **切换主题**：点击工具栏右侧的主题切换按钮
4. **查看大纲**：点击工具栏左侧的大纲按钮，显示文档目录
5. **滚动同步**：编辑区和预览区的滚动会自动同步

### Markdown 语法示例

#### 标题

```markdown
# 一级标题
## 二级标题
### 三级标题
```

#### 文本样式

```markdown
**粗体**
*斜体*
~~删除线~~
```

#### 列表

```markdown
- 无序列表项 1
- 无序列表项 2
  - 嵌套项

1. 有序列表项 1
2. 有序列表项 2
```

#### 引用

```markdown
> 这是一段引用文本
```

#### 代码

```markdown
行内代码：`console.log("Hello")`

代码块：
\`\`\`javascript
function hello() {
  console.log("Hello World");
}
\`\`\`
```

#### 数学公式

```markdown
行内公式：$E = mc^2$

块级公式：
$$
\\int_{-\\infty}^{\\infty} e^{-x^2} dx = \\sqrt{\\pi}
$$
```

#### 流程图

```markdown
\`\`\`mermaid
graph TD
    A[开始] --> B[处理]
    B --> C{判断}
    C -->|是| D[结束]
    C -->|否| B
\`\`\`
```

## 界面设计

### 布局

- **左侧 (50%)**：源码编辑区，使用等宽字体
- **右侧 (50%)**：实时预览区，模拟纸张阅读感
- **顶部**：极简工具栏，包含主题切换和大纲按钮

### 主题

- **默认主题**：浅色背景，深色文字，护眼模式
- **暗黑主题**：深灰背景，浅灰文字，适合夜间使用

### 排版

- 行高：1.8 - 2.0
- 字间距：适当调整，提升阅读体验
- 段间距：清晰的段落间距

## 开发说明

### 添加新功能

1. 在 `src/components/` 下创建新组件
2. 在 `App.tsx` 中引入和使用组件
3. 在对应的 `.css` 文件中添加样式

### 自定义样式

所有样式使用 CSS 变量定义，可以在 `App.css` 中修改：

```css
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f9f9f9;
  --text-primary: #333333;
  --accent-color: #007bff;
  /* ... 更多变量 */
}
```

## 许可证

MIT License

## 贡献

欢迎提交 Issue 和 Pull Request！

## 联系方式

如有问题或建议，请通过 Issue 联系。