js-beautify

by Sebastian Kay

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.0/beautify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.0/beautify-css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.0/beautify-html.min.js"></script>
<div class="container mt-5">
<select id="InputType" class="form-select mb-3" aria-label="Default select example">
  <option value="html_beautify" selected>HTML</option>
  <option value="css_beautify">CSS</option>
  <option value="js_beautify">JS</option>
</select>

  <div class="mb-3">
    <label for="exampleFormControlTextarea1" class="form-label">Input</label>
    <textarea class="form-control" id="TextInput" rows="8"></textarea>
  </div>
  <div class="mb-3">
    <label for="exampleFormControlTextarea1" class="form-label">Output</label>
    <textarea class="form-control" id="TxtOutput" rows="12"></textarea>
  </div>
</div>

JavaScript

var formattedCode,
		InputType;
document.getElementById("TextInput").onchange = function() {newTextInput()};
document.getElementById("InputType").onchange = function() {newTextInput()};

function newTextInput() {
	InputType = $('#InputType').val();
	if (InputType === "html_beautify"){
		formattedCode = html_beautify($('#TextInput').val(), {indent_size: 4});
	}else if (InputType === "css_beautify"){
		formattedCode = css_beautify($('#TextInput').val(), {indent_size: 4});
	}else if (InputType === "js_beautify"){
		formattedCode = js_beautify($('#TextInput').val(), {indent_size: 4});
	}
$('#TxtOutput').val(formattedCode);
}