simple-fs-server/components/MarkdownRenderer.tsx

import { marked } from "https://deno.land/x/marked@1.0.1/mod.ts";

export function MarkdownRenderer(props: { text: string | undefined }) {
  let text = props.text;
  if (text === undefined) {
    text = "";
  }
  let c = text;
  let meta = null;
  if (text.startsWith("---")) {
    const index = text.indexOf("\n---", 3);
    meta = text.slice(4, index);
    c = text.slice(index + 4, text.length);
  }
  return (
    <>
      {meta
        ? (
          <div>
            <h2>Meta</h2>
            <pre>{meta}</pre>
            <hr class="mt-2 mb-2"></hr>
          </div>
        )
        : <div></div>}
      <div
        class="markdown-body"
        dangerouslySetInnerHTML={{ __html: marked.parse(c) }}
      >
      </div>
    </>
  );
}

export default MarkdownRenderer;