beautifier/js-beautify

HTML <!-- comments --> placed within text alters whitespace

Open

#1,301 opened on Dec 11, 2017

View on GitHub
 (6 comments) (0 reactions) (0 assignees)JavaScript (8,342 stars) (1,460 forks)batch import
good first issuelanguage: htmltype: bug

Description

Description

When HTML comments are beautified, it removes the whitespace surrounding the comment. This is problematic if the HTML comments occur within text blocks such as paragraphs.

Input

When a comment exists inside a text block:

<div><p>Hello <!-- Comment -->World</p></div>

Expected

Ideally, I would like comments to always be ignored wherever they occur, like so:

<div>
	<p>Hello <!-- Comment -->World</p>
</div>

Actual

The problem with the above is the removal of the space following Hello like so:

<div>
	<p>Hello
		<!-- Comment -->World</p>
</div>

Settings

Example:

{
	"indent_size": 1,
	"indent_char": "	",
	"wrap_line_length": 0,
	"preserve_newlines": true,
	"max_preserve_newlines": 3
}

Note

I'm aware that I could use:

{
	"content_unformatted": ["p","li","td", "...", "..."]
}

But this doesn't strike me as an ideal solution. I think it would be better if there was an option to ignore comment tags specifically.

Contributor guide

Tech stack
javascripthtml
Domain
tooling
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
understanding of HTML parser in js beautifyfamiliarity with beautifier options
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
50
Research direction
Investigate the HTML beautifier module in js beautify, specifically how HTML comments are tokenized and reformed. Look at the handling of whitespace around comments in the tokenizer or beautifier code. Consider adding an option (e.g., `preserve comments`) to keep comments inline without altering surrounding whitespace. The existing `content unformatted` workaround suggests the issue is in how inline elements are treated. Review the issue comments for any proposed solutions or discussions.