Does not check nested code blocks (only lints top-level code blocks)

[calebeby]

trafficstars

Initial checklist

• [X] I read the support docs
• [X] I read the contributing guide
• [X] I agree to follow the code of conduct
• [X] I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

I am using eslint-plugin-mdx 2.2.0, eslint-mdx 2.2.0

Link to runnable example

https://stackblitz.com/edit/github-nxeabp?file=testcase.mdx

Steps to reproduce

Here is my mdx file that I am linting:

<main>
  ```js
  im_not_camel_case_oops
  ```
</main>

```js
im_not_camel_case_oops
```

ESLint only runs on the top-level code block. The code block inside the <main> element is ignored.

Expected behavior

It should lint both code blocks. I have mdx/code-blocks set to true.

Actual behavior

It only lints the top-level code block

Runtime

Node v18

Package manager

npm v9

OS

macOS

Build and bundle tools

Other (please specify in steps to reproduce)

[JounQin]

code blocks linting is powered by eslint-plugin-markdown, so maybe you need to post there, but I don't know would they accept this as bug because it's mdx not markdown actually.

cc @btmills

[btmills]

From a Markdown syntax perspective, the first set of triple backticks are the text content of an HTML node. Syntax tree from astexplorer (position omitted for brevity):

{
  "type": "root",
  "children": [
    {
      "type": "html",
      "value": "<main>\n  ```js\n  im_not_camel_case_oops\n  ```\n</main>"
    },
    {
      "type": "code",
      "lang": "js",
      "meta": null,
      "value": "im_not_camel_case_oops"
    }
  ]
}

The Markdown plugin only looks for "type": "code" nodes. I'm not familiar with this plugin's implementation, but I'd guess it would need to use an MDX parser instead of a Markdown parser in order to detect code blocks inside MDX nodes.

[JounQin]

@btmills Thanks for your reply! If you don't think it should belong to eslint-plugin-markdown then I'll take a look how to add this feature in eslint-plugin-mdx.

But I still think there is a chance to add this feature in eslint-plugin-markdown to support

<main>
  ```js
  im_not_camel_case_oops
  ```
</main>

Because it is just a valid markdown? Take <details></details> with code blocks for example which is much more popular.

[btmills]

Neither GitHub (nor VSCode, which I have handy) render the <main> example snippet you shared as code, which should steer developers away from that style.

Code blocks inside <details> should already work without any changes, at least based on the presence of a code node in the AST:

details demo

i.am(javascript);

[btmills]

Oh, hey! Check this out: if you include a blank newline between the <main> tag and the opening code block fence, the code block gets parsed and rendered as a code block. Both GitHub and Remark agree on that behavior. So I suppose if you're very strict about how you write MDX, it might be close enough to HTML for the Markdown parser to accept.

<main>
  
```js
im_not_camel_case_oops
```
</main>

im_not_camel_case_oops

[JounQin]

OK, so the problem here is code blocks inside html/jsx works a bit different with plain markdown, right? I'll add this feature in mdx later.

So you can add a new line for workaround for now. @calebeby