bitburner-src/src/ui/MD/MD.tsx

import React from "react";
import ReactMarkdown from "react-markdown";
import { TableHead } from "@mui/material";
import remarkGfm from "remark-gfm";
import { h1, h2, h3, h4, h5, h6, li, Td, Th, table, tr, Blockquote, p } from "./components";
import { code, Pre } from "./code";
import { A } from "./a";
import remarkMath from "remark-math";
import rehypeMathjax from "rehype-mathjax/svg";
import rehypeRaw from "rehype-raw";
import { FilePath } from "../../Paths/FilePath";
import { getPage } from "../../Documentation/root";
import { DocImages } from "../../Documentation/pages";

export function MD({ pageFilePath }: { pageFilePath: FilePath }): React.ReactElement {
  const pageContent = getPage(pageFilePath);

  return (
    <ReactMarkdown
      components={{
        h1: h1,
        h2: h2,
        h3: h3,
        h4: h4,
        h5: h5,
        h6: h6,
        pre: Pre,
        p: p,
        code: code,
        li: li,

        th: Th,
        td: Td,
        table: table,
        thead: TableHead,
        tr: tr,
        blockquote: Blockquote,
        a: A,
      }}
      remarkPlugins={[remarkGfm, remarkMath]}
      // Use rehypeRaw to support HTML content in NS API docs.
      rehypePlugins={[rehypeMathjax, rehypeRaw]}
      transformImageUri={(__src, alt) => {
        return DocImages[alt];
      }}
    >
      {pageContent}
    </ReactMarkdown>
  );
}