question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Use next-mdx-remote with rehype-sanitize makes `inline code block` not working

See original GitHub issue

Hi!

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:closed
  • Created 2 years ago
  • Comments:7

github_iconTop GitHub Comments

2reactions
alexcarpentercommented, Mar 8, 2022

@resqiar Just checked out your CodeSanbox repro and looks to be working. Are you still experiencing the issue?

CleanShot 2022-03-08 at 08 31 44@2x
1reaction
nos-nartcommented, Mar 18, 2022

@resqiar I updated next-mdx-remote to v.4 and It works

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found