Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Beautify script/style tags but ignore their inner JS/CSS content

See original GitHub issue

Given the following HTML input:

<body><h1>Heading</h1><script>var formatMe = function() { return false; };</script><style>.format-disabled { display: none; } </style></body>

Running a stock html_beautify results in (as expected):

<body>
    <h1>Heading</h1>
    <script>
        var formatMe = function() {
            return false;
        };
    </script>
    <style>
        .format-disabled {
            display: none;
        }
    </style>
</body>

However, I want to disable js-beautify from touching anything inside <script> and <style> tags, so I set the following options:

{
  unformatted: [ 'script', 'style' ]
}

But this results in the <script> and <style> tags not having newlines before them, and the closing </body> isn’t formatted properly on its own line (edit: looks like this is #900):

<body>
    <h1>Heading</h1><script>var formatMe = function() { return false; };</script><style>.format-disabled { display: none; } </style></body>

I can use the extra_liners option to sort of force the closing body tag to wrap, but it adds two newlines instead of one:

{
  unformatted: [ 'script', 'style' ],
  extra_liners: [ '/body' ]
}

<body>
    <h1>Heading</h1><script>var formatMe = function() { return false; };</script><style>.format-disabled { display: none; } </style>

</body>

And it seems like extra_liners doesn’t work for <script> and <style> tags at all:

{
  unformatted: [ 'script', 'style' ],
  extra_liners: [ 'script', 'style', '/body' ]
}

<body>
    <h1>Heading</h1><script>var formatMe = function() { return false; };</script><style>.format-disabled { display: none; } </style>

</body>

What I really want is this output:

<body>
    <h1>Heading</h1>
    <script>var formatMe = function() { return false; };</script>
    <style>.format-disabled { display: none; } </style>
</body>

But it doesn’t seem possible given the current config options. Is there any way to force these outer <script> and <style> tags to format properly, but skip formatting everything inside of them?

Issue Analytics

State:
Created 7 years ago
Reactions:2
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

callmevladcommented, Apr 19, 2016

If anyone else is interested in this issue, I just posted a $300 bounty on Bountysource: https://www.bountysource.com/issues/32197949-beautify-script-style-tags-but-ignore-their-inner-js-css-content

0reactions

bitwisemancommented, Dec 26, 2016

@callmevlad - your bounty got some action on this, from two different people. Not sure whether you can split bounties. #1080 is the simpler change, but #1081 has more complete tests.

Please review and provide feedback to the submitters.

Top Results From Across the Web

website/node_modules/js-beautify/CHANGELOG.md - Rdrr.io

JS beautify break the angular compile (#1544); base64 string is broken with ... Beautify script/style tags but ignore their inner JS/CSS content (#906) ......

js-beautify-ejsx | Yarn - Package Manager

Fast, reliable, and secure dependency management.

The difference tool - Pretty Diff

Pretty Diff tool can minify, beautify (pretty-print), or diff between minified and beautified code. This tool can even beautify and minify ...

mjmlTest/node_modules/js-beautify/CHANGELOG.md - GitLab

Fixed html formatting issue with attribute wrap (Thanks, @HookyQR ... Beautify script/style tags but ignore their inner JS/CSS content (#906) ...

regex - Catch style tag inner content - Stack Overflow

UPDATE: I updated my regex to also match the attributes in an element. The elements are not validated in any kind, the stuff...