beautify.js

by Sebastian Kay

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.9/beautify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.9/beautify-css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.9/beautify-html.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.3.1/darkly/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/atom-one-dark.min.css">
<div class="container mx-auto">
<div class="row">
<div class="col-12 mb-3">
<div class="card">
<div class="card-body d-flex justify-content-center">
<textarea id="jsString" class="form-control" placeholder="Copy-paste your JavaScript here"></textarea>
</div>
</div>
</div>
<div class="col-12 mb-3">
<div class="card">
<div class="card-body d-flex justify-content-center">
<textarea id="cssString" class="form-control" placeholder="Copy-paste your JavaScript here"></textarea>
</div>
</div>
</div>
<div class="col-12 mb-3">
<div class="card">
<div class="card-body d-flex justify-content-center">
<textarea id="htmlString" class="form-control" placeholder="Copy-paste your JavaScript here"></textarea>
</div>
</div>
</div>

</div>
</div>

CSS

:root{--dark-main-bg:0c0c1d;--dark-light-main-bg:color-mix(in srgb,rgb(var(--dark-main-bg-rgb)) 90%,white);--dark-lighter-main-bg:color-mix(in srgb,rgb(var(--dark-main-bg-rgb)) 80%,white);--dark-main-bg-rgb:12,12,29;--dark2-main-bg:color-mix(in srgb,rgb(var(--dark-main-bg-rgb)) 94%,white);--dark3-main-bg:color-mix(in srgb,rgb(var(--dark-main-bg-rgb)) 98%,white);--darker-main-bg-rgb:8,8,21}::-webkit-scrollbar{width:16px}::-webkit-scrollbar-track{background:var(--dark-light-main-bg) !important;border-radius:0 !important}::-webkit-scrollbar-thumb{background:var(--dark2-main-bg) !important;border-radius:0 !important}::-webkit-scrollbar-thumb:hover{background:var(--dark3-main-bg) !important}

body {
  background: rgba(var(--dark-main-bg-rgb), 1) !important;
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
  min-height: 100vh;
}

.card {
  background-color: rgba(var(--darker-main-bg-rgb), 1) !important;

  & .card-body {

    & .form-control,
    & .form-select {
      background-color: rgba(var(--darker-main-bg-rgb), 1) !important;
      color: var(--bs-light);
    }

    & textarea.form-control {
      height: 180px !important;
      width: calc(100% - var(--bs-card-spacer-x) - var(--bs-card-spacer-x));
      /*resize: none;*/
    }

    & textarea.form-control::-webkit-resizer {
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      background-color: rgba(var(--darker-main-bg-rgb), 1) !important;
      content: ".."
    }

  }
}

JavaScript

console.clear();

const jsString = document.getElementById('jsString');
const cssString = document.getElementById('cssString');
const htmlString = document.getElementById('htmlString');

const options = { indent_size: 4, space_in_empty_paren: true }
const dataObj = {completed: false,id: 1,title: "delectus aut autem",userId: 1,}
const dataJson = document.querySelector("body > script").innerHTML;
const dataCss = document.querySelector("#compiled-css").innerHTML;
const dataHTML = document.querySelector("body").innerHTML;
	
jsString.value = js_beautify(dataJson, options);
cssString.value = css_beautify(dataCss, options);
htmlString.value = html_beautify(dataHTML.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,""), options);