shadcn-markdown

Beautiful, themeable Markdown renderer built with ShadCN UI, React Markdown, and TailwindCSS. Supports math expressions, syntax-highlighted code blocks, Mermaid diagrams, emoji, and rich Unicode text rendering — all wrapped in a customizable component.

---

📚 Table of Contents

• ✨ Features
• 🚀 Getting Started
• 📦 Installation
• 🧪 Usage
• ⚙️ Props Reference
• 🎨 Themes
• 🧩 Customization
• 🧑‍💻 Example Output
• 🛠️ Built With

---

✨ [Features]

• 🖋️ Renders GitHub-flavored markdown (GFM)
• 🎨 Styled using TailwindCSS + ShadCN UI
• 💻 Syntax highlighting with Prism themes
• 🔢 Line numbers toggle for code blocks
• 🧠 Smart code formatting (e.g., JSON prettifying)
• 📐 Supports LaTeX-style math using remark-math
• 🖼️ Mermaid diagram rendering (flowcharts, graphs)
• 🌐 Unicode normalization and emoji rendering
• 🔗 Smart link behavior (external, download, internal)
• 📱 Fully responsive and easily embeddable

---

🚀 [Getting Started]

This renderer is built as a reusable React component. You can use it in any React/Next.js project to display styled, interactive Markdown content.

---

📦 [Installation]

Install the required dependencies:

# Use package manager of your choice

pnpm add react-markdown remark-gfm rehype-highlight remark-math remark-emoji rehype-raw rehype-slug shadcn-ui react-syntax-highlighter

# Use package manager of your choice

pnpm add -D @tailwindcss/typography

If you're using TailwindCSS and ShadCN UI, ensure you have the appropriate theme configuration.

---

🧪 [Usage]

Here’s a simple usage example:

/* Add this class in your index.css */

.markdown {
    @apply p-2 prose-sm prose-img:rounded-lg prose-a:text-link prose-a:underline prose-a:underline-offset-4 prose-ul:list-disc prose-ol:list-decimal prose-h1:text-xl prose-h1:font-bold prose-h2:text-lg prose-h2:font-semibold cursor-text break-all text-wrap;
}

// Add this in tailwind.config.js or tailwind.config.ts

{
  ...
  plugins: [require("@tailwindcss/typography")],
}

import MarkdownRenderer from "shadcn-markdown";

const markdown = `
# Hello World

This is **bold**, this is _italic_.

\`\`\`js
const hello = "world";
console.log(hello);
\`\`\`

> Quote block with style

[Link to OpenAI](https://openai.com)

- Emoji: :rocket:
- Math: $\\sum_{i=1}^n i^2$

\`\`\`mermaid
graph TD
  A[Start] --> B{Condition}
  B -->|Yes| C[Step 1]
  B -->|No| D[Step 2]
\`\`\`
`;

export default function Page() {
  return (
    <MarkdownRenderer
      content={markdown}
      config={{
        codeTheme: "monokai",
        linkTarget: "_blank",
        showLineNumbers: true,
      }}
      enableEmoji={true}
      enableMath={true}
      enableMermaid={true}
    />
  );
}

---

⚙️ [Props Reference]

Prop	Type	Description	Default
content	string	Markdown content to render	—
config	object (see below)	Style and behavior configuration	—
onLinkClick	function(url, event)	Handler when links are clicked	Logs to console
onDownloadClick	function(url, filename)	Handler for downloadable links	Logs to console
enableMermaid	boolean	Enable Mermaid diagram support	false
enableMath	boolean	Enable LaTeX-style math rendering	true
enableEmoji	boolean	Enable emoji rendering from :shortcode:	true
maxWidth	string	Max width for rendered markdown container	100%
className	string	Custom classes to apply	—

🔧 [config object]

Key	Type	Description	Default
codeTheme	string	Theme for code blocks: "light", "dark", "github", "monokai"	dark
mathTheme	string	Math rendering theme: "default", "colorful"	colorful
linkTarget	string	Target attribute for links	_blank
showLineNumbers	boolean	Show line numbers in code blocks	false

---

🎨 [Themes]

Supported code block themes via react-syntax-highlighter:

• vscDarkPlus (default)
• vs (light)
• monokai

Math rendering is styled using built-in custom classes. Emoji rendering leverages remark-emoji with space padding enabled.

---

🧩 [Customization]

• Use TailwindCSS classes to style tables, blockquotes, paragraphs, and inline code
• Code blocks support "Copy" button and auto-formatting for JSON
• Links intelligently determine whether they’re internal, external, or downloadable

---

🧑‍💻 [Example Output]

Here’s a visual snapshot of what it renders:

---

🛠️ [Built With]

• React Markdown + remark/rehype plugins
• ShadCN UI + TailwindCSS
• PrismJS for code syntax highlighting
• Custom Mermaid SVG renderer
• Unicode and accessibility enhancements