14

I have seen several questions about how to format HTML and javascript code. A common answer seems to be that jsbeautify (and GitHub page for jsbeautify.js) is a good solution.

However, I can't seem to get it to properly format any of my code, and I'm wondering if there are some default parameters that need changing, or if I am simply misunderstanding what beautification is supposed to do. What I am expecting is that each nested tag will be on a new line indented to the proper level. But instead what I see (and this does not seem to be unique to jsbeautifier) is that sometimes several tags get string together on the same line, and directives to break the line are ignored.

Example 1:

I took this example straight from this question.

<div id="hlogo">
    <a href="/">Stack Overflow</a>ABC</div>

When I go to jsbeautifer.org and enter the above code and click on "Beautify Javascript or HTML" it does nothing! I would expect the output to look something like this:

<div id="hlogo">
    <a href="/">Stack Overflow</a>ABC
</div>

Here's another example. I have selected "Wrap lines near 80 characters".

<!--Meta 6,1--><span><div>Just some sample text here which is fairly long, maybe about 100 characters or so, I'm not really counting.<input id="sdlkjhfkjhjkjhfjdfjkshdfkjshk"/><script type="text/javascript">;
</script></div></span>

The output of this is below. Note that there is no wrapping going on.

<!--Meta 6,1--><span><div>Just some sample text here which is fairly long, maybe about 100 characters or so, I'm not really counting.<input id="sdlkjhfkjhjkjhfjdfjkshdfkjshk"/><script type="text/javascript">;
<
/script></div > < /span>

Why isn't <span>, <div>, and preferably <input> on separate lines? And why is the opening &lt; on a separate line? I expected something like this:

<!--Meta 6,1-->
<span>
    <div>
        Just some sample text here which is fairly long, maybe about 100 
        characters or so, I'm not really counting.
        <input id="sdlkjhfkjhjkjhfjdfjkshdfkjshk"/>
        <script type="text/javascript">;
        </script>
    </div > 
</span>

Is there some parameters I need to pass to make this work? I have looked at the documentation for this but am coming up empty.

Michael
  • 9,060
  • 14
  • 61
  • 123
  • 1
    `` is incorrect. `` tags are empty and cannot have closing tags. – Pointy Apr 18 '16 at 23:18
  • @Pointy Thanks, fixed. – Michael Apr 18 '16 at 23:20
  • @Pointy Interestingly enough, it's actually possible to add a child tag to an input element in javascript, which results in innerHTML returning exactly something like this: ``. – Michael Apr 19 '16 at 22:33
  • @Michael Just because browsers accept it, that doesn't make it *correct code*. Most browsers will take a lot of junk in the code of a page and still try to do a good job rendering it. – Moshe Katz Apr 19 '16 at 22:49
  • 1
    http://jsbeautifier.org is not very useful for HTML. I would try some alternatives, like this: https://ctrlq.org/beautifier/ – ryanpcmcquen Jun 14 '17 at 23:10
  • Did you file a bug on any of this? I have equally silly examples, I'm just trying to research a bit before opening an issue.. – whitneyland Dec 12 '17 at 16:33
  • Here's an issue I opened. It's not identical, but has in common some very basic html issues, so it may help someone to subscribe to the thread if they want to hear updates on HTML fixes. https://github.com/beautify-web/js-beautify/issues/1302. – whitneyland Dec 13 '17 at 17:57
  • did you try prettier? – Chiptus Jan 07 '18 at 22:39

1 Answers1

0

The first example you listed

<div id="hlogo"> <a href="/">Stack Overflow</a>ABC</div>

Is not working correctly because the forward slashes around the ABC are causing beautify to read it as a Regular Expression.

In the wrapping example I think there is a problem because you have an apostrophe in the word I'm. I took it out and beautify did a little bit of moving things around after that. Have you ever tried repl.it? It is free and has a prettier button and I have found that is works really well.

Rachel Riley
  • 111
  • 2