Is there any plug-in that can format HTML + JAVASCRIPT + CSS at the same time?

Freya Smith

Excuse me

Is there any plug-in that can format HTML + JAVASCRIPT + CSS at the same time?
Or any plug-in for formatting HTML + CSS without JAVASCRIPT?

Example code with JAVASCRIPT
<original no formatting>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="sharetoapp.css" rel="stylesheet" type="text/css"/>
        <script src="sharetoapp.js" type="text/javascript" async=""></script>
		
		<style>
		.share_wrap{
     display:block;
}

.a2a_hide{
    display:block;
}
.a2a_logo_color{
    background-color:#0166ff;
}
.a2a_menu,.a2a_menu *{
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
    float:none;
    margin:0;
    padding:0;
    position:static;
    height:auto;
    width:auto
}
		</style>
    </head>
    <body>
        <article class="share_wrap">
                <div page="113" class="a2a_kit a2a_kit_size_32 a2a_default_style" style="line-height: 32px;">
             <div style="clear: both;"></div></div>
                </article>
		<script>
		function goprev() {
    Search.searchPosition -= 1;
    if (Search.searchPosition < 0) {Search.searchPosition = Search.result.length - 1;
    }
    $(window).scrollTop(Search.result[Search.searchPosition][1] - 300);
    var _loc1 = Search.result[Search.searchPosition][2]
window.objfocus = _loc1;
    _loc2 = $("body").css("color");
                _loc1.css("color", "blue");
                       var delay = 1500;
    setTimeout(function () {
        _loc1.css("color", _loc2);}, delay);
                    $(".findindex").text((Search.searchPosition + 1) + "/" + Search.result.length);
}
		</script>
    </body>
</html>

<after formatting>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="sharetoapp.css" rel="stylesheet" type="text/css" />
    <script src="sharetoapp.js" type="text/javascript" async=""></script>

    <style>
        .share_wrap {
            display: block;
        }

        .a2a_hide {
            display: block;
        }

        .a2a_logo_color {
            background-color: #0166ff;
        }

        .a2a_menu,
        .a2a_menu * {
            -moz-box-sizing: content-box;
            -webkit-box-sizing: content-box;
            box-sizing: content-box;
            float: none;
            margin: 0;
            padding: 0;
            position: static;
            height: auto;
            width: auto
        }
    </style>
</head>

<body>
    <article class="share_wrap">
        <div page="113" class="a2a_kit a2a_kit_size_32 a2a_default_style" style="line-height: 32px;">
            <div style="clear: both;"></div>
        </div>
    </article>
    <script>
        function goprev() {
            Search.searchPosition -= 1;
            if (Search.searchPosition < 0) {
                Search.searchPosition = Search.result.length - 1;
            }
            $(window).scrollTop(Search.result[Search.searchPosition][1] - 300);
            var _loc1 = Search.result[Search.searchPosition][2]
            window.objfocus = _loc1;
            _loc2 = $("body").css("color");
            _loc1.css("color", "blue");
            var delay = 1500;
            setTimeout(function() {
                _loc1.css("color", _loc2);
            }, delay);
            $(".findindex").text((Search.searchPosition + 1) + "/" + Search.result.length);
        }
    </script>
</body>

</html>

Mark Olson

@Freya-Smith
Probably not. There is at least one plugin (XMLTools) that can format XML (and thus HTML), but that plugin does not understand CSS or JavaScript. There is also JSTool, a plugin that can format JavaScript, but it doesn’t understand HTML or CSS.

So the best workflow I can think of to reformat HTML and JavaScript would be something like:

Use XMLTools to reformat the HTML
Use the regular expression (?s-i)<script[^<>]*>\K(?:(?!(?:<\w+|</script>)).)* to find script tag, and for each script tag:
- Copy the selected text into a new tab
- Use JSTool to reformat the text in that tab (this will make the JavaScript pretty
- Select the reformatted JavaScript
- Paste it back over the selected script tag

Sadly JSTool is not smart enough to reformat selected text while ignoring text that isn’t selected, and given that the maintainer seems relatively uninterested in the plugin nowadays, I doubt that feature will ever be implemented. Thus, it doesn’t seem like there’s any way to efficiently reformat JavaScript+HTML in Notepad++, and that’s before even considering the CSS.

To be honest, I don’t think Notepad++ is the best text editor for working with JavaScript/HTML/CSS in 2024 on Windows; I would probably use VSCode for a project in those languages, and save Notepad++ for working with things like CSV’s, log files, or JSON.