Code Beautify, Syntaxhighlight Editor

by Sebastian Kay

HTML

<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/js-beautify/1.14.9/beautify-html.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.9/beautify-css.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.9/beautify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/htmlmixed/htmlmixed.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/css/css.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/theme/ayu-mirage.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/theme/ayu-dark.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/theme/dracula.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/javascript/javascript.js"></script>
<div class="container mx-auto">
<div class="row">

<div class="col-12 mb-3">
<div class="card">
<div class="card-body code d-flex justify-content-center" data-code-tag="HTML" >
<textarea id="htmlString" data-codemirror="true" data-codemirror-mode="htmlmixed" class="form-control"></textarea>
</div>
</div>
</div>

<div class="col-12 mb-3">
<div class="card">
<div class="card-body code d-flex justify-content-center" data-code-tag="CSS" >
<textarea id="cssString" data-codemirror="true" data-codemirror-mode="css" class="form-control"></textarea>
</div>
</div>
</div>

<div class="col-12 mb-3">
<div class="card">
<div class="card-body code d-flex...

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: ".."
    }

  }
  & .card-body::after {
		position: absolute;
		content: attr(data-code-tag);
		font-family: "consolas";
		left: auto;
		top: 5px;
		right: 5px;
		color: rgba(200, 200, 200, 0.2);
		background-color: rgba(20, 20, 20, 0.5);
		border-radius: 4px;
		padding: 2px 6px 2px 6px;
	}
	
	& .CodeMirror-gutters,
	& .CodeMirror {
		background: transparent!important;
	}
	
	& .CodeMirror {
		height: auto!important;
	}
	
	& .CodeMirror-scrollbar-filler {
		background-color: var(--dark-light-main-bg) !important;
	}
		
}

JavaScript

console.clear();
const beautifyoptions = { indent_size: 4, space_in_empty_paren: true }

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

let dataHTML = document.querySelector("body")
	.innerHTML.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,"");
let dataJS = document.querySelector("body > script").innerHTML;
let dataCSS = document.querySelector("#compiled-css").innerHTML;

fetch("https://rentry.co/html-css-js-test")
	.then(function (response) {
		return response.text();
	})
	.then(function (html) {
		let parser = new DOMParser();
		let doc = parser.parseFromString(html, "text/html");
		let html_code = doc.querySelector("article > div > div.codeblock:nth-child(1) td.code > .highlight > pre").textContent
		let css_code = doc.querySelector("article > div > div.codeblock:nth-child(2) td.code > .highlight > pre").textContent
		let js_code = doc.querySelector("article > div > div.codeblock:nth-child(3) td.code > .highlight > pre").textContent
		
		//console.log(html_code)
		htmlString.value = html_code
		cssString.value = css_code
		jsString.value = js_code
		
		
		CodeMirrorTextareas = document.querySelectorAll("textarea[data-codemirror]")
		CodeMirrorTextareas.forEach((cm) => {
			const cm_mode = cm.getAttribute("data-codemirror-mode")
			CodeMirror.fromTextArea(cm, {
				name: cm_mode,
				mode: cm_mode,
				theme: 'ayu-mirage',
				lineNumbers: true
			})
		})
	})
	.catch(function (err) {
		console.warn("Something went wrong.",...