prettier-ignore inside mdx + storybook + github

Question

I have an .mdx file that includes a section I don't want prettier to modify:

> [!CAUTION]
> A word of caution

(Relevant issue ticket on why I need to do this in the first place)

I can add a prettier-ignore using { } syntax like so:

{/* prettier-ignore */}
> [!CAUTION]
> A word of caution

And it works, but then when I render my file in GitHub (or some other markdown renderer) the {/* prettier-ignore */} is visible.

If I instead use

<!-- prettier-ignore --> 
> [!CAUTION]
> A word of caution

then prettier still works and it doesn't show up GitHub. Nice!

But then the file becomes invalid .mdx and it breaks when trying to render with Storybook.

Maybe I'm getting greedy by expecting all of these technologies to be able to work with .mdx in the way that I want them to. I'll probably just ditch the GitHub alert but in general it would be nice to find a way to prettier-ignore sections of .mdx without it showing up in a markdown renderer.

Remco Haszing · Accepted Answer · 2025-01-30 16:05:51Z

1

I’m an MDX maintainer. There a couple of issues here.

GitHub can’t render MDX. It can’t possibly do so, because MDX is syntactic sugar for JSX. Yet GitHub renders MDX as if it’s markdown, which it is not. We have asked GitHub to remove the preview for MDX files, but they have not responded.

Prettier doesn’t properly support MDX 3. Its MDX support is outdated. I recommend adding *.mdx to your .prettierignore until that issue is fixed.

The MDX compiler can handle both markdown and MDX files. Depending on your use case, you may be better of writing regular markdown files.

Prettier does support GitHub’s alert syntax if you properly escape the link reference.

> \[!Warning]
> `This` is a warning.

answered Jan 30 at 16:05

Remco Haszing

7,9797 gold badges47 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tgordon18 Jan 31 at 17:15

This is tremendously helpful, thank you!

Collectives™ on Stack Overflow

prettier-ignore inside mdx + storybook + github

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related