Parsing Errors: Unterminated JSX contents when using details element about eslint-mdx

[satazor]

@JounQin it seems that both plugins are incompatible. I've tried to setup both with this config:

// .eslintrc.js
const markdownRecommended = require('eslint-plugin-markdown').configs.recommended;

module.exports = {
    root: true,
    env: {
        browser: true,
        node: true,
    },
    extends: [
        'eslint:recommended',
        'plugin:react/recommended',
    ],
    overrides: [
        {
            files: ['*.mdx'],
            extends: ['plugin:mdx/recommended'],
            plugins: ['markdown'],
            processor: 'markdown/markdown',
            parserOptions: markdownRecommended.overrides[0].parserOptions,
            rules: markdownRecommended.overrides[0].rules,
        },
    ],
};

However, only errors coming from eslint-plugin-markdown are reported. Once I comment the line with processor, only errors coming from eslint-mdx are reported. It seems both are incompatible.

Is there anything I'm missing?

[satazor]

@JounQin The PR at #208 removed the ability to validate JS inside code blocks, such as js or jsx. I would want to validate JS code inside it as well. What's the reason for removing it?

[JounQin]

@JounQin The PR at #208 removed the ability to validate JS inside code blocks, such as js or jsx. I would want to validate JS code inside it as well. What's the reason for removing it?

That PR has been closed.

And code block is intended to be ignored because they're not source code but something like string literal. But if you want to lint code blocks, maybe you can try eslint-plugin-markdown.

[satazor]

Let me know if you want me to create a new issue.

[JounQin]

@satazor Sorry markdown code in jsx is not supported and not going to happen in v1, but it should be possible in v2.

And I tried to fix part of this issue in #273. What means the following will be able to be parsed.

<details><summary >Override element states</summary>

The previous code sample show how to specify a custom color for a `naked` button by using a `style` attribute. It works great to provide a basic property like a `background-color`. What about [element states](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) though? You can't specify an hover state with a `style` attribute.

Here's another technique to specify a custom color by using a few CSS classes and a [CSS variable](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). This technique leverage the ability to override a CSS variable of a stylesheet from the `style` attribute.

In the following example a React component render a button with a custom color `background-color` and a darker hover state by overriding the `--color` CSS variable from the `style` prop.

</details>