ydy0615
d9ab341223
- 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.
1.1 KiB
1.1 KiB
Svelte
We don't provide Svelte support out of box, but you can use the vanilla version with it easily.
Install the Dependencies
# install with npm
npm install @milkdown/kit
npm install @milkdown/theme-nord
Creating a Component
Creating a component is pretty easy.
<script>
import { Editor, rootCtx, defaultValueCtx } from "@milkdown/kit/core";
import { commonmark } from "@milkdown/kit/preset/commonmark";
import { nord } from "@milkdown/theme-nord";
function editor(dom) {
// to obtain the editor instance we need to store a reference of the editor.
const MakeEditor = Editor.make()
.config((ctx) => {
ctx.set(rootCtx, dom);
})
.config(nord)
.use(commonmark)
.create();
MakeEditor.then((editor) => {
// here you have access to the editor instance.
// const exampleContent = "# Hello World!";
// editor.action(replaceAll(exampleContent));
});
}
</script>
<div use:editor />
Online Demo
::iframe{src="https://stackblitz.com/github/Milkdown/examples/tree/main/svelte-commonmark"}