JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<p>Perform the following commands:
   <code>&gt; cd /foo</code><code class="jim">&gt; adb shell</code><code># ps</code>
</p>

<p>If you go to your <code>C:\</code> directory and run <code>dir</code> …</p>

CSS

code {
    color: #000;
    background-color: #ddd;
    font-family: mono;
    font-size: 0.8em;
}
.block {
    display: block;
    white-space: pre;
    padding: 0.2em 0;
    margin: 0 auto;
    width: 80%;
}
.inline {
    padding: 0 0.2em;
}

JavaScript

function addClass(elem,newClass){
    if (!elem) {
        return false;
    }
    else {
        var curClass = elem.className;
        if (curClass.length){
            return curClass + ' ' + newClass;
        }
        else {
            return newClass;
        }
    }
}
var codes = document.getElementsByTagName('code');

for (var i=0, len=codes.length; i<len; i++){
    var cur = codes[i];
    codes[i].className = cur.previousSibling == codes[i-1] || cur.nextSibling == codes[i+1]? addClass(cur,'block') : addClass(cur,'inline');
}