DurableObject markdown

A HTMX extension that adds markdown rendering to elements. Add a data-markdown attribute selector that points to an element to pull the markdown content from. An example of how to use this can be found at /llm.

Show Code

htmx.onLoad(async (content: Element) => {
  const markdownTargets = content.querySelectorAll("[data-markdown]");

  let markdown: any;
  if (markdownTargets.length > 0) {
    // @ts-expect-error - no types
    const { default: Markdown } = await import("md2dom");
    markdown = new Markdown();
  }
  for (const target of markdownTargets) {
    const sourceSelector = target.getAttribute("data-markdown");
    if (!sourceSelector) continue;
    const [source] = querySelectorAllExt(target as HTMLElement, sourceSelector);
    if (!source) continue;

    const observer = new MutationObserver(() => {
      target.replaceChildren(
        ...markdown.parse((source as HTMLElement).textContent),
      );
    });
    observer.observe(source as Element, {
      childList: true,
      subtree: true,
    });
  }
});