Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/staging/main' into staging/release
Browse files Browse the repository at this point in the history
  • Loading branch information
GitHub Action committed Aug 7, 2022
2 parents 2eb37aa + b7917f4 commit eb4767b
Show file tree
Hide file tree
Showing 11 changed files with 1,580 additions and 1,193 deletions.
6 changes: 6 additions & 0 deletions CHANGELOG.md
View file
@@ -1,5 +1,11 @@
# Changelog

## v1.14.5
* Dependency updates and UI tweaks ([#2088](https://github.com/beautify-web/js-beautify/pull/2088))
* Bump terser from 5.12.1 to 5.14.2 ([#2084](https://github.com/beautify-web/js-beautify/pull/2084))
* new layout breaks everything on long lines ([#2071](https://github.com/beautify-web/js-beautify/issues/2071))
* Dark mode ([#2057](https://github.com/beautify-web/js-beautify/issues/2057))

## v1.14.4
* Extra space before `!important` added ([#2056](https://github.com/beautify-web/js-beautify/issues/2056))
* css format removes space after quoted value ([#2051](https://github.com/beautify-web/js-beautify/issues/2051))
Expand Down
28 changes: 14 additions & 14 deletions README.md
View file
Expand Up @@ -26,7 +26,7 @@ If you are interested, please take a look at the [CONTRIBUTING.md](https://githu

# Installation

You can install the beautifier for node.js or python.
You can install the beautifier for Node.js or Python.

## Node.js JavaScript

Expand Down Expand Up @@ -58,13 +58,13 @@ JS Beautifier is hosted on two CDN services: [cdnjs](https://cdnjs.com/libraries

To pull the latest version from one of these services include one set of the script tags below in your document:
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.4/beautify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.4/beautify-css.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.4/beautify-html.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.5/beautify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.5/beautify-css.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.5/beautify-html.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.4/beautify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.4/beautify-css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.4/beautify-html.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.5/beautify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.5/beautify-css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.5/beautify-html.min.js"></script>
```

Older versions are available by changing the version number.
Expand All @@ -85,7 +85,7 @@ $ pip install cssbeautifier
```

# Usage
You can beautify javascript using JS Beautifier in your web browser, or on the command-line using node.js or python.
You can beautify JavaScript using JS Beautifier in your web browser, or on the command-line using Node.js or Python.

## Web Browser
Open [beautifier.io](https://beautifier.io/). Options are available via the UI.
Expand All @@ -101,7 +101,7 @@ When installed globally, the beautifier provides an executable `js-beautify` scr
$ js-beautify foo.js
```

To use `js-beautify` as a `node` library (after install locally), import and call the appropriate beautifier method for javascript (js), css, or html. All three method signatures are `beautify(code, options)`. `code` is the string of code to be beautified. options is an object with the settings you would like used to beautify the code.
To use `js-beautify` as a `node` library (after install locally), import and call the appropriate beautifier method for JavaScript (JS), CSS, or HTML. All three method signatures are `beautify(code, options)`. `code` is the string of code to be beautified. options is an object with the settings you would like used to beautify the code.

The configuration option names are the same as the CLI names but with underscores instead of dashes. For example, `--indent-size 2 --space-in-empty-paren` would be `{ indent_size: 2, space_in_empty_paren: true }`.

Expand Down Expand Up @@ -130,7 +130,7 @@ To use `jsbeautifier` as a library is simple:

```python
import jsbeautifier
res = jsbeautifier.beautify('your javascript string')
res = jsbeautifier.beautify('your JavaScript string')
res = jsbeautifier.beautify_file('some_file.js')
```

Expand All @@ -140,7 +140,7 @@ res = jsbeautifier.beautify_file('some_file.js')
opts = jsbeautifier.default_options()
opts.indent_size = 2
opts.space_in_empty_paren = True
res = jsbeautifier.beautify('some javascript', opts)
res = jsbeautifier.beautify('some JavaScript', opts)
```

The configuration option names are the same as the CLI names but with underscores instead of dashes. The example above would be set on the command-line as `--indent-size 2 --space-in-empty-paren`.
Expand Down Expand Up @@ -188,7 +188,7 @@ Beautifier Options:
-C, --comma-first Put commas at the beginning of new line instead of end
-O, --operator-position Set operator position (before-newline|after-newline|preserve-newline) [before-newline]
--indent-empty-lines Keep indentation on empty lines
--templating List of templating languages (auto,django,erb,handlebars,php,smarty) ["auto"] auto = none in JavaScript, all in html
--templating List of templating languages (auto,django,erb,handlebars,php,smarty) ["auto"] auto = none in JavaScript, all in HTML
```

Which correspond to the underscored option keys for both library interfaces
Expand Down Expand Up @@ -251,7 +251,7 @@ Configuration sources provided earlier in this stack will override later ones.

The settings are a shallow tree whose values are inherited for all languages, but
can be overridden. This works for settings passed directly to the API in either implementation.
In the Javascript implementation, settings loaded from a config file, such as .jsbeautifyrc, can also use inheritance/overriding.
In the JavaScript implementation, settings loaded from a config file, such as .jsbeautifyrc, can also use inheritance/overriding.

Below is an example configuration tree showing all the supported locations
for language override nodes. We'll use `indent_size` to discuss how this configuration would behave, but any number of settings can be inherited or overridden:
Expand Down Expand Up @@ -397,4 +397,4 @@ Thanks also to Jason Diamond, Patrick Hof, Nochum Sossonko, Andreas Schneider, D
Vasilevsky, Vital Batmanov, Ron Baldwin, Gabriel Harrison, Chris J. Shull,
Mathias Bynens, Vittorio Gambaletta and others.
(README.md: js-beautify@1.14.4)
(README.md: js-beautify@1.14.5)
62 changes: 39 additions & 23 deletions index.html
View file
Expand Up @@ -39,6 +39,7 @@

<!-- Codemirror from https://cdnjs.com/libraries/codemirror -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css" integrity="sha256-vZ3SaLOjnKO/gGvcUWegySoDU6ff33CS5i9ot8J9Czk=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/theme/darcula.min.css" integrity="sha256-ZzdkdGSdYSUv4R77x7A5G7EeFDLMhAiCybNBNxNoxos=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.js" integrity="sha256-dPTL2a+npIonoK5i0Tyes0txCMUWZBf8cfKRfACRotc=" crossorigin="anonymous"></script>

<!-- Codemirror Modes -->
Expand Down Expand Up @@ -69,28 +70,40 @@
<body class="container">

<div class="title">
<h1 class="logo"><img alt="js-beautify" src="web/banner-light.svg" height="54px" /> <span id="version-number"></span></h1>
<h1 class="logo">
<img alt="js-beautify" src="web/banner-light.svg" height="54px" />
<span id="version-number"></span>
</h1>
<div class="sub-title">
<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, <a href="https://pypi.org/project/jsbeautifier/">python library</a> and a <a href="https://npmjs.org/package/js-beautify">node package</a> as well.
<strong>Beautify JavaScript, JSON, React.js, HTML, CSS, SCSS, and SASS</strong>
</p>
</div>
</div>

<div class="options">
<h1>Options</h1>
<div id="theme-toggle-wrapper">
<label id="theme-toggle-label" for="theme-toggle-btn">
<input type="checkbox" id="theme-toggle-btn" style="display: none" />
<div id="theme-toggle-slider"></div>
</label>
<span>Enable Dark Mode</span>
</div>
<select name="language" id="language">
<option value="css">Beautify CSS</option>
<option value="html">Beautify HTML</option>
<option value="js">Beautify JavaScript</option>
</select>

<h2>Config Options</h2>
<div class="buttons-box">
<button class="submit"><strong>Beautify Code</strong> <em>(ctrl&#8209;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>
<button class="control" type="button" onclick="clearAll()"><strong>Clear</strong></button>
<input type="file" onchange="changeToFileContent(this)">
</div>

<div class="config-options">
<h2>Options</h2>
<div id="options">

<div class="options-select">
Expand Down Expand Up @@ -175,32 +188,35 @@ <h2>Config Options</h2>

<div>
<p style="margin:6px 0 0 0">Additional Settings (JSON):</p>
<textarea id="additional-options" rows="5" style="width: 100%">{}</textarea>
<textarea id="additional-options" rows="5">{}</textarea>
</div>
<p id="additional-options-error" hidden style="margin:6px 0 0 0; color:red ">Could Not Parse JSON!</p>
<p style="margin:6px 0 0 0">Your Selected Options (JSON):</p>
<div>
<textarea readonly id="options-selected" rows="5" style="width: 100%"></textarea>
<textarea readonly id="options-selected" rows="5"></textarea>
</div>
</div>
</div>
<div class="buttons-box">
<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>
<button class="control" type="button" onclick="clearAll()"><strong>Clear</strong></button>
<input type="file" onchange="changeToFileContent(this)">
<button class="submit"><strong>Beautify Code</strong> <em>(ctrl-enter)</em></button>
</div>

<div class="contributions">
<p class="contributor-sep">Written by <a href="https://github.com/einars">Einar Lielmanis</a>, maintained and evolved by <a href="https://github.com/bitwiseman/">Liam Newman</a>.</p>
<p class="contributor-sep">Created by <a href="https://github.com/einars">Einar Lielmanis</a>, maintained and evolved by <a href="https://github.com/bitwiseman/">Liam Newman</a>.</p>
</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,
and we have a command-line version, <a href="https://pypi.org/project/jsbeautifier/">python library</a> and a <a href="https://npmjs.org/package/js-beautify">node package</a> as well.
</p>
<p>We use the wonderful <a href="http://codemirror.net">CodeMirror</a> syntax highlighting editor, written by Marijn Haverbeke.</p>
<p class="contributors">Made with a great help of Jason&nbsp;Diamond, Patrick&nbsp;Hof, Nochum&nbsp;Sossonko, Andreas&nbsp;Schneider,
<br>Dave&nbsp;Vasilevsky,
<a href="https://moikrug.ru/vital">Vital&nbsp;Batmanov</a>, Ron&nbsp;Baldwin, Gabriel&nbsp;Harrison,
<p class="contributors">Made with a great help of many contributors. Special thanks to:<br>
Jason&nbsp;Diamond,
Patrick&nbsp;Hof,
Nochum&nbsp;Sossonko,
Andreas&nbsp;Schneider,
Dave&nbsp;Vasilevsky,
<a href="https://moikrug.ru/vital">Vital&nbsp;Batmanov</a>,
Ron&nbsp;Baldwin,
Gabriel&nbsp;Harrison,
<a href="http://shullian.com">Chris J. Shull</a>,
<a href="http://mathiasbynens.be/">Mathias Bynens</a>,
<br>
<a href="https://www.vittgam.net/">Vittorio Gambaletta</a>,
<a href="https://github.com/esseks">Stefano Sanfilippo</a> and
<a href="https://github.com/evocateur">Daniel Stockman</a>.
Expand Down

0 comments on commit eb4767b

Please sign in to comment.