Help to deal with inline code vs fenced code without language hint after 9.0.0

[king8fisher]

Hello all,
It's been a tremendous work done towards simplification of the resulted render, it's plausible. Thank you for all your work!

I am asking for help in figuring out how to reliably distinguish between an inline and a fenced code block that has no language hint since v9.0.0, when the inline prop got dropped.

When a fenced block has no language hint (which is allowed by the spec), className does not get any language- class and therefore it is considered as a regular inline code block.

So the "dance around fire" that I'm doing here is not 100% reliable. It misses a few situations:

• an inline block beginning from column 1 and spilling to a next line
• a one-line fenced block without language hint that does not start from column 1 (tabbed out fenced block)

      components={{
        // code: Used for inline code.
        // pre > code: Code blocks are a code element with a pre as its direct ancestor.
        code({ node, className, ...props }) {
          const hasLang = /language-(\w+)/.exec(className || "");
          let lang = hasLang ? hasLang[1] : null;
          if (!lang 
            && node
            && node.position 
            && (node.position.start.column === 1)
            && (node.position.start.line !== node.position.end.line)) {
            // What used to be hinted as 'inline' is not anymore, invalidating numerous old examples.
            //
            // The 8.0.7...9.0.0 diff says this (https://github.com/remarkjs/react-markdown/commit/434627686e21d4bcfb4301417e0da2bb851d4391):
            //
            // Previously, this project automatically passed different extra props to
            // particular components.
            // Those props are sometimes useful to some people, but not always useful
            // to everyone.
            //
            // ### Remove extra props passed to certain components
            //
            // When overwriting components, these props are no longer passed:
            //
            // *   `inline` on `code`:
            //     — create a plugin or use `pre` for the block

            // We'll patch what seems to be 'inline' but is not, being a fenced block,
            // with a default rendering language for highlighter.
            lang = "txt";
          }

Please help to reliably distinguish so that I can pick how to render a real inline code vs a fenced code block that has no language hint.

[wooorm]

When a fenced block has no language hint (which is allowed by the spec), className does not get any language- class and therefore it is considered as a regular inline code block.

This is not correct.
Whether there’s a language—indeed a class—does not make something inline or block.

---

This is an XY question. See for example https://xyproblem.info. You ask about something that does not exist. Please take a step back and ask your root question.

[king8fisher]

What will be the way for a library user to go about deciding what the next parsed node is and how to render it - as inline - or not.
I can't find a reliable way, hence kindly asking for help.

[wooorm]

What is “the next parser node”?
Please explain what do you want.
Why do you want this?

[king8fisher]

• parsed node - next component to render as it comes in via components prop of the ReactMarkdown component.
• I want to decide how to render the "code" element - as my own syntax highlighted block or as a simple inline <code> element.

[wooorm]

Please explain why you want this? You can already pass a code component. Why is that not enough?

[king8fisher]

Yes, I am passing a code component. code component gets called for both different CommonMark syntax elements. It is the only one that receives a language hint via className when resulted from a fenced code block. It would be good enough, but unfortunately className seems to be empty for the fenced blocks that have no info string. I simply can't find a way to differentiate between the two different Markdown elements landing into one component so that I can make my own render when the className is empty.

[ChristianMurphy]

@king8fisher you keep on talking about what are you doing.
But keep missing, why you are doing it?

Are you trying to do syntax highlighting? Something like https://github.com/remarkjs/react-markdown?tab=readme-ov-file#use-custom-components-syntax-highlight
Syntax highlighting only make sense if the language is known, so this feels like it may be a non-issue.

Feel free to expand on why are you need different rendering in this case.

[king8fisher]

Thank you for the follow up.

I go with the requirement of fenced blocks to be rendered via Syntax highlighter, treated as regular text file if no info string is provided.
What I cannot do is decide whether my <code> is a child of <pre> or not in other terms.

This is a fenced block without an info string

[ChristianMurphy]

You can't syntax highlight if you don't know the language?
Do you mean that you want it to look more block-like visually?

That can be done with pure CSS.
Inline code in Commonmark will only have <code></code>, block will always have a wrapping pre tag <pre><code></code></pre>

pre > code {
   /* style it to look how you want */
}

---

You could also use JS to detect the parent/child relationship between the tags.
Keep in mind: Styles are easy in CSS, they're much harder in JS/React, up to you it you want to make it more complex. 🤷

[wooorm]

Also please see remarkjs/react-markdown#834 (comment) for my take (and Christian’s comment above)

[king8fisher]

There might be a need to provide a default language for all unspecified fenced code blocks. How would you accomplish that?

[ChristianMurphy]

remark plugins can add attributes to markdown constructs like code https://unifiedjs.com/learn/

[king8fisher]

Thank you for the follow up!

A consumer might have their reasons why they would require a block with unspecified language to be rendered with the Syntax highlighting. The one I mentioned; there might be others, like patching the language, or showing line numbers for even a simple text block. They might not want to maintain CSS defined once for Syntax highlighter and attempt to mimic it.

The question boils down to how a consumer of the library is able to differentiate an inline code from a code block that has no class with the language hint in it? Is there a way without any other external plugins?

[ChristianMurphy]

A consumer might have their reasons why they would require a block with unspecified language to be rendered with the Syntax highlighting

This is a library for actual users.
Hypothetical undefined reasons aren't particularly useful for helping real users.

The one I mentioned; there might be others, like patching the language, or showing line numbers for even a simple text block. They might not want to maintain CSS defined once for Syntax highlighter and attempt to mimic it.

Sure, you can choose a lot of different approaches.
CSS is often a good path, because it is natively part of the web platform, simple, and powerful.
If you choose not to use it, then you have to dive more into react/remark internals.

The question boils down to how a consumer of the library is able to differentiate an inline code from a code block that has no class with the language hint in it?

It is differentiated by the HTML elements used https://github.com/orgs/remarkjs/discussions/1346#discussioncomment-10033075

For future readers, I'll reiterate: for most people, the differentiation the library offers is enough for syntax highlighting.
You can't highlight syntax if you don't know what the syntax is. remarkjs/react-markdown#834 (comment)

If you choose to go down the road anyway, three approaches include

1. Using CSS/Selectors (recommended)
2. Using a remark plugin
3. Using JS/React to see if the parent child relationship is

Is there a way without any other external plugins?

Yes, I offered multiple several comments ago https://github.com/orgs/remarkjs/discussions/1346#discussioncomment-10033075

[king8fisher]

Is there a way to know if the immediate parent of a code element is pre? (Yes/No)

[ChristianMurphy]

Yes, read the comment you are responding to.

[king8fisher]

I am stuck and would greatly appreciate any kind assistance in figuring this out.

https://stackblitz.com/edit/github-6nizfy-d935q8?file=src%2Fapp.tsx

[ChristianMurphy]

I'd highly recommend reading https://unifiedjs.com/learn/
To understand what remark plugins are and how to make/maintain them.
Here is a one-liner example

() => (tree: Root) => { visit(tree, 'code', (node) => { node.lang = node.lang ?? 'plaintext'; }); }

https://stackblitz.com/edit/github-6nizfy-pv8tlr

[king8fisher]

That is very helpful thank you!