Run & review this pull request in StackBlitz Codeflow.

❌ Deploy Preview for solid-docs failed. Why did it fail? →

This is a reminder that Prettier does not format fenced code blocks inside JSX unless the following conditions are met:

1. There is a blank line at the top and bottom of the block.
2. The block starts at the beginning of the line (with no indentation).

For example, Prettier does not recognize the fenced code block in this code:

<TabsCodeBlocks>
  <div id="npm">
    ```bash frame="none"
    npm install @macaron-css/core @macaron-css/solid
    ```
  </div>
</TabsCodeBlocks>

As a result, it formats it incorrectly like this:

<TabsCodeBlocks>
  <div id="npm">
    ```bash frame="none" npm install @macaron-css/core @macaron-css/solid ```
  </div>
</TabsCodeBlocks>

To resolve this issue, you need to manually check all fenced code blocks and ensure they meet the criteria mentioned above:

<TabsCodeBlocks>
<div id="npm">

```bash frame="none"
npm install @macaron-css/core @macaron-css/solid
```

</div>
</TabsCodeBlocks>

I have already addressed this in my own pull request, specifically in this commit. If you find it helpful, you can use git cherry-pick to incorporate it.