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.
952 B
952 B
SolidJS
We don't provide SolidJS 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
Create a Component
Create a component is pretty easy.
import { defaultValueCtx, Editor, rootCtx } from "@milkdown/kit/core";
import { commonmark } from "@milkdown/kit/preset/commonmark";
import { nord } from "@milkdown/theme-nord";
import { onCleanup, onMount } from "solid-js";
const Milkdown = () => {
let ref;
let editor;
onMount(async () => {
editor = await Editor.make()
.config((ctx) => {
ctx.set(rootCtx, ref);
})
.config(nord)
.use(commonmark)
.create();
});
onCleanup(() => {
editor.destroy();
});
return <div ref={ref} />;
};
Online Demo
::iframe{src="https://stackblitz.com/github/Milkdown/examples/tree/main/solid-commonmark"}