Proposal for a separate type to target specifically inline code.

[AnishKacham]

I've read at places that I could target only singe backtick inline-code using inlineCode in the components object, however it doesn't seem to work. It's also not mentioned in the documentation.

From what I understand I can use pre to target code blocks and code targets just <code/> blocks but according to the commonMark specification fenced code blocks have a <code/> inside <pre/>.
This breaks some stuff when I try to use in NextJs to customize my inline code block separately.
Note: I'm already using Code Hikes' Bright syntax highlighter for Codeblocks.
Need a workaround for this

import { Code } from "bright";
import { MDXComponents } from "mdx/types";
import ghLight from "@/app/(assets)/github-light-flav.json";
import onedarkPro from "@/app/(assets)/onedark-pro-flav.json";

Code.theme = {
  dark: onedarkPro,
  light: ghLight,
  lightSelector: "html.light",
};

export const mdxComponents: MDXComponents = {
  pre: Code,
  code: ({ children }) => <code className="bg-red-200" children={children} />,
};

[ChristianMurphy]

Welcome @AnishKacham!
Sorry you ran into some confusion.

MDX has several representations of markdown it moves through, you can read about them in the architecture documentation https://github.com/mdx-js/mdx/tree/main/packages/mdx#architecture.
Inline code and Code are differentiated in the Markdown AST (mdast) https://github.com/syntax-tree/mdast#readme
How these markdown content types are translated to HTML can be customized with a remark (markdown) plugin, you can learn more about plugins here: https://unifiedjs.com/learn/

That said, doing so is unnecessary in most cases, as the HTML output is already distinct between the two.

This breaks some stuff when I try to use in NextJs to customize my inline code block separately.

Please read the support guidelines https://mdxjs.com/community/support/, most of your sub-questions, and especially this statement, are XY problems.

[AnishKacham]

Hey thanks for such an immediate response.

Please read the support guidelines https://mdxjs.com/community/support/, most of your sub-questions, and especially this statement, are XY problems.

Damn. Ain't that embarrassing, I really did walk into this one as I was being unusually hasty while trying to solve an issue.
Sorry for putting up such a strongly worded title.

I'm actually trying to render a blog page, whose content would be written in MDX, and only fully understood what I was doing right now.
so here's what my component that renders the mdx looks like:

import { MDXRemote } from "next-mdx-remote/rsc";
import remarkGfm from "remark-gfm";
import rehypeSlug from "rehype-slug";
import rehypeAutolinkHeadings from "rehype-autolink-headings";
import remarkToc from "remark-toc";
import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex";
import { mdxComponents } from "./mdx-components";

export function PostBody({ children }: { children: string }) {
  return (
    <div className="prose prose-red dark:prose-invert prose-code:before:content-none prose-code:after:content-none">
      {/* @ts-expect-error Async Server Component */}
      <MDXRemote
        source={children}
        options={{
          mdxOptions: {
            remarkPlugins: [remarkGfm, remarkToc, remarkMath],
            rehypePlugins: [rehypeSlug, rehypeAutolinkHeadings, rehypeKatex],
          },
        }}
        components={mdxComponents}
      />
    </div>
  );
}

and this is what my mdx-components.tsx file looks like:

import { Code } from "bright";
import { MDXComponents } from "mdx/types";
import ghLight from "@/app/(assets)/github-light-flav.json";
import onedarkPro from "@/app/(assets)/onedark-pro-flav.json";

Code.theme = {
  dark: onedarkPro,
  light: ghLight,
  lightSelector: "html.light",
};

export const mdxComponents: MDXComponents = {
  pre: Code,
  code: ({ children }) => <code className="bg-red-200" children={children} />,
};

and according to the syntax tree visualized here
I think, I misunderstood the problem I was having.
I was also a little biased by this stackoverflow answer https://stackoverflow.com/a/67957209.
That said, I'm really sorry if my intended oblivious discussion came out as a brash one.

[ChristianMurphy]

I think, I misunderstood the problem I was having.

What is the problem you are having?
What are you expecting to see? What are you actually seeing?

according to the syntax tree visualized here

Yes, in the Markdown Abstract Syntax Tree (mdast), differentiates between inline and block code elements.
The exact structure used can be seen in the playground: https://mdxjs.com/playground/
You are accessing components, which works on the the generated JavaScript (React/Vue/etc) components, again please see the architecture explanation https://github.com/mdx-js/mdx/tree/main/packages/mdx#architecture

I was also a little biased by this stackoverflow answer https://stackoverflow.com/a/67957209.

That is specific to MDX 1, it was intentionally removed in MDX 2, in favor of using standard plugins and html tags.
see: https://mdxjs.com/migrating/v2/#update-mdx-content

[AnishKacham]

What is the problem you are having?
What are you expecting to see? What are you actually seeing?

I have a page where I'm trying to render content written in mdx,
I want to let Bright's Code component handle the styling and behavior for the triple backtick fenced code block
but want to write a custom component for single backtick fenced inline code.
Using the above mdx-components.tsx I get the following error thrown from Bright's Code component.

And my source mdx file looks like this:

    # Heading 

    `inline code here`.

    ```post.tsx
    code block here
    ```

[ChristianMurphy]

The error is coming from Bright, MDX happens to be on the page, but you would have the same error if you were using plain JS.
Ask the Bright community about the most appropriate way to use their highlighter on a page http://discord.codehike.org/

[wooorm]

but according to

This has more to do with HTML. <pre> is a block of preformatted text where whitespace is significant. <code> is code.
I recommend going with how HTML works and using that meaning of pre, and that meaning of code, instead of coming up with new meanings.

Code Hikes' Bright

Thats made for MDX so I’m sure you can use it with MDX?