Add documentation for using Milkdown with various frameworks

- Created a new document for using components in Milkdown. - Added a guide for using plugins in Milkdown, including toggling plugins programmatically and listing official plugins. - Introduced a recipe for integrating Milkdown with Angular, including installation steps and component creation. - Added a recipe for using Milkdown with Next.js, detailing installation and component setup. - Created a guide for integrating Milkdown with NuxtJS, including installation and component creation. - Added a comprehensive guide for using Milkdown with React, covering both Crepe and core Milkdown usage. - Introduced a recipe for SolidJS integration with Milkdown, including installation and component creation. - Added a guide for using Milkdown with Svelte, detailing installation and component setup. - Created a comprehensive guide for integrating Milkdown with Vue, covering both Crepe and core Milkdown usage. - Added a recipe for using Milkdown with Vue2, including installation and component creation.
2026-01-17 14:18:08 +08:00
parent 4de3dfdd8d
commit d9ab341223
381 changed files with 125356 additions and 0 deletions
@@ -0,0 +1,90 @@
+# Milkdown
+
+👋 Welcome to Milkdown. We are so glad to see you here!
+
+💭 You may wonder, what is Milkdown? Please write something here.
+
+> ⚠️ **Not the right side!**
+>
+> Please try something on the left side.
+
+![1.00](/polar.jpeg "Hello by a polar bear")
+
+You're seeing this editor called **🥞Crepe**, which is an editor built on top of Milkdown.
+
+If you want to install this editor, you can run `npm install @milkdown/crepe`. Then you can use it like this:
+
+```js
+import { Crepe } from "@milkdown/crepe";
+import "@milkdown/crepe/theme/common/style.css";
+// We have some themes for you to choose, ex.
+import "@milkdown/crepe/theme/frame.css";
+
+// Or you can create your own theme
+import "./your-theme.css";
+
+const crepe = new Crepe({
+  root: "#app",
+  defaultValue: "# Hello, Milkdown!",
+});
+
+crepe.create().then(() => {
+  console.log("Milkdown is ready!");
+});
+
+// Before unmount
+crepe.destroy();
+```
+
+---
+
+## Structure
+
+> 🍼 [Milkdown][repo] is a WYSIWYG markdown editor framework.
+>
+> Which means you can build your own markdown editor with Milkdown.
+
+In the real world, a typical milkdown editor is built on top of 3 layers:
+
+- [x] 🥛 Core: The core of Milkdown, which provides the plugin loading system with the editor concepts.
+- [x] 🧇 Plugins: A set of plugins that can be used to extend the functionalities of the editor.
+- [x] 🍮 Components: Some headless components that can be used to build your own editor.
+
+At the start, you may find it hard to understand all these concepts.
+But don't worry, we have this `@milkdown/crepe` editor for you to get started quickly.
+
+---
+
+## You can do more with Milkdown
+
+In Milkdown, you can extend the editor in many ways:
+
+| Feature      | Description                                          | Example                   |
+| ------------ | ---------------------------------------------------- | ------------------------- |
+| 🎨 Theme     | Create your own theme with CSS                       | Nord, Dracula             |
+| 🧩 Plugin    | Create your own plugin to extend the editor          | Search, Collab            |
+| 📦 Component | Create your own component to build your own editor   | Slash Menu, Toolbar       |
+| 📚 Syntax    | Create your own syntax to extend the markdown parser | Image with Caption, LaTex |
+
+We have provided a lot of plugins and components, with an out-of-the-box crepe editor for you to use and learn.
+
+---
+
+## Open Source
+
+- Milkdown is an open-source project under the MIT license.
+- Everyone is welcome to contribute to the project, and you can use it in your own project for free.
+- Please let me know what you are building with Milkdown, I would be so glad to see that!
+
+Maintaining Milkdown is a lot of work, and we are working on it in our spare time.
+If you like Milkdown, please consider supporting us by [sponsoring][sponsor] the project.
+We'll be so grateful for your support.
+
+## Who built Milkdown?
+
+Milkdown is built by [Mirone][mirone] and designed by [Meo][meo].
+
+[repo]: https://github.com/Milkdown/milkdown
+[mirone]: https://github.com/Saul-Mirone
+[meo]: https://meo.cool
+[sponsor]: https://github.com/sponsors/Saul-Mirone