tomfuller71
commented
2 months ago I'm not familiar with ChakraUI, but I had a similar issue using using Next, react-markdown and tailwind, where because by default tailwind normalizes css for heading and lists the rendered markdown appears as plaintext . In my case my options were to either opt out of the default preflight normalizing, or to use the components prop to explicitly create styling for the elements I was interested in.
<Markdown
components={{
p({ children }) {
return <p className="mb-2 last:mb-0">{children}</p>;
},
h1({ children }) {
return <h1 className="text-bold text-2xl">{children}</h1>;
},
h2({ children }) {
return <h2 className="text-bold text-xl">{children}</h2>;
},
h3({ children }) {
return <h3 className="text-bold text-lg">{children}</h3>;
},
ol({ children }) {
return <ol className="list-inside list-decimal">{children}</ol>;
},
ul({ children }) {
return <ul className="list-inside list-disc">{children}</ul>;
},
li({ children }) {
return <li className="mb-2 list-item list-inside">{children}</li>;
},
blockquote({ children }) {
return (
<blockquote className="relative border-s-4 border-gray-800 bg-slate-200 pl-2 ps-4 sm:ps-6">
{children}
</blockquote>
);
},
}}
>
ChristianMurphy
github-actions[bot]
Initial checklist
Affected packages and versions
react-markdown
Link to runnable example
Video: https://youtu.be/NglCta2XuCA
Steps to reproduce
Steps are shown in the video. My stack is using NextJS 14 (I forget what Node version this is) with ChakraUI/SaaS UI
Using NPM 10.2.3
Expected behavior
Anything using a # Should be rendered as a heading in Markdown
Actual behavior
The # gets ignored and not rendered. Text that should be heading is plaintext.
Runtime
Other (please specify in steps to reproduce)
Package manager
Other (please specify in steps to reproduce)
OS
Windows
Build and bundle tools
Next.js