Use next-mdx-remote with rehype-sanitize makes `inline code block` not working
See original GitHub issueHi!
I tried to migrate from react-markdown
to next-mdx-remote
lately, but I encountered a problem where the inline code block does not work when I use rehype-sanitize
plugin.
This should be the expected behaviour in the HTML:
<p>
<code>this inline should work nice and steady</code>
</p>
but instead, it completely removes the “code” inside of the “p” tag:
<p>
this inline should work nice and steady
</p>
Here is what I use in the package.json
"dependencies": {
"next": "11.1.2",
"next-mdx-remote": "3.0.8",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-markdown": "8.0.0",
"rehype-sanitize": "5.0.1",
"remark-gfm": "3.0.1",
},
and here is my simple index.tsx
import { serialize } from "next-mdx-remote/serialize";
import { MDXRemote } from "next-mdx-remote";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import rehypeSanitize from "rehype-sanitize";
import "github-markdown-css";
export default function IndexPage({ source }) {
return (
<div className="markdown-body">
<MDXRemote {...source} />
</div>
);
}
export async function getServerSideProps() {
// example md
const content = "`this inline should work nice and steady`\n";
const mdxSource = await serialize(content, {
mdxOptions: {
remarkPlugins: [remarkGfm],
// remove below plugins, and inline code block will works
rehypePlugins: [rehypeSanitize]
},
target: ["esnext"]
});
return {
props: {
source: mdxSource
}
};
}
Am I missing any configurations? I also tried other libraries with the same config, but the problem didn’t appear.
I created a simple sandbox to replicate and reproduce the problem. If you don’t mind, you can check this CodeSandbox
Thank you so much!
Issue Analytics
- State:
- Created 2 years ago
- Comments:7
Top Results From Across the Web
Issues rendering codeblocks · Issue #83 · hashicorp/next-mdx ...
I'm having some trouble getting the code highlighting working properly. I'm getting all of these kind of warnings when running nextjs in dev ......
Read more >next-mdx-remote doesn't pass the component - Stack Overflow
Since you're using single back-tick code (inline code) you should use inlineCode to target it. code / pre targets code blocks that use...
Read more >Powerful Code Blocks with Code Hike and MDX
Today, we are going to look at a library called Code Hike that provides exceptional features on markdown code blocks.
Read more >NextJS MDX Blog with Syntax Highlighting and TypeScript
In this video we will build out the functionality such that we can create blog posts using MDX so we can use components...
Read more >Design Updates | Ian Mitchell
MDX (and TipTap) · The Prism component I forked from Prisma relies on metastring values sent to Code Blocks. · Markdown's inlineCode syntax...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@resqiar Just checked out your CodeSanbox repro and looks to be working. Are you still experiencing the issue?
@resqiar I updated
next-mdx-remote
to v.4 and It works