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;