# Milkdown 入门

Milkdown 是一款功能强大的所见即所得 Markdown 编辑器，它将 Markdown 的简洁性与现代编辑器的灵活性融为一体。它设计轻量且可扩展，完美满足简单和复杂的编辑需求。

## 快速入门

最快的入门方法是使用 `@milkdown/crepe`：

```bash
npm install @milkdown/crepe
```

```typescript
import { Crepe } from "@milkdown/crepe";
import "@milkdown/crepe/theme/common/style.css";
import "@milkdown/crepe/theme/frame.css";

const crepe = new Crepe({
  root: "#app",
  defaultValue: "Hello, Milkdown!",
});

crepe.create();
```

## 核心概念

Milkdown 主要由两部分组成：


1. **Core Package** (`@milkdown/core`)
   - Plugin loader
   - Internal plugins



2. **其他插件**

   * 语法支持

   * 命令

   * UI 组件

   * 自定义功能

这种模块化架构允许您根据需要启用或禁用各种功能，从基本的 Markdown 支持到表格、LaTeX 公式和协作编辑等高级功能。

## 主要功能


- 📝 **WYSIWYG Markdown** - Write markdown in an elegant way
- 🎨 **Themable** - Create your own theme and publish it as an npm package
- 🎮 **Hackable** - Create your own plugin to support your awesome idea
- 🦾 **Reliable** - Built on top of [prosemirror](https://prosemirror.net/) and [remark](https://github.com/remarkjs/remark)
- ⚡ **Slash & Tooltip** - Write faster than ever, enabled by a plugin
- 🧮 **Math** - LaTeX math equations support via math plugin
- 📊 **Table** - Table support with fluent ui, via table plugin
- 🍻 **Collaborate** - Shared editing support with [yjs](https://docs.yjs.dev/)
- 💾 **Clipboard** - Support copy and paste markdown, via clipboard plugin
- 👍 **Emoji** - Support emoji shortcut and picker, via emoji plugin



## 技术栈

Milkdown 基于以下强大的库构建：


- [Prosemirror](https://prosemirror.net/) - A toolkit for building rich-text editors on the web
- [Remark](https://github.com/remarkjs/remark) - Markdown parser done right
- [TypeScript](https://ts.nodejs.cn/) - For type safety and better developer experience



## 创建您的第一个编辑器

Milkdown 提供两种不同的编辑器创建方法，每种方法都适用于不同的需求：

### 1. 🍼 使用 `@milkdown/kit`（从头构建）

这种方法让您可以完全控制您的编辑器。如果您需要以下情况，请使用此选项：


- Build a custom editor from the ground up
- Have full control over which features to include
- Create a highly customized editing experience
- Integrate with specific frameworks or requirements



首先，安装所需的软件包：

```bash
npm install @milkdown/kit
```

使用通用 Markdown 语法创建一个基本编辑器：

```typescript
import { Editor } from "@milkdown/kit/core";
import { commonmark } from "@milkdown/kit/preset/commonmark";
// This is the must have css for prosemirror
import "@milkdown/kit/prose/view/style/prosemirror.css";

Editor.make().use(commonmark).create();
```

添加撤消和重做支持：

```typescript
import { Editor } from "@milkdown/kit/core";
import { history } from "@milkdown/kit/plugin/history";
import { commonmark } from "@milkdown/kit/preset/commonmark";
import { nord } from "@milkdown/theme-nord";
import "@milkdown/theme-nord/style.css";

const milkdown = Editor.make()
  .config(nord)
  .use(commonmark)
  .use(history)
  .create()
  .then(() => {
    console.log("Editor created");
  });

// To destroy the editor
milkdown.destroy();
```

> 注意：`<Mod>` 在 macOS 平台上是 `<Cmd>`，在其他平台上是 `<Ctrl>`。

### 2. 🥞 使用 `@milkdown/crepe`（即用型）

这是开始使用功能齐全的编辑器的最快方法。如果您需要以下情况，请使用此选项：


- Get up and running quickly
- Have a well-designed editor out of the box
- Focus on content rather than configuration
- Have a production-ready solution with minimal setup



```bash
npm install @milkdown/crepe
```

```typescript
import { Crepe } from "@milkdown/crepe";
import "@milkdown/crepe/theme/common/style.css";
/**

 * Available themes:

 * frame, classic, nord

 * frame-dark, classic-dark, nord-dark
 */
import "@milkdown/crepe/theme/frame.css";

const crepe = new Crepe({
  root: "#app",
  defaultValue: "Hello, Milkdown!",
});

crepe.create().then(() => {
  console.log("Editor created");
});

// To destroy the editor
crepe.destroy();
```

## 后续步骤


- Learn more about [overview](/guide/architecture-overview)
- Explore [available plugins](/plugins/using-plugins)
- Check out [theming](/guide/theming)



> 🍼 有趣的事实：此文档由 Milkdown 本身呈现！
