mirror of
https://github.com/beautifier/js-beautify.git
synced 2025-02-24 23:32:57 +00:00
Addtional cleanup and simplification
This commit is contained in:
parent
46786fcf1e
commit
566ad859e1
231
index.html
231
index.html
@ -66,125 +66,124 @@
|
||||
|
||||
<body>
|
||||
<h1>Online JavaScript Beautifier <span id="version-number"></span></h1>
|
||||
<div>
|
||||
<div class="col-6">
|
||||
<p>
|
||||
<a class="self" href="./">Beautify, unpack or deobfuscate JavaScript and HTML, make JSON/JSONP readable, etc.</a>
|
||||
</p>
|
||||
<p>
|
||||
All of the source code is completely free and open, available on <a href="https://github.com/beautify-web/js-beautify">GitHub</a> under MIT licence,
|
||||
<br>and we have a command-line version, python library and a <a href="https://npmjs.org/package/js-beautify">node package</a> as well.
|
||||
</p>
|
||||
<p>
|
||||
<select name="language" id="language">
|
||||
<option value="css">Beautify CSS</option>
|
||||
<option value="html">Beautify HTML</option>
|
||||
<option value="js">Beautify JavaScript</option>
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<table id="options">
|
||||
<tr>
|
||||
<td>
|
||||
<select name="tabsize" id="tabsize">
|
||||
<option value="1">Indent with a tab character</option>
|
||||
<option value="2">Indent with 2 spaces</option>
|
||||
<option value="3">Indent with 3 spaces</option>
|
||||
<option value="4">Indent with 4 spaces</option>
|
||||
<option value="8">Indent with 8 spaces</option>
|
||||
</select>
|
||||
<br>
|
||||
|
||||
<div id="about">
|
||||
<p>
|
||||
<a class="self" href="./">Beautify, unpack or deobfuscate JavaScript and HTML, make JSON/JSONP readable, etc.</a>
|
||||
</p>
|
||||
<p>
|
||||
All of the source code is completely free and open, available on <a href="https://github.com/beautify-web/js-beautify">GitHub</a> under MIT licence,
|
||||
<br>and we have a command-line version, python library and a <a href="https://npmjs.org/package/js-beautify">node package</a> as well.
|
||||
</p>
|
||||
<p>
|
||||
<select name="language" id="language">
|
||||
<option value="css">Beautify CSS</option>
|
||||
<option value="html">Beautify HTML</option>
|
||||
<option value="js">Beautify JavaScript</option>
|
||||
</select>
|
||||
</p>
|
||||
<select name="max-preserve-newlines" id="max-preserve-newlines">
|
||||
<option value="-1">Remove all extra newlines</option>
|
||||
<option value="1">Allow 1 newline between tokens</option>
|
||||
<option value="2">Allow 2 newlines between tokens</option>
|
||||
<option value="5">Allow 5 newlines between tokens</option>
|
||||
<option value="10">Allow 10 newlines between tokens</option>
|
||||
<option value="0">Allow unlimited newlines between tokens</option>
|
||||
</select>
|
||||
<br>
|
||||
|
||||
<select name="wrap-line-length" id="wrap-line-length">
|
||||
<option value="0">Do not wrap lines</option>
|
||||
<option value="40">Wrap lines near 40 characters</option>
|
||||
<option value="70">Wrap lines near 70 characters</option>
|
||||
<option value="80">Wrap lines near 80 characters</option>
|
||||
<option value="110">Wrap lines near 110 characters</option>
|
||||
<option value="120">Wrap lines near 120 characters</option>
|
||||
<option value="160">Wrap lines near 160 characters</option>
|
||||
</select>
|
||||
<br>
|
||||
|
||||
<select id="brace-style">
|
||||
<option value="collapse">Braces with control statement</option>
|
||||
<option value="expand">Braces on own line</option>
|
||||
<option value="end-expand">End braces on own line</option>
|
||||
<option value="none">Attempt to keep braces where they are</option>
|
||||
</select>
|
||||
|
||||
<p style="margin:6px 0 0 0">HTML <style>, <script> formatting:</p>
|
||||
<select id="indent-scripts">
|
||||
<option value="keep">Keep indent level of the tag</option>
|
||||
<option value="normal">Add one indent level</option>
|
||||
<option value="separate">Separate indentation</option>
|
||||
</select>
|
||||
|
||||
<p style="margin:6px 0 0 0">Additional Settings (JSON):</p>
|
||||
<textarea id="additional-options" rows="5" cols="32">{}</textarea>
|
||||
|
||||
<p id="additional-options-error" hidden style="margin:6px 0 0 0; color:red ">Could Not Parse JSON!</p>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<input class="checkbox" type="checkbox" id="end-with-newline">
|
||||
<label for="end-with-newline">End script and style with newline?</label>
|
||||
<br>
|
||||
<input class="checkbox" type="checkbox" id="e4x">
|
||||
<label for="e4x">Support e4x/jsx syntax</label>
|
||||
<br>
|
||||
<input class="checkbox" type="checkbox" id="comma-first">
|
||||
<label for="comma-first">Use comma-first list style?</label>
|
||||
<br>
|
||||
<input class="checkbox" type="checkbox" id="detect-packers">
|
||||
<label for="detect-packers">Detect packers and obfuscators?</label>
|
||||
<br>
|
||||
<input class="checkbox" type="checkbox" id="brace-preserve-inline">
|
||||
<label for="brace-preserve-inline">Preserve inline braces/code blocks?</label>
|
||||
<br>
|
||||
<input class="checkbox" type="checkbox" id="keep-array-indentation">
|
||||
<label for="keep-array-indentation">Keep array indentation?</label>
|
||||
<br>
|
||||
<input class="checkbox" type="checkbox" id="break-chained-methods">
|
||||
<label for="break-chained-methods">Break lines on chained methods?</label>
|
||||
<br>
|
||||
<input class="checkbox" type="checkbox" id="space-before-conditional">
|
||||
<label for="space-before-conditional">Space before conditional: "if(x)" / "if (x)"</label>
|
||||
<br>
|
||||
<input class="checkbox" type="checkbox" id="unescape-strings">
|
||||
<label for="unescape-strings">Unescape printable chars encoded as \xNN or \uNNNN?</label>
|
||||
<br>
|
||||
<input class="checkbox" type="checkbox" id="jslint-happy">
|
||||
<label for="jslint-happy">Use JSLint-happy formatting tweaks?</label>
|
||||
<br>
|
||||
<input class="checkbox" type="checkbox" id="indent-inner-html">
|
||||
<label for="indent-inner-html">Indent <head> and <body> sections?</label>
|
||||
<br>
|
||||
<input class="checkbox" type="checkbox" id="indent-empty-lines">
|
||||
<label for="indent-empty-lines">Keep indentation on empty lines?</label>
|
||||
<br><a href="?without-codemirror" class="turn-off-codemirror">Use a simple textarea for code input?</a>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table id="options">
|
||||
<tr>
|
||||
<td>
|
||||
<select name="tabsize" id="tabsize">
|
||||
<option value="1">Indent with a tab character</option>
|
||||
<option value="2">Indent with 2 spaces</option>
|
||||
<option value="3">Indent with 3 spaces</option>
|
||||
<option value="4">Indent with 4 spaces</option>
|
||||
<option value="8">Indent with 8 spaces</option>
|
||||
</select>
|
||||
<br>
|
||||
|
||||
<select name="max-preserve-newlines" id="max-preserve-newlines">
|
||||
<option value="-1">Remove all extra newlines</option>
|
||||
<option value="1">Allow 1 newline between tokens</option>
|
||||
<option value="2">Allow 2 newlines between tokens</option>
|
||||
<option value="5">Allow 5 newlines between tokens</option>
|
||||
<option value="10">Allow 10 newlines between tokens</option>
|
||||
<option value="0">Allow unlimited newlines between tokens</option>
|
||||
</select>
|
||||
<br>
|
||||
|
||||
<select name="wrap-line-length" id="wrap-line-length">
|
||||
<option value="0">Do not wrap lines</option>
|
||||
<option value="40">Wrap lines near 40 characters</option>
|
||||
<option value="70">Wrap lines near 70 characters</option>
|
||||
<option value="80">Wrap lines near 80 characters</option>
|
||||
<option value="110">Wrap lines near 110 characters</option>
|
||||
<option value="120">Wrap lines near 120 characters</option>
|
||||
<option value="160">Wrap lines near 160 characters</option>
|
||||
</select>
|
||||
<br>
|
||||
|
||||
<select id="brace-style">
|
||||
<option value="collapse">Braces with control statement</option>
|
||||
<option value="expand">Braces on own line</option>
|
||||
<option value="end-expand">End braces on own line</option>
|
||||
<option value="none">Attempt to keep braces where they are</option>
|
||||
</select>
|
||||
|
||||
<p style="margin:6px 0 0 0">HTML <style>, <script> formatting:</p>
|
||||
<select id="indent-scripts">
|
||||
<option value="keep">Keep indent level of the tag</option>
|
||||
<option value="normal">Add one indent level</option>
|
||||
<option value="separate">Separate indentation</option>
|
||||
</select>
|
||||
|
||||
<p style="margin:6px 0 0 0">Additional Settings (JSON):</p>
|
||||
<textarea id="additional-options" rows="5" cols="32">{}</textarea>
|
||||
|
||||
<p id="additional-options-error" hidden style="margin:6px 0 0 0; color:red ">Could Not Parse JSON!</p>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<input class="checkbox" type="checkbox" id="end-with-newline">
|
||||
<label for="end-with-newline">End script and style with newline?</label>
|
||||
<br>
|
||||
<input class="checkbox" type="checkbox" id="e4x">
|
||||
<label for="e4x">Support e4x/jsx syntax</label>
|
||||
<br>
|
||||
<input class="checkbox" type="checkbox" id="comma-first">
|
||||
<label for="comma-first">Use comma-first list style?</label>
|
||||
<br>
|
||||
<input class="checkbox" type="checkbox" id="detect-packers">
|
||||
<label for="detect-packers">Detect packers and obfuscators?</label>
|
||||
<br>
|
||||
<input class="checkbox" type="checkbox" id="brace-preserve-inline">
|
||||
<label for="brace-preserve-inline">Preserve inline braces/code blocks?</label>
|
||||
<br>
|
||||
<input class="checkbox" type="checkbox" id="keep-array-indentation">
|
||||
<label for="keep-array-indentation">Keep array indentation?</label>
|
||||
<br>
|
||||
<input class="checkbox" type="checkbox" id="break-chained-methods">
|
||||
<label for="break-chained-methods">Break lines on chained methods?</label>
|
||||
<br>
|
||||
<input class="checkbox" type="checkbox" id="space-before-conditional">
|
||||
<label for="space-before-conditional">Space before conditional: "if(x)" / "if (x)"</label>
|
||||
<br>
|
||||
<input class="checkbox" type="checkbox" id="unescape-strings">
|
||||
<label for="unescape-strings">Unescape printable chars encoded as \xNN or \uNNNN?</label>
|
||||
<br>
|
||||
<input class="checkbox" type="checkbox" id="jslint-happy">
|
||||
<label for="jslint-happy">Use JSLint-happy formatting tweaks?</label>
|
||||
<br>
|
||||
<input class="checkbox" type="checkbox" id="indent-inner-html">
|
||||
<label for="indent-inner-html">Indent <head> and <body> sections?</label>
|
||||
<br>
|
||||
<input class="checkbox" type="checkbox" id="indent-empty-lines">
|
||||
<label for="indent-empty-lines">Keep indentation on empty lines?</label>
|
||||
<br><a href="?without-codemirror" class="turn-off-codemirror">Use a simple textarea for code input?</a>
|
||||
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div>
|
||||
<button class="submit"><strong>Beautify Code</strong> <em>(ctrl-enter)</em>
|
||||
</button>
|
||||
|
||||
<div style="text-align: center;">
|
||||
<button class="submit"><strong>Beautify Code</strong> <em>(ctrl-enter)</em></button>
|
||||
<button class="control" type="button" onclick="copyText()"><strong>Copy to Clipboard</strong></button>
|
||||
<button class="control" type="button" onclick="selectAll()"><strong>Select All</strong></button>
|
||||
</div>
|
||||
@ -192,12 +191,10 @@
|
||||
<textarea id="source" rows="30" cols="160"></textarea>
|
||||
|
||||
<div style="text-align: center;">
|
||||
<button class="submit"><strong>Beautify Code</strong> <em>(ctrl-enter)</em></button>
|
||||
<button class="control" type="button" onclick="copyText()"><strong>Copy to Clipboard</strong></button>
|
||||
<button class="control" type="button" onclick="selectAll()"><strong>Select All</strong></button>
|
||||
|
||||
</div>
|
||||
<button class="submit"><strong>Beautify Code</strong> <em>(ctrl-enter)</em>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p style="margin:6px 0 0 0">Your Selected Options (JSON):</p>
|
||||
|
@ -24,8 +24,6 @@ a.turn-off-codemirror {
|
||||
}
|
||||
|
||||
button.submit {
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
}
|
||||
@ -37,8 +35,6 @@ button.submit em {
|
||||
}
|
||||
|
||||
button.control {
|
||||
width: 10%;
|
||||
padding: 5px 0;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
}
|
||||
@ -51,10 +47,6 @@ select {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
table#options {
|
||||
float: right;
|
||||
}
|
||||
|
||||
table#options td {
|
||||
vertical-align: top;
|
||||
padding-left: 10px;
|
||||
@ -65,14 +57,6 @@ table#options td {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#about {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#about p {
|
||||
margin: 0 6px 6px 0;
|
||||
}
|
||||
|
||||
#version-number {
|
||||
font-size: .5em;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user