Rehype HTML Prettifier

[felixranesberger]

Hi, I would like to prettify my HTML with a few custom style rules.
When more than two attributes are placed on a html tag, the new tags should each be on a new line.
I want to implement this, so that html code previews are more clean to look at and don't overflow the code preview container.

Before:

<div id="test-id-1" class="test" data-test="test">
    <p>Test</p>
</div>

<div id="test-id-2" class="test">
    <p>Test</p>
</div>

After:

<div
    id="test-id-1"
    class="test"
    data-test="test"
>
    <p>Test</p>
</div>

<div id="test-id-2" class="test">
    <p>Test</p>
</div>

I found rehype-format, but this only seems to format white-spaces.
Do you know if there is any existing solution for prettifying html?
Is rehype the correct solution for this problem?

[felixranesberger]

I know there is also prettier, which I assume can format HTML as well, but with 7mb it's a large dependency with a huge feature set.

[JounQin]

If all tools existed doesn't meet your requirement, you will need to write your own solution.

but with 7mb it's a large dependency with a huge feature set.

rehype-format or rehype-stringify will also include bunch of dependencies. Other solutions like dprint would be larger due to native distributions https://dprint.dev/plugins/markup_fmt/

[wooorm]

rehype-stringify + rehype-format

a few custom style rules.

This idea of multi-attributes on different lines would mean that you make your own version of rehype-stringify.

Similar features are available for JSX in markdown, but not for HTML.