Open antoinezanardi opened 7 months ago
Thank you very much for this detailed report. Currently, this behavior is intentional. The way it works is, we only insert a newline if the line is too long, and we also never add any kind of space between elements if it didn't exist in the original source. The reason for this is because adding a space changes the HTML. This is particularly a problem for inline elements:
<span>$<span>500</span></span>
If we were to add any spaces here, it would cause the price to display incorrectly. This can also be a problem with block elements like div
if using the inline-block
display, where you get unintentional spaces in the markup. Adding spaces also affects the value of textContent
when accessed from JS. Often this is not an issue, but because this library, unlike others, tries to be as noninvasive and generic as possible, we try to avoid making any assumptions on how the HTML will be styled or used.
That said, I'm curious how you are using this library. Is it via the VS Code extension or are you using it programmatically? Is it hand-written HTML or generated?
Thanks for your detailed response. I'm actually using this library when running my E2E tests with Nuxt + Playwright + Cucumber. When a scenario fails, I print out in the reports of the working Playwright page to have some clues of what's going on.
Maybe we can add option(s) ?
Thanks for the info. I've marked this issue as an enhancement for now. I'll have to think some more about how to go about it. In the meantime, for your case maybe look into using prettier via their API - it does a complete reformatting by first parsing the entire HTML as an AST. That makes it stricter with the syntax and also quite a bit slower, but it might be more useful for eg. diffing such as in your testing scenario.
@antoinezanardi I needed the same thing as you did and found this that worked out of the box for me: https://www.npmjs.com/package/htmlfy
Maybe it'll suit your needs
Description:
The library is designed to format HTML and prettify it, ensuring a clean and readable structure. However, there seems to be an issue with the output where the starting tags are not placed on the next line as the closing ones. The current output is as follows:
The expected output should have the starting tags on the next line, like this:
Steps to Reproduce:
Expected Behavior:
The library should produce a well-formatted HTML output where starting tags are on the next line for better readability.
Thanks for your help.