如何在MDX中添加prettier-ignore，兼容GitHub与Storybook？

有两种可靠的方案可以满足你的需求：

方案1：在JSX元素属性中嵌入Prettier忽略注释 #

将{/* prettier-ignore */}作为JSX元素的属性注释，既不会被MDX渲染，也不会在GitHub等纯Markdown渲染器中显示，同时能让Prettier忽略整个元素的格式化：

<pre class="lang-none prettyprint-override" {/* prettier-ignore */}><code>&gt; [!CAUTION]
&gt; A word of caution
</code></pre>

Prettier会识别该注释并跳过对<pre>块的格式化，MDX解析时会自动忽略属性内的JSX注释，GitHub则会将整个<pre>当作普通HTML标签处理，属性里的注释不会被渲染或显示。

方案2：正确使用Markdown注释（适配MDX兼容版本） #

如果你的MDX版本（及Storybook配置）支持Markdown注释，可在需要忽略的JSX块上方添加<!-- prettier-ignore -->，注意注释要独立成行，且与JSX块保持分隔：

<!-- prettier-ignore -->
<pre class="lang-none prettyprint-override"><code>&gt; [!CAUTION]
&gt; A word of caution
</code></pre>

这种方式下，Prettier会忽略后续的<pre>块，GitHub不会显示注释，若之前出现Storybook渲染失败，可能是注释位置错误（比如放在JSX标签内部）或MDX版本过低，建议升级到最新的MDX和Storybook依赖。

内容的提问来源于stack exchange，提问作者tgordon18