JS-Beautify should format XML tags inside HTML files

[tommai78101]

When formatting HTML files that includes XML tags, such as <svg>, I've noticed it doesn't format the contents of <svg>. Since <svg> is part of XML, it is not supported for js-beautify.

However, since the XML tag is inside an HTML file, should those also need supporting for HTML formatting?

I was told to file an issue here instead of VS Code, since they said any formatting issues should be redirected to the js-beautify project.

Input

The code looked like this before beautification:

<p class="newListItem">
  <svg height="40" width="40">
							<circle cx="20" cy="20" r="18" stroke="black" stroke-width="0" fill="#bddffa" />
							<text x="50%" y="50%" text-anchor="middle" stroke="#1b97f3" stroke-width="2px" dy=".3em">1</text>
						</svg> This is a paragraph after an SVG shape.
</p>

Expected Output

The code should have looked like this after beautification:

<p class="newListItem">
	<svg height="40" width="40">
		<circle cx="20" cy="20" r="18" stroke="black" stroke-width="0" fill="#bddffa" />
		<text x="50%" y="50%" text-anchor="middle" stroke="#1b97f3" stroke-width="2px" dy=".3em">1</text>
	</svg> 
	This is a paragraph after an SVG shape.
</p>

Actual Output

The code actually looked like this after beautification:

<p class="newListItem">
  <svg height="40" width="40">
							<circle cx="20" cy="20" r="18" stroke="black" stroke-width="0" fill="#bddffa" />
							<text x="50%" y="50%" text-anchor="middle" stroke="#1b97f3" stroke-width="2px" dy=".3em">1</text>
						</svg> This is a paragraph after an SVG shape.
</p>

Steps to Reproduce

1. Attempt to format an HTML file that contains small portions of XML tags.
2. Observe js-beautify doesn't format XML tags and the XML contents, because it really isn't supported to format XMLs.

Environment

OS: Windows 7 Enterprise LTS
Application: Visual Studio Code, which natively uses js-beautifier for formatting HTML files.

Settings

Example:

{
	"html": {
      "brace_style": "end-expand",
      "indent_size": 1,
		"indent_char": "\t",
		"indent_level": 0,
		"indent_with_tabs": false,
		"preserve_newlines": true,
		"max_preserve_newlines": 10,
		"jslint_happy": false,
		"space_after_anon_function": false,
		"keep_array_indentation": true,
		"keep_function_indentation": true,
		"space_before_conditional": true,
		"break_chained_methods": false,
		"eval_code": false,
		"unescape_strings": false,
		"wrap_line_length": 0
	},
	"js": {
      "brace_style": "end-expand",
		"indent_size": 1,
		"indent_char": "\t",
		"indent_level": 0,
		"indent_with_tabs": false,
		"preserve_newlines": true,
		"max_preserve_newlines": 10,
		"jslint_happy": false,
		"space_after_anon_function": false,
		"keep_array_indentation": true,
		"keep_function_indentation": true,
		"space_before_conditional": true,
		"break_chained_methods": false,
		"eval_code": false,
		"unescape_strings": false,
		"wrap_line_length": 0
	}
}

[bitwiseman]

This seems reasonable, but it is far down on the list of priorities.

[tommai78101]

Thanks.