diff --git a/src/components/Markdown.tsx b/src/components/Markdown.tsx
new file mode 100644
index 0000000..e08c2dd
--- /dev/null
+++ b/src/components/Markdown.tsx
@@ -0,0 +1,63 @@
+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";
+
+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;