JSFiddle - React, Tailwind, and code Playground

by Victor Melnik

HTML

<div class="backcode"><div class="php" style="font-family:monospace;"><div style="background-color: #FAFAFA;border-bottom: 1px solid #CCC;padding:3px;font-size:80%;"><a href="javascript:void(0);" onclick="return test(this, true);">[innerText]</a> | <a href="javascript:void(0);" onclick="return test(this, false);">[textContent]</a></div><ol><li class="codeline1" style="font-weight: bold;"><span class="linetext"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none;"><span style="color: #000000; font-weight: bold;">function</span> func<span style="color: blue;">(</span><span style="color: rgb(255,128,00);">$arg1</span><span style="color: blue;">)</span> <span style="color: blue;">{</span></div></span></li><li class="codeline2" style="font-weight: bold;"><span class="linetext"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none;">&nbsp; &nbsp; <span style="color: rgb(255,128,00);">$result</span> <span style="color: green;">=</span> <span style="color: #990000;">array</span> <span style="color: blue;">(</span><span style="color: #ff0000;">3</span><span style="color: green;">,</span> <span style="color: #ff0000;">2</span><span style="color: green;">,</span> <span style="color: #ff0000;">2</span><span style="color: green;">,</span> <span style="color: #ff0000;">8</span><span style="color: blue;">)</span><span style="color: green;">;</span></div></span></li><li class="codeline1" style="font-weight: bold;"><span class="linetext"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none;">&nbsp; &nbsp; <span style="color: #804040;">return</span> <span style="color: rgb(255,128,00);">$result</span><span style="color: green;">;</span></div></span></li><li class="codeline2" style="font-weight: bold;"><span class="linetext"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none;"><span style="color:...

CSS

.backcode {
    border-radius: 2px;
    background-color: #f8f8f8;
    border: 1px solid #d9d8d8;
    font: 13px monospace;
    margin: 8px 0px 8px 0px;
}

:hov .cls element.style {
    font-weight: bold;
}

.codeline1,
.codeline2 {
    margin-left: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    border-bottom: 1px solid #f3f3f3;
    border-left: 1px solid #e8e8e8;
    color: #a2a2a2;
    padding-left: 5px;
    font-size: 11px;
    font-weight: normal;
}
textarea {
    width: 50%;
}

JavaScript

function test(n, isInnerText) {
    var o = n.parentNode.nextSibling;
    
    var text = "undefined" != typeof(o.innerText) ? o.innerText : o.textContent;
    document.getElementById("result").value = text;
    
    var hexString = "";
    for (var i = 0; i < text.length; i++) {
      hex = text.charCodeAt(i).toString(16);
      hexString += ("0" + hex).slice(-2) + " - " + text.charAt(i) + "\n";
    }
    document.getElementById("resultHex").value = hexString;
}