Markdown in Next.js 📄

Best and easiest way to render markdown content in Next.js!

Steps for basic markdown rendering

Step 1: Install the @tailwindcss/typography

yarn add @tailwindcss/typography

Step 2: Use @tailwindcss/typography in tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [ ... ],
  theme: { ... },
  plugins: [..., require("@tailwindcss/typography")],
};

Step 3: Install the react-markdown library

yarn add react-markdown

Step 4: Import the component

npmjs.com/react-markdown

import ReactMarkdown from "react-markdown";

function App() {
  return (
    <section className="prose">
       <ReactMarkdown>{content}</ReactMarkdown>
    </section>
  );
}

Steps for getting the syntax highlighting

Step 1: Install PrismJS

yarn add prismjs
yarn add -D @types/prismjs

Step 2: Inside components folder make a file and name it: "prism-loader.tsx"

Inside the folder paste this code for typescript

"use client"; // ! imporant

import React, { useEffect } from "react";
import Prism from "prismjs";

// language imports
import "prismjs/components/prism-typescript";
import "prismjs/components/prism-csharp";

// default theme import
import "prismjs/themes/prism-okaidia.css";

export default function PrismLoader() {
	useEffect(() => {
		Prism.highlightAll();
	}, []);

	return <div className="hidden"></div>;
}

If you need other languages you can just replace the "typescript" in the import with the language of your choice!

Step 3: Changing the theme

• If you don't like the default theme you can pick from one of these

• Or you can make a theme.css file and paste css code from one of the links in it

• After that you can just import the theme.css file into the prism-loader.tsx

Step 4: Import the <PrismLoader/> component you just made into any page that needs syntax highlighting

import PrismLoader from "@/components/prism-loader";

export default function App() {
	return (
		<section>
			// rest of your code
			<PrismLoader />
		</section>
	);
}

That's it! You should have working syntax highlighting now!