React Markdown

It is very easy to use Content Collections with React Markdown. Just pass the content from your collected markdown files as children to the ReactMarkdown component.

import { allPosts } from "content-collections";
import Markdown from "react-markdown";

function Posts() {
  return (
    <main>
      <h1>Posts</h1>
      {allPosts.map((post) => (
        <article key={post._meta.path}>
          <h2>{post.title}</h2>
          <Markdown>{post.content}</Markdown>
        </article>
      ))}
    </main>
  );
}