Markdown inline in React - DAV-1000/react-material GitHub Wiki

Created: 8/1/2025 17:06
Updated: 8/1/2025 17:07
Exported: 8/14/2025 11:29
Link: https://chatgpt.com/c/688ce60d-d7f0-8001-83b8-ef310ea566e2

Prompt:

How to display markdown inline in a react app

Response:

To display Markdown inline in a React app (e.g. rendering a string like "This is *italic* and **bold**" as rich HTML inline), you need to:

✅ 1. Install a Markdown-to-HTML library

The most popular one is marked or remark.

npm install marked

✅ 2. Convert Markdown to HTML and render it safely

React doesn’t automatically render HTML from strings, so you’ll use dangerouslySetInnerHTML (use with caution).

Example using `marked`:

import React from 'react';
import { marked } from 'marked';

const MarkdownInline = ({ markdown }) => {
  const html = marked.parseInline(markdown);

  return (
    <span
      dangerouslySetInnerHTML={{ __html: html }}
    />
  );
};

export default MarkdownInline;

Usage:

<MarkdownInline markdown="This is *italic* and **bold** text." />

⚠️ Security Note

marked allows raw HTML in Markdown. If you're rendering user-generated content, consider using DOMPurify to sanitize it:

npm install dompurify

Then:

import DOMPurify from 'dompurify';

const safeHtml = DOMPurify.sanitize(marked.parseInline(markdown));

✅ 3. Alternative: Use `react-markdown` for safer rendering (block & inline)

npm install react-markdown

import ReactMarkdown from 'react-markdown';

<ReactMarkdown components={{ p: 'span' }}>
  {"This is *italic* and **bold** text."}
</ReactMarkdown>

This renders inline if wrapped in <span> or styled appropriately.

Let me know if you want support for GitHub-style emojis, code highlighting, etc.