JSFiddle - React, Tailwind, and code Playground

by elclanrs

HTML

<script src="https://raw.github.com/ccampbell/rainbow/master/js/rainbow.min.js"></script>
<script src="https://raw.github.com/ccampbell/rainbow/master/js/language/css.js"></script>
<pre class="rainbow"><code data-language="CSS">body {
  font-size: @font-size;
  text-align: justify;
  line-height: 1.6;

  font-family: 'Georgia';

  color: @dark;
  background-color: @light;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Open Sans';
  text-transform: uppercase;
  font-weight: 800;
}</code></pre>

<h2>Try copying and pasting the code here</h2>

<textarea></textarea>

CSS

/**
 * Obsidian theme
 *
 * Adapted from a theme based on:
 * http://studiostyl.es/schemes/son-of-obsidian
 *
 * @author Dan Stewart <[email protected]>
 * @version 1.0
 */
.lines {
    float: left;
    padding-right: 1.5em;
    padding-left: .5em;
}
pre {
    background: #22282A;
    word-wrap: break-word;
    margin: 0px;
    padding: 0px;
    padding: 10px;
    color: #F1F2F3;
    font-size: 14px;
    margin-bottom: 20px;
}

pre, code {
    font-family: 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', 'Monaco', Courier, monospace !important
}

pre .comment {
    color: #66747B;
}

pre .constant {
    color: #EC7600;
}

pre .storage {
    color: #EC7600;
}

pre .string, pre .comment.docstring {
    color: #EC7600;
}

pre .string.regexp, pre .support.tag.script, pre .support.tag.style {
    color: #fff;
}


pre .keyword, pre .selector {
    color: #93C763;
}

pre .inherited-class {
    font-style: italic;
}

pre .entity {
    color: #93C763;
}

pre .integer {
    color: #FFCD22;
}

pre .support, *[data-language="csharp"] .function.call {
    color: #FACD22;
}

pre .variable.global, pre .variable.class, pre .variable.instance {
    color: #CCC;
}

/* C# specific rule */
pre .preprocessor {
    color: #66747B;
}

@import 'css/normalize.css';

@import 'fonts/Open Sans/font.css';

@import 'fonts/Playfair Display/font.css';
.centered {
  margin-left: auto;
  margin-right: auto;
}
.monospace {
  font-family: 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', 'Monaco', Courier, monospace !important;
}
body {
  font-size: 1em;
  text-align: justify;
  line-height: 1.6;
  font-family: 'Georgia';
  color: #383838;
  background-color: #f2f2f2;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Open Sans';
  text-transform: uppercase;
  font-weight: 800;
}
a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  color: #e05c5c;
}
a:hover {
  color: #e77e7e;
  border-bottom: 1px dotted #e05c5c;
}
a.anchor {
  float: right;
  width: 1.2em;
  vertical-align: middle;
 ...

JavaScript

if (window.Rainbow) window.Rainbow.linecount = (function(Rainbow) {
    Rainbow.onHighlight(function(block) {
        var lines = $(block).text().split('\n');
        var $lines = $('<ul class="lines"/>');
        for (var i = 0, len = lines.length; i < len; i++) {
            $lines.append('<li class="line"' + i + '>' + i + '</li>');
        }
        $(block).before($lines);
    });
})(window.Rainbow);