import {
Component,
splitProps,
JSX,
createEffect,
createSignal,
} from "solid-js";
import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkBreaks from "remark-breaks";
import remarkRehype from "remark-rehype";
import rehypeStringify from "rehype-stringify";
import remarkGfm from "remark-gfm";
import HelpIcon from "~icons/carbon/help";
export const markdownHelpUrl =
"https://drdanielappel.de/tipps-tools/markdown-eine-einfach-zu-erlernende-auszeichnungssprache/#cmtoc_anchor_id_0";
export const MarkdownHelpLabel: Component = () => (
Markdown
);
const Markdown: Component<
{ value: string } & JSX.HTMLAttributes
> = (p) => {
const [props, rest] = splitProps(p, ["value", "class"]);
const [html, setHtml] = createSignal("");
createEffect(function () {
const markdown = props.value;
(async () => {
const result = await unified()
.use(remarkParse)
.use(remarkGfm)
.use(remarkBreaks)
.use(remarkRehype)
.use(rehypeStringify)
.process(markdown);
setHtml(String(result));
})();
});
return (
);
};
export default Markdown;