JSFiddle - React, Tailwind, and code Playground

by vusan

HTML

<input type="button" onclick="copyToTextArea()" value="copy text to textarea">
<pre id="preid"><span class="pyg-cp">&lt;?xml version="1.0" encoding="ISO-8859-1" ?&gt;</span>
<span class="pyg-cp">&lt;!DOCTYPE udf SYSTEM "udf_extension.dtd"&gt;</span>
<span class="pyg-nt">&lt;extension</span> <span class="pyg-na">name=</span><span class="pyg-s">"regexp"</span> <span class="pyg-na">version=</span><span class="pyg-s">"0.9.8"</span><span class="pyg-nt">&gt;</span>

  <span class="pyg-nt">&lt;summary&gt;</span>MySQL functions emulating a subset of the Oracle REGEXP functions<span class="pyg-nt">&lt;/summary&gt;</span>

  <span class="pyg-nt">&lt;description&gt;</span>
<span class="pyg-cp">&lt;![CDATA[</span>
<span class="pyg-cp">The functions provided by this package provide a subset of the functionality</span>
<span class="pyg-cp">provided by the Oracle regular expression functions. </span>
<span class="pyg-cp">]]&gt;</span>
  <span class="pyg-nt">&lt;/description&gt;</span>

  <span class="pyg-nt">&lt;maintainer&gt;</span>
    <span class="pyg-nt">&lt;name&gt;</span>Hartmut Holzgraefe<span class="pyg-nt">&lt;/name&gt;</span>
    <span class="pyg-nt">&lt;email&gt;</span>[email protected]<span class="pyg-nt">&lt;/email&gt;</span>
  <span class="pyg-nt">&lt;/maintainer&gt;</span>

  <span class="pyg-nt">&lt;license&gt;</span>GPL<span class="pyg-nt">&lt;/license&gt;</span>

  <span class="pyg-nt">&lt;release&gt;</span>
    <span class="pyg-nt">&lt;version&gt;</span>1.0<span class="pyg-nt">&lt;/version&gt;</span>
    <span class="pyg-nt">&lt;date&gt;</span>2007-05-13<span class="pyg-nt">&lt;/date&gt;</span>
    <span class="pyg-nt">&lt;state&gt;</span>stable<span class="pyg-nt">&lt;/state&gt;</span>
    <span class="pyg-nt">&lt;notes&gt;</span>
     First sable release
    <span class="pyg-nt">&lt;/notes&gt;</span>
  <span class="pyg-nt">&lt;/release&gt;</span>

  <span class="pyg-nt">&lt;deps&gt;</span>
   <span class="pyg-nt">&lt;src/&gt;</span>
  <span...

CSS

.pyg-c {
    color: #808080;
}
.pyg-err {
    background-color: #F0A0A0;
    color: #F00000;
}
.pyg-k {
    color: #008000;
    font-weight: bold;
}
.pyg-o {
    color: #303030;
}
.pyg-cm {
    color: #808080;
}
.pyg-cp {
    color: #507090;
}
.pyg-c1 {
    color: #808080;
}
.pyg-cs {
    color: #CC0000;
    font-weight: bold;
}
.pyg-gd {
    color: #A00000;
}
.pyg-ge {
    font-style: italic;
}
.pyg-gr {
    color: #FF0000;
}
.pyg-gh {
    color: #000080;
    font-weight: bold;
}
.pyg-gi {
    color: #00A000;
}
.pyg-go {
    color: #808080;
}
.pyg-gp {
    color: #C65D09;
    font-weight: bold;
}
.pyg-gs {
    font-weight: bold;
}
.pyg-gu {
    color: #800080;
    font-weight: bold;
}
.pyg-gt {
    color: #0040D0;
}
.pyg-kc {
    color: #008000;
    font-weight: bold;
}
.pyg-kd {
    color: #008000;
    font-weight: bold;
}
.pyg-kp {
    color: #003080;
    font-weight: bold;
}
.pyg-kr {
    color: #008000;
    font-weight: bold;
}
.pyg-kt {
    color: #303090;
    font-weight: bold;
}
.pyg-m {
    color: #6000E0;
    font-weight: bold;
}
.pyg-s {
    background-color: #FFF0F0;
}
.pyg-na {
    color: #0000C0;
}
.pyg-nb {
    color: #007020;
}
.pyg-nc {
    color: #B00060;
    font-weight: bold;
}
.pyg-no {
    color: #003060;
    font-weight: bold;
}
.pyg-nd {
    color: #505050;
    font-weight: bold;
}
.pyg-ni {
    color: #800000;
    font-weight: bold;
}
.pyg-ne {
    color: #F00000;
    font-weight: bold;
}
.pyg-nf {
    color: #0060B0;
    font-weight: bold;
}
.pyg-nl {
    color: #907000;
    font-weight: bold;
}
.pyg-nn {
    color: #0E84B5;
    font-weight: bold;
}
.pyg-nt {
    color: #007000;
}
.pyg-nv {
    color: #906030;
}
.pyg-ow {
    color: #000000;
    font-weight: bold;
}
.pyg-w {
    color: #BBBBBB;
}
.pyg-mf {
    color: #6000E0;
    font-weight: bold;
}
.pyg-mh {
    color: #005080;
    font-weight: bold;
}
.pyg-mi {
    color: #0000D0;
    font-weight: bold;
}
.pyg-mo {
    color: #4000E0;
    font-weight: bold;
}
.pyg-sb {
   ...

JavaScript

function copyToTextArea() {
var thisPre=document.getElementById('preid');
thisPre.style.position="relative";

var myCode=$("#preid").text();
var textArea=document.createElement('textarea');
    textArea.value=myCode;
    textArea.rows=6;textArea.cols=40;
    textArea.setAttribute("style","position:absolute;top:0;zIndex:3");
thisPre.appendChild(textArea);
}