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.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-html.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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/javascript/javascript.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">
<div class="container mx-auto">
  <div class="row">
    <div class="col-12 mb-3">
      <div class="card">
        <div
          class="card-body code d-flex"
          data-code-tag="HTML"
        >
          <textarea
            id="htmlString"
            data-codemirror="false"
            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"
          data-code-tag="CSS"
        >
          <textarea
            id="cssString"
            data-codemirror="false"
   ...

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(255, 255, 255, 0.2);
		background: rgba(var(--dark-main-bg-rgb), 1) !important;
		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)...

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')

const fetchURL = ["https://rentry.co/html-css-js-test", "https://rentry.co/zupmyy5c"]

fetch(fetchURL[0])
	.then(function (response) {
		return response.text()
	})
	.then(function (html) {
		let parser = new DOMParser()
		let doc = parser.parseFromString(html, "text/html")
		
		let html_code = "" //doc.querySelectorAll(".clippy")[0].getAttribute("value")
		let css_code = "" //doc.querySelectorAll(".clippy")[1].getAttribute("value")
		let js_code = "" //doc.querySelectorAll(".clippy")[2].getAttribute("value")

		const clippy_length = doc.querySelectorAll(".clippy").length
		if (clippy_length >= 0) {
			html_code = doc.querySelectorAll(".clippy")[0].getAttribute("value")
			
			if (html_code != "none") {
				htmlString.value = html_code
				htmlString.setAttribute("data-codemirror", "true")
			}
			if (clippy_length >= 1) {
				css_code = doc.querySelectorAll(".clippy")[1].getAttribute("value")
				if (css_code != "none") {
					cssString.value = css_code
					cssString.setAttribute("data-codemirror", "true")
				}
				if (clippy_length >= 2) {
					js_code = doc.querySelectorAll(".clippy")[2].getAttribute("value")
					if (js_code != "none") {
						jsString.value = js_code
						jsString.setAttribute("data-codemirror", "true")
					
					}
					//"none"!=js_code&&(jsString.value=js_code,jsString.style.display="")
				}
			}
		}
		
		CodeMirrorTextareas = document.querySelectorAll("textarea[data-codemirror=\"true\"]")
		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.",...