Utility function for markdown.

[hastebrot]

Similar to jsx() there could be a function mdx() which transforms a markdown or mdx string into html.

[hastebrot]

Simple example how to transform markdown to html.

// deno run --no-check markdown.ts

import { VFile, type VFileCompatible } from "https://esm.sh/[email protected]";
import type { Plugin } from "https://esm.sh/[email protected]";
import type { Node as UnistNode } from "https://esm.sh/@types/[email protected]";
import type { Root as MdastRoot } from "https://esm.sh/@types/[email protected]";
import type { Root as HastRoot } from "https://esm.sh/@types/[email protected]";

// md processor.
import { unified } from "https://esm.sh/[email protected]";
import rehypeSanitize from "https://esm.sh/[email protected]";
import rehypeStringify from "https://esm.sh/[email protected]";
import remarkFrontmatter from "https://esm.sh/[email protected]";
import remarkGfm from "https://esm.sh/[email protected]";
import remarkParse from "https://esm.sh/[email protected]";
import remarkRehype from "https://esm.sh/[email protected]";

// mdx compiler.
import { compile } from "https://esm.sh/@mdx-js/[email protected]";
import { remarkMdxFrontmatter } from "https://esm.sh/[email protected]";

if (import.meta.main) {
  const printFile = (file: VFile) => {
    console.log("file:", file);
    return file;
  };
  const printNode = <T extends UnistNode | MdastRoot | HastRoot>(node: T) => {
    console.log("node:", node);
    return node;
  };

  const processor = unified()
    .use(remarkParse)
    .use(remarkFrontmatter)
    .use(() => printNode)
    .use(remarkGfm)
    .use(remarkRehype)
    .use(rehypeSanitize)
    .use(rehypeStringify)
    .freeze();

  printFile(
    await processor.process(
      new VFile({
        path: "~/example.md",
        value: "Alpha **bravo** charlie.",
      }),
    ),
  );

  const compiler = {
    compile(doc: VFileCompatible): Promise<VFile> {
      return compile(doc, {
        format: "mdx",
        outputFormat: "program",
        jsx: true,
        jsxRuntime: "classic",
        pragma: "React.createElement",
        pragmaFrag: "React.Fragment",
        rehypePlugins: [],
        remarkPlugins: [
          remarkFrontmatter,
          [remarkMdxFrontmatter as Plugin, { name: "attributes" }],
          () => printNode,
        ],
      });
    },
  };

  printFile(
    await compiler.compile(
      new VFile({
        path: "~/example.mdx",
        value: "Alpha **bravo** charlie.",
      }),
    ),
  );
}

There is quite an ecosystem behind the mdx compiler suite:

• https://github.com/mdx-js/mdx uses remark, rehype, vfile, ...
• https://github.com/micromark/micromark
• https://github.com/remarkjs
• https://github.com/unifiedjs