JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<div id="main">
const common = {
  accent: $`F29718`,
  bg: $.base`0F1419`,
  fg: $`BFBAB0`,
  ui: $`475259`
}

const syntax = {
  tag: $`39BAE6`,
  func: $`FFB454`,
  entity: $`59C2FF`,
  string: $`C2D94C`,
  regexp: $`95E6CB`,
  markup: $`F07178`,
  keyword: $`FF7733`,
  special: $`E6B673`,
  comment: $`5C6773`,
  constant: $`FFEE99`,
  operator: $`F29668`,
  error: `FF3333`
}
</div>

CSS

#main {
  white-space: pre;
  font-size: 3em;
  color: white;
  background: #222222;
}

JavaScript

main.innerHTML = main.innerHTML.replace(/\$`(.*?)`/g, (m, code) => {
return `<span style="color: white; background: #${code}">${code}</span>`
})