JSFiddle - React, Tailwind, and code Playground

by doitian

HTML

<pre><code><span class="line">(font-lock-add-keywords
</span><span class="line"> 'ruby-mode
</span><span class="line"> '(("\\(\\b\\sw[_a-zA-Z0-9]*:\\)\\(?:\\s-\\|$\\)" (1 font-lock-constant-face))))
</span></code></pre>

<p><cite><a href="https://blog.iany.me/2012/02/css-line-wrap-indicator/">CSS Line Wrap Indicator</a></cite></p>

CSS

body {
    width: 80%;
    margin: 1em auto;
}
pre, p {
    margin-bottom: 1em;
}

/* Line Markup */
pre {
    white-space: pre-wrap;
}
pre code, span.line {
    display: block;
}

/* Line height = picuture height */
span.line {
    line-height: 28px;
}

/* Indicators in :before and :after */
span.line {
    padding: 0 13px; /* 8px for indicator, 5px for space around text */
    position: relative;
}

span.line:before, span.line:after {
    background-repeat: repeat-y;
    content: "";
    display: block;
    width: 10px;
    height: 100%;
    position: absolute;
}
span.line:before {
    background-image: url("https://blog.iany.me/images/201202/line-left.png");
    left: 1px;
    top: 0;
}
span.line:after {
    background-image: url("https://blog.iany.me/images/201202/line-right.png");
    right: -1px;
    top: 0;
}

/* No left indicator on first line and no right indicator on last line */
span.line {
    overflow: hidden;
}
span.line:before {
    top: 28px;
}
span.line:after {
    top: auto;
    bottom: 28px;
}

/* Add color */

pre {
    border-style: solid;
    border-color: #EEE;
    border-width: 0 8px;
    background-color: #AAA;
}

span.line {
    margin: 0 -8px;
}