Simple Markdown Rendering in React

Check out this simple tutorial on how to create a Markdown page using a server component in React. Using Next.js 14 here. See the app deployed here.

Assuming you have a Next.js project created, install react-markdown for parsing Markdown content.

bash

npm install react-markdown

Create a React Server Component:

Inside the app directory, create a new page.tsx

jsx

import ReactMarkdown from "react-markdown";

// Define CSS styles as a constant
const styles = `
  /* Add your CSS styles here */
  h1 {
    font-size: 32px;
    font-weight: bold;
  }
  h2 {
    font-size: 24px;
    font-weight: bold;
  }
  p {
    font-size: 18px;
  }
  ul {
    list-style-type: square;
    margin-left: 20px;
  }
  li:hover {
    color: orange; /* Change color on hover */
    cursor: pointer; /* Optional: Change cursor to pointer on hover */
  }
`;

const content = `## My Markdown Content

This is some **bold** text.

- List item 1
- List item 2
- List item 3
`;

export default function MarkdownPage() {
  return (
    <div>
      {/* Use the styles constant */}
      <style>{styles}</style>
      <h1>My Markdown Blog</h1>
      <ReactMarkdown>{content}</ReactMarkdown>
    </div>
  );
}

Start the Development Server: Run the following command in your terminal to start the Next.js development server:

bash

npm run dev

That's it! You've created a Markdown page using a React server component in Next.js. You can modify the content variable with your Markdown content and customize the CSS styles as needed.