Markdown: HTML inside code blocks and inline code isn't escaped

Open Beginner friendly
  • Is something wrong?
#3,814 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

@KishanKanejiya23 is already working on this.

Since Oct 28, 2026.

  • #3823 by @KishanKanejiya23 — open

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
88/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
markdown, react, typescript
Domain
frontend

Research direction

Start in markdown.tsx and find the code and codespan renderers; the issue reports that both insert text without escaping. Read the existing Markdown component tests and add a case for HTML in fenced code and inline code. Done means both render as escaped text, matching the expected output in the issue.

Written by the indexing model from the issue text.

Description

What versions are you using? (if relevant)

[email protected] (also on canary), [email protected], [email protected]

Describe the Bug

<Markdown> doesn't escape what's inside code blocks and inline code. If a fenced block or a code span contains HTML, the tags go into the email as real HTML, so a code sample showing <b>bold</b> comes out as bold text instead of the snippet.

The code and codespan renderers in markdown.tsx insert text as is, while marked's own renderers escape it.

What is affected (leave empty if unsure)

Markdown Component

Link to the code that reproduces this issue

The repro is short, so it's inline under To Reproduce. It only needs [email protected], [email protected] and [email protected].

To Reproduce

Save this as check.mjs and run it with node:

import { createElement as h } from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import { Markdown } from 'react-email';

const md = '```html\n<b>bold</b> & <i>x</i>\n```\n\nInline: `<br>`';
console.log(renderToStaticMarkup(h(Markdown, null, md)).replace(/ style="[^"]*"/g, ''));

With the inline styles stripped, the output contains <pre><code><b>bold</b> & <i>x</i> and <p>Inline: <code><br></code></p>.

Expected Behavior

The code gets escaped, the way marked's default renderer does it: &lt;b&gt;bold&lt;/b&gt; &amp; &lt;i&gt;x&lt;/i&gt; and <code>&lt;br&gt;</code>.

I'd like to send a PR for this with a test, if that's okay.

What's your node version? (if relevant)

26.7.0

Dominant language
TypeScript
Stars
19.9k
Forks
1.1k
Avg merge
1d 15h
Merged PRs (30d)
49

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from resend/react-email

All issues in resend/react-email

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.