You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
1.9 KiB
TypeScript
75 lines
1.9 KiB
TypeScript
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 rehypeSlug from "rehype-slug";
|
|
import remarkToc from "remark-toc";
|
|
import remarkCustomHeadingId from "remark-heading-id";
|
|
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 = () => (
|
|
<a
|
|
class="link flex items-center text-xs gap-1"
|
|
rel="noopener"
|
|
target="_blank"
|
|
href={markdownHelpUrl}
|
|
>
|
|
Markdown
|
|
<HelpIcon />
|
|
</a>
|
|
);
|
|
|
|
const Markdown: Component<
|
|
{ value: string } & JSX.HTMLAttributes<HTMLDivElement>
|
|
> = (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(remarkCustomHeadingId)
|
|
.use(remarkToc, {
|
|
maxDepth: 3,
|
|
tight: true,
|
|
ordered: true,
|
|
heading: "inhalt|inhaltsverzeichnis|toc|table[ -]of[ -]contents?",
|
|
})
|
|
.use(remarkRehype)
|
|
.use(rehypeSlug)
|
|
.use(rehypeStringify)
|
|
.process(markdown);
|
|
setHtml(String(result));
|
|
})();
|
|
});
|
|
|
|
return (
|
|
<div
|
|
class={
|
|
"text-base-content leading-snug break-words hyphenate max-w-none prose whitespace-normal " +
|
|
(props.class || "")
|
|
}
|
|
innerHTML={html()}
|
|
{...rest}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default Markdown;
|