markdown - prettier-ignore inside mdx + storybook + github - Stack Overflow

admin管理员组

文章数量:1315229

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

• github
• markdown
• mdx
• storybook
• prettier

Share Improve this question Follow asked Jan 30 at 13:41 tgordon18tgordon18 1,87911 gold badge2323 silver badges3636 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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.

本文标签： markdownprettierignore inside mdxstorybookgithubStack Overflow