QWGYRzm

index.html

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

<div class="editor">
  <h2>Input</h2>
  <textarea id="editor" name="input-textarea" onchange="update(this)" placeholder="Try ^6hello world">
  </textarea>
  <ul class="examples">
    <li><button type="button" onClick="window.rainbow()">Rainbow</button>
  </ul>
</div>

<div class="output">
  <h2>Output</h2>
  <div id="results">Output</div>
</div>

qwgyrzm.markdown

QWGYRzm

A Pen by Alexander Williamson on CodePen.

License.

script.js

rainbow = () => {
  const editor = document.getElementById("editor");
  editor.innerHTML = "^1Red ^2Green ^3Orange ^4Blue ^5Aqua ^6Purple ^7White ^8Grey ^9Black";
  update(editor)
}

update = e => {
  let result = e.value;
  result = result.replace(/\^1([^\^]+)/, `<span style="color:red;">$1</span>`);
  result = result.replace(/\^2([^\^]+)/, `<span style="color:green;">$1</span>`);
  result = result.replace(/\^3([^\^]+)/, `<span style="color:orange;">$1</span>`);
  result = result.replace(/\^4([^\^]+)/, `<span style="color:blue;">$1</span>`);
  result = result.replace(/\^5([^\^]+)/, `<span style="color:aqua;">$1</span>`);
  result = result.replace(/\^6([^\^]+)/, `<span style="color:purple;">$1</span>`);
  result = result.replace(/\^7([^\^]+)/, `<span style="color:white;">$1</span>`);
  result = result.replace(/\^8([^\^]+)/, `<span style="color:grey;">$1</span>`);
  result = result.replace(/\^9([^\^]+)/, `<span style="color:black;">$1</span>`);
  document.getElementById("results").innerHTML = result;
}

style.css

.editor, .output {
  padding: 0.5em;
  margin: 0.5em;
}

.editor textarea {
  min-width: 10em;
  min-height: 10em;
}

.output #results {
  background-color: #b3b3b3;
  min-width: 10em;
  min-height: 10em;
  border: 1px solid black;
  margin: 0.5em;
  padding: 0.5em;
}