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.
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.