rareyman/HTMLBeautify

custom tags

Closed this issue · 5 comments

ctf0 commented
  • test
<my-tag>
    <div></div>
</my-tag>

-after

<my-tag>
<div></div>
</my-tag>

shouldn't the custom tags have their inner elements be indented by default unless the user set otherwise ?

ctf0 commented

i came up with a solution that will fix many issues and will keep the plugin future prof

  • settings
{
    // first level will be indented but anything after that will become flatten
    // (issue/23)
    "ignored_tag_opening" : "<\\?php|<!--|{\\*|<style|<script",
    "ignored_tag_closing" : "\\?>|-->|\\*}|</style|</script",

    // any opening tag will be indented (including custom tags)
    "tag_indent": 
    "\\{% (if|for|block|else|spaceless)|<.*",

    // any closing tag will be un-indented (including custom tags)
    "tag_unindent": 
    "\\{% end|</.*",

    // here u just add the main tags that u want to be un-indent and indent its content
    // check the below test
    "tag_unindent_line" : 
    "\\{% else|@empty|@else|<html|<head",

    // the tags that could be on one line + the self closing tags (add more when needed)
    "tag_pos_inline": 
    "\\{% if.*endif %\\}|\\{% block.*endblock %\\}|<.*</.*>|<area.*>|<base.*>|<br.*>|<col.*>|<command.*>|<embed.*>|<hr.*>|<img.*>|<input.*>|<keygen.*>|<link.*>|<meta.*>|<param.*>|<source.*>|<track.*>|<wbr.*>|<!--.*-->",

    "tag_raw_flat_opening" : "<pre",
    "tag_raw_flat_closing" : "</pre",
}
  • test
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css"></style>
    <meta charset="utf-8">
    <link rel="stylesheet" href="">
    <script type="text/javascript"></script>
</head>
<body>
    <div>
        <input type="" name="">
        <img src="">
        <br>
        <hr>
        <br/>
        <a href="">
            <hr/>
            <img src="">
            <!-- ... -->
            <table>
                <tbody>
                    <tr>
                        <td></td>
                    </tr>
                </tbody>
            </table>
        </a>
    </div>
    <script type="text/javascript"></script>
</body>
</html>

  • the only bug i currently have is when having a comment on the same line of a closing tag, which will add an extra indentation.
    temp fix would be removing the <!--.*--> from tag_pos_inline but now having the comment on its own line will cuz issues.

  • style/script in ignored_tag_opening , using tabs will keep the indent level but will add extra one on each format, when using spaces all will be flatten to one level and stay like that throughout the formating.

    used in tag_raw_flat_opening is the opposite of ignored_tag_opening

-- // in script tags is funky

rareyman commented

Looks great. I am in the midst of major projects so I can't give this too much attention, but I like what you're doing, @ctf0. :)

ctf0 commented

thanx, its okay, take ur time 👍

ctf0 commented

any updates on this ?

rareyman commented

I'm thinking that if we switch to using a different HTML parser (#50), some of these issues will be fixed. I haven't had time to dedicate to testing this yet, though.

  • 👍1