rareyman / htmlbeautify Goto Github PK

View Code? Open in Web Editor NEW

212.0 212.0 46.0 40 KB

A plugin for Sublime Text that formats (indents) HTML source code. It makes code easier for humans to read.

License: Other

Python 55.58% HTML 44.42%

htmlbeautify's People

Contributors

Stargazers

Watchers

htmlbeautify's Issues

Best way to handle mixed content with PHP

Hi @rareyman

Thanks for this great ST plugin :) Loving it so far. I have one question though, what's the best way to properly indent a mix of HTML & PHP? Should I simply ignore the PHP tags?

Cheers

Refactor - new py file

Hi, thanks for code. Can u pls, refactor, so we have PY file (e.g. "html_work.py') with all text handling (e.g. def format(text, options)). So ST plugin only calls this file, no text handling inside "HtmlBeautify.py". This is good for other tools

tag_raw_flat options bug

settings

"tag_raw_flat_opening" : "<pre|<script|<style",
"tag_raw_flat_closing" : "</pre|</script|</style",

test

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .a {
            color: #2ecc71
        }
    </style>
</head>
<body>
    <pre>
    ...    
    </pre>

    <script>
        function() {
            return '...';
        }
    </script>
</body>
</html>

what i get

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .a {
            color: #2ecc71
        }
</style>
</head>
<body>
        <pre> // will keep re-indenting each time the plugin gets executed.
            ...    
    </pre>

    <script>
        function() {
            return '...';
        }
</script>
</body>
</html>

Custom ignore tags do not work

This may relate to #23, but I'm not sure. Adding {# and #} (volt comment syntax) to the set of ignored tags has no effect, however wrapping such comments with HTML comments, which are also on the list, does work. I read about switching to tags, however this does not resolve and gives the bizarre behaviour of HTML in HTML comments getting indented further and further on each format run :)

Unbind shortcut

How can I unbind the shortcut completely? I don't want to bind another sublime-command to it. I use a window resizing tool which uses this shortcut.

Thanks!

Custom indentation

This plugin indents using 4 spaces. Is it possible to set to 1 tab character instead?

custom tags

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 ?

Ignored tags aren't actually ignored

When running HTMLBeautify on the HTMLBeautifyTest.html file, with only the default settings, script and style tags are not actually ignored as they should be. Here are the settings that should ignore these elements:

"ignored_tag_opening" : "<script|<style|<!--|{\\*|<\\?php",
"ignored_tag_closing" : "</script|</style|-->|\\*}|\\?>",

And in the beautified HTMLBeautifyTest.html here are the results:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>  </title>
        <link href="css/master.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/master.css" rel="stylesheet" type="text/css" media="all"> <!-- using non-xhtml style -->
        <meta />
        <style type="text/css" media="screen">
        /* code comment */
        this.code { is: ignored; }
        see.settings {
        to: see-why;
        }
        </style>
    </head>
    <body>
        <div class="sample">
            <script type="text/javascript">
            jQuery(document).ready(function() { // code comment
            indenting(here) { is_not_touched; }
            use_other(plugins){
            to_reformat(different_languages)
            }
            });
            </script>
...

Shouldn't these blocks just be completely ignored?

I'm using Sublime Text 3 and HTMLBeautify from Package Control, looks like v0.82.

Refact problem

solved, my error, pls delete.

AREA tags not treated as self-closing

AREA tags not treated as self-closing. They indent, rather than drop to the next line.

Doesn't change anything in the open file

I installed HTMLBeautify, opened an HTML file, and ran HTMLBeautify from the Command Pallete. Nothing happened, except for a "Beautifying Entire File" in the status bar.

I tried with a clean Sublime Text profile, and got the same results. I recorded a short video demonstrating the problem.

SVG indentation seems wrong

Hey there,

Using the default settings, the indentation seems to be a bit off with inline SVG.

Before

<a class="peppermint-nav peppermint-prev" id="testimonials-arr-prev">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60px" height="80px" viewBox="0 0 50 80" xml:space="preserve">
<polyline fill="none" stroke="#424242" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" points="45.63,75.8 0.375,38.087 45.63,0.375 "/>
</svg>
</a>
<a class="peppermint-nav peppermint-next" id="testimonials-arr-next">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60px" height="80px" viewBox="0 0 50 80" xml:space="preserve">
<polyline fill="none" stroke="#424242" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" points="0.375,0.375 45.63,38.087 0.375,75.8 "/>
</svg>
</a>

After

<a class="peppermint-nav peppermint-prev" id="testimonials-arr-prev">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60px" height="80px" viewBox="0 0 50 80" xml:space="preserve">
        <polyline fill="none" stroke="#424242" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" points="45.63,75.8 0.375,38.087 45.63,0.375 "/>
        </svg>
    </a>
    <a class="peppermint-nav peppermint-next" id="testimonials-arr-next">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60px" height="80px" viewBox="0 0 50 80" xml:space="preserve">
            <polyline fill="none" stroke="#424242" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" points="0.375,0.375 45.63,38.087 0.375,75.8 "/>
            </svg>
        </a>

Expected

<!-- Below code doesn't indent well -->
<a class="peppermint-nav peppermint-prev" id="testimonials-arr-prev">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60px" height="80px" viewBox="0 0 50 80" xml:space="preserve">
        <polyline fill="none" stroke="#424242" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" points="45.63,75.8 0.375,38.087 45.63,0.375 "/>
    </svg>
</a>
<a class="peppermint-nav peppermint-next" id="testimonials-arr-next">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60px" height="80px" viewBox="0 0 50 80" xml:space="preserve">
        <polyline fill="none" stroke="#424242" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" points="0.375,0.375 45.63,38.087 0.375,75.8 "/>
    </svg>
</a>

Is there an easy way to fix this?

it suddenly stopped working.

it simply stoped working for no reason ,removed - reinstalled - removed it again and installed from here ,still nothing ,here is the console

Traceback (most recent call last):
  File "/Applications/Sublime Text.app/Contents/MacOS/sublime_plugin.py", line 549, in run_
    return self.run(edit)
  File "HTMLBeautify in /Users/Novo/Library/Application Support/Sublime Text 3/Installed Packages/HTMLBeautify.sublime-package", line 130, in run
  File "./re.py", line 161, in search
  File "./re.py", line 281, in _compile
  File "./sre_compile.py", line 491, in compile
  File "./sre_parse.py", line 747, in parse
  File "./sre_parse.py", line 359, in _parse_sub
  File "./sre_parse.py", line 485, in _parse
sre_constants.error: unexpected end of regular expression

ST3 b3065 OSX 10.9.4

HTMLBeautify not marked compatible with ST3

Thanks for merging #5 ! The Package still needs to be updated as ST3 compatible, or it won't show up in package control. I've prepared a merge request here and they like you to acknowledge the update in package control. could you add a comment? If you want to update the package control entry by yourself, feel free to do so and I will remove it from there.

Thanks!

How to beautify on save automatically?

Have a setting for number of spaces per tab

JSBeatify for example provides an option for the number of spaces per tab. I like to have 2 spaces per tab but HTMLBeautify seems to default to 4.

why i cannot find keymap files after i install htmlbeautify to sublime 3?

is this a bug?

Not un-indenting with closing comments

If a closing div has a closing comment on it like this:

</div><!-- something ends -->

HTMLBeautify will not un-indent the line.

Did not achieve the desired results

I tested the function of HTML, but not as good as the online website (http://jsbeautifier.org/) well, how should I set to achieve this effect you want?

Formating aplly on php files too.

I recently type alt+ctrl+shift+f by mistake while my php file was open and it (un)formated my php file.

HTML comments after tags causes indent to not work properly

Comments placed before or after the opening tag on the same line of the tag will cause the lines after to not be indented when they should be. (see first image)

Comments placed before or after the closing tag on the same line of the tag will cause the lines after to not be unindented when they should be. (see second image)

img 1

img 2

Concataned HTML chunk (no spaces, no end-lines) is not beautifed

I have a chunk of HTML (a div element with a lot of tags inside) from difftool. I pasted it into sublime and used HTMLBeutify. It said it's beautifying the Entire file, but the effect was none. I tried to beautify a selection and the effect was that everything besides the selection was removed.

env:
Windows 10
Sublime 3 (build 3083)
plugin version v2015.02.23.20.05.55

Default key binding overrides built-in Find & Replace

'super+alt+f' belongs to Sublime Text's built-in Find & Replace function (at least on Mac).
A different keyboard shortcut should be used.

Format on save

Is it possible to apply the formatting on save a file?

<select> bug

I found an error in the plugin.

Formatting when there is a is not done correctly.

See with input:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Select Tag Bug</title>
    </head>
    <body>
        <div>
            <label>Text</label>
            <input type="text" />
        </div>
        <div>
            <label>Text</label>
            <input type="text" />
        </div>
        <div>
            <label>Text</label>
            <input type="text" />
        </div>
        <div>
            <label>Text</label>
            <input type="text" />
        </div>
        <div>
            <label>Text</label>
            <input type="text" />
        </div>
    </body>
</html>

vs select

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Select Tag Bug</title>
    </head>
    <body>
        <div>
            <label>Text</label>
        <select></select>
    </div>
    <div>
        <label>Text</label>
    <select></select>
</div>
<div>
    <label>Text</label>
<select></select>
</div>
<div>
<label>Text</label>
<select></select>
</div>
<div>
<label>Text</label>
<select></select>
</div>
</body>
</html>

the select correct is:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Select Tag Bug</title>
    </head>
    <body>
        <div>
            <label>Text</label>
            <select></select>
        </div>
        <div>
            <label>Text</label>
            <select></select>
        </div>
        <div>
            <label>Text</label>
            <select></select>
        </div>
        <div>
            <label>Text</label>
            <select></select>
        </div>
        <div>
            <label>Text</label>
            <select></select>
        </div>
    </body>
</html>

Whenever a <select> tag appears, he steps back a tab...

This is a plugin error?

I'm using the sublime text 3.

Thanks.

Last character is deleted when indenting

The htmlprettify command delete the last character of my files. I am on OSX sublime 2
Did anyone report this before ?

Beautify on Save file

How can i make it beautify on pressing Control(cmd)+ S ?

Attribute indentation depth configuration?

Our work currently uses two tabs to indent attributes, like:

<div
        class="pant-size"
        data-whatever="things"
        data-pant-size="36">
    <p>36</p>
</div>

Another style I've seen (and we are considering switching to) is no-indentation, like:

<div
class="pant-size"
data-whatever="things"
data-pant-size="36">
    <p>36</p>
</div>

Unfortunately, HTMLBeautify indents a single tab, which doesn't fit either of these styles.

I looked around in the readme and code, and didn't see a configuration setting for indentation level of attributes. Did I miss it somewhere, or is this not an option yet?

Colgroup and Caption

Unable to beautify Table Colgroup, col and caption. Try below example.

<table class="table table-basic">
<caption>Caption here</caption>
<colgroup>
<col class="w-60" />
<col class="w-20" />
<col class="w-20" />
</colgroup>
</table>

Add title tag_pos_inline

Simply add |<title.*</title>| to tag_pos_inline - that is required for correct html markup in head (otherwise if there is title in head the whole body and head indents are broken)

Beautify on Save possible?

Is there any way to run the command on save?

Cripplingly slow performance on large HTML files

Issue description

Basically, if you try to use this plugin on a large HTML file (I'm dealing with a ~6.5 MByte file), it completely locks the editor up for long enough (multiple minutes) that I just killed the process.

Steps to reproduce the issue

Open large HTML file.
Run beautifier
Try to interact with the editor.

What's the actual result?

The entire Sublime Text editor becomes completely unresponsive, and fails to do anything.

What's the expected result?

I'd expect the beautifier to actually use a HTML parser.

STOP PARSING HTML WITH REGULAR EXPRESSIONS!

As a comparison, I shoved the HTML file in question into beautiful soup 4, and it took maybe 4 seconds to completely parse the file.

template blocks inside quotes breaks indentation

When you use a block between quotes, like the block in the action attribute of the form, indent get messed up.

<html>
    <body>
        <h1>{% block header_text %}{% endblock %}</h1>
        <form method="POST" action="{% block form_action %}{% endblock %}">
            {% csrf_token %}
            <input name="name" id="name" placeholder="Name" />
        </form>
    </body>
</html>

Beautified:

<html>
    <body>
        <h1>{% block header_text %}{% endblock %}</h1>
        <form method="POST" action="{% block form_action %}{% endblock %}">
        {% csrf_token %}
        <input name="name" id="name" placeholder="Name" />
    </form>
</body>
</html>

File being saved as filename.pretty.html

Suddenly my files are being saved as a new file after beautifying. Any way to stop this and save to current file instead?

cursor jump on formating

can this be avoided in any way ?

Long line support?

I'm actually trying to inminify html, so there are long lines (for instance, one line is 473797 characters long; my html file is about 7MB). It skips long lines, which is as documented. Is it likely that you will support beautifying long lines, or is there a better solution?
(Sublime OSX build 3083)

tag_indent "<li" also matches "<link"

Having "...|<li|..." in tag_indent also matches "<link" which is messing up the formatting by adding an extra indent. Work-around-able by using link as a void tag "<link />" however that is not exactly html5 compliant. I have switched "...|<li|..." to be "...|<li |<li>|..." in tag_indent but I'm not extremely happy with it. (It does seem to work, however).

Support c9.io

Hola,
El plugin es lo máximo, Consulta, ¿Existe para c9.io?

Error while running

Getting the following error while running this program

File "HTMLBeautify in /home/*********/.config/sublime-text-3/Installed Packages/HTMLBeautify.sublime-package", line 121, in run
  File "./re.py", line 161, in search
  File "./re.py", line 281, in _compile
  File "./sre_compile.py", line 491, in compile
  File "./sre_parse.py", line 752, in parse
sre_constants.error: unbalanced parenthesis
Writing file /home/*******/Desktop/www-far-away/fabric/app/Resources/views/base.html.twig with encoding UTF-8

<pre> tags march right with each reformat

Before

<html>
<body>
   <pre>
      x
       x
        x
   </pre>  
</body>
</html>

Reformat 1

Using "Beautify HTML" from the "Edit Menu"

<html>
   <body>
         <pre>
               x
                x
                 x
      </pre>
   </body>
</html>

The <pre> is already a little off

Reformat 2

<html>
   <body>
               <pre>
                        x
                         x
                          x
      </pre>
   </body>
</html>

My HTMLBeautify.sublime-settings are empty. Using Sublime Text 3.1.1. Build 3176.

beautify on save?

is there any way to do that?

rareyman / htmlbeautify Goto Github PK

htmlbeautify's People

Contributors

Stargazers

Watchers

Forkers

htmlbeautify's Issues

Before

After

Expected

Issue description

Steps to reproduce the issue

What's the actual result?

What's the expected result?

Before

Reformat 1

Reformat 2

Recommend Projects

Recommend Topics

Recommend Org