Typescript checks on code blocks

[kachmashk]

Hey guys! I'm wondering if it's possible to format and Typescript/Eslint check. Like in this case I should see a parsing error for the subtitle prop. From what I've researched till this point I think it's not possible as that's just a string so these checks won't be possible. But is there maybe another way to achieve that?

I need to be sure that if I'll take that code snippet at paste it in the project it'll work out of the box and at the same time I need to have the possibility to show that snippet in the .mdx file.

export const code = ```jsx
<Component
  title="Title"
  subtitle: "Subtitle"
/>

[wooorm]

Hi!

Your code looks off?

So I don’t understand.

But https://github.com/rehypejs/rehype-twoslash

[kachmashk]

I would like to see an eslint error that there's parsing error. Inline or via CLI. My question basically is if it's possible to .mdx to know that in that code snippet is a .jsx component so I can see that error.
Or just use that component in a .mdx to see that there're no issues (with props i.e.) and then turn it into a code snippet.

It should look like this, there's a difference with subtitle prop.

export const code = ```jsx
<Component
  title="Title"
  subtitle="Subtitle"
/>```

[wooorm]

I don’t understand. What you show is not valid MDX/JS? Try pasting it here: https://mdxjs.com/playground/. Doesn’t work.
If you want eslint, perhaps use https://github.com/mdx-js/eslint-mdx.

[kachmashk]

If I'll use that component in a .mdx file like this:

<Component
  title="Title"
  subtitle: "Subtitle"
/>

I'll get an error to fix that subtitle and make it like that:

<Component
  title="Title"
  subtitle="Subtitle"
/>

But my question is if its possible to see that error in a code snippet, so in:

export const code = ```jsx
<Component
  title="Title"
  subtitle: "Subtitle"
/>```

[wooorm]

Sorry, I don’t understand what you are asking.
The first code snippet you just posted, is invalid MDX. You will get a syntax error when MDX tries to parse it. No tool can parse it. ESLint does not understand it either.
For the last code snippet, I do not understand how it relates to MDX. That is not valid markdown, MDX, or JS(X).