JSFiddle - React, Tailwind, and code Playground

by qunzorez

HTML

<div class="code-inner">
  <div class="code-wrap">
    <pre>
<code>
° Vivamus feugiat quam sed ipsum varius aliquam.
° In ac augue eu leo dignissim cursus hendrerit sed nulla.
° Sed dapibus justo id lectus rhoncus pulvinar.
° Aliquam sit amet enim ut nisl gravida lobortis.
° Nunc a sapien non lorem mollis viverra.
° Donec feugiat nunc quis condimentum feugiat.
</code>
</pre>
  </div>
</div>

CSS

.code-wrap {
  position: relative;
  width: 80%;
}

pre {
  overflow: auto;
  margin: 0 0 1em;
  padding: .5em 2em;
  white-space: pre-line;
}

.code-inner {
  max-width: 80%;
}

.code-wrap {
  background: linear-gradient(to right, #264567 60px, #73b9ff 0% 80%);
  width: 100%;
  height: 200px;
  padding: 20px 10px;
  border-radius: 5px;
  box-shadow: 0 0 18px -7px #000;
  overflow-y: scroll;
}

pre code,
pre .line-number {
  font: normal normal 16px/14px Lato, "Courier New", Courier, Monospace;
  color: black;
  display: block;
  line-height: 30px;
}

pre .line-number {
  float: left;
  margin: 0 1em 0 -1em;
  text-align: right;
  color: #fff;
}

pre .line-number span {
  display: block;
  padding: 0 .5em 0 1em;
}

pre .cl {
  display: block;
  clear: both;
}

/* Vertical Scroll */
.code-wrap::-webkit-scrollbar {
  width: 4px;
}

/* Track */
.code-wrap::-webkit-scrollbar-track {
  border-radius: 10px;
  margin: 10px;
}

/* Handle */
.code-wrap::-webkit-scrollbar-thumb {
  background: #fff;
  border-right: 4px #555555 solid;
}

JavaScript

function preformatted() {
var pre = document.getElementsByTagName('pre'), pl = pre.length;
if(jQuery(pre).find('.line-number').length){
  return;
}
for (var i = 0; i < pl; i++) {

  pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';
  var num = pre[i].innerHTML.split(/\n/).length;
  for (var j = 0; j < num; j++) {
    var line_num = pre[i].getElementsByTagName('span')[0];
    line_num.innerHTML += '<span>' + (j + 1) + '</span>';
  }
  console.log(pre[i])
}
}

//preformatted();

$( "pre" ).each(function( index, data ) {
var pre = $(this).text().split("°").length
 for (var j = 0; j < pre; j++) {
 console.log([j])
  $(this).append('<span class="line-number"></span>'+[j]+'<span class="cl"></span>')
 }
  console.log($(this).text().split("°").length)
  console.log()
 
});