rareyman / htmlbeautify Goto Github PK
View Code? Open in Web Editor NEWA plugin for Sublime Text that formats (indents) HTML source code. It makes code easier for humans to read.
License: Other
A plugin for Sublime Text that formats (indents) HTML source code. It makes code easier for humans to read.
License: Other
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
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
settings
"tag_raw_flat_opening" : "<pre|<script|<style",
"tag_raw_flat_closing" : "</pre|</script|</style",
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.a {
color: #2ecc71
}
</style>
</head>
<body>
<pre>
...
</pre>
<script>
function() {
return '...';
}
</script>
</body>
</html>
<!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>
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 :)
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!
This plugin indents using 4 spaces. Is it possible to set to 1 tab character instead?
<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 ?
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.
solved, my error, pls delete.
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.
Hey there,
Using the default settings, the indentation seems to be a bit off with inline SVG.
<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>
<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>
<!-- 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 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
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!
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.
is this a bug?
If a closing div has a closing comment on it like this:
</div><!-- something ends -->
HTMLBeautify will not un-indent the line.
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?
I recently type alt+ctrl+shift+f by mistake while my php file was open and it (un)formated my php file.
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)
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
'super+alt+f'
belongs to Sublime Text's built-in Find & Replace function (at least on Mac).
A different keyboard shortcut should be used.
Is it possible to apply the formatting on save a file?
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.
The htmlprettify command delete the last character of my files. I am on OSX sublime 2
Did anyone report this before ?
How can i make it beautify on pressing Control(cmd)+ S ?
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?
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>
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)
Is there any way to run the command on save?
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.
The entire Sublime Text editor becomes completely unresponsive, and fails to do anything.
I'd expect the beautifier to actually use a HTML parser.
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.
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>
Suddenly my files are being saved as a new file after beautifying. Any way to stop this and save to current file instead?
can this be avoided in any way ?
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)
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).
Hola,
El plugin es lo máximo, Consulta, ¿Existe para c9.io?
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
<html>
<body>
<pre>
x
x
x
</pre>
</body>
</html>
Using "Beautify HTML" from the "Edit Menu"
<html>
<body>
<pre>
x
x
x
</pre>
</body>
</html>
The <pre>
is already a little off
<html>
<body>
<pre>
x
x
x
</pre>
</body>
</html>
My HTMLBeautify.sublime-settings
are empty. Using Sublime Text 3.1.1. Build 3176.
is there any way to do that?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.