JSFiddle - React, Tailwind, and code Playground

by Nikolai L'Estrange

HTML

<h1>a</h1>
<h2>Anchor Element</h2>

<span class="example add">
    <h3>Common Uses:</h3>
    
    <span class="element">a <span class="attribute">href</span>=<span class="value">”http://website.com”</span></span>Visit Website<span class="element">/a</span>
    <br/>
    <span class="element">a <span class="attribute">href</span>=<span class="value">”#top”</span></span>Back to Top<span class="element">/a</span>
</span>


<span class="example">
    <h3>Common Uses:</h3>
    <pre class="prettyprint html">
        <a href="http://website.com">Visit Website</a>
        <a href="#top">Back to Top</a>
    </pre>
</span>

CSS

body {
    padding: 20px;
    font-family: consolas, monaco, monospace;
    font-size: 100%;
}

h1 {font-size: 3em;line-height: 1em;}
h1:before {content:"<"}
h1:after {content:">"}
h2 {
    font-size: 1.6em;
    color: #666;
}

.example {
    display: block;
    margin: 1em 0em;
    padding: 0.6em;
    background: #eee;
    border: 0.4em solid #eee;
}
.example:hover {
    background: #f5f5f5;
}
.example h3 {
    margin-bottom: 0.3em;
}

pre.prettyprint {
    margin: 0em;
    padding: 0em;
    whitespace: pre-line !important;
}
.element {color:#9b2c90}
.attribute {color:#b15714}
.value {color: #2736b1}

.add .element:before {content: "<"}
.add .element:after {content: ">"}

JavaScript

$(document).ready(function() {
    
    $('.prettyprint.html').each(function() {
        $(this).html(htmlPretty($(this).html()));        
        
    });
});

function htmlPretty(str){
//debugger;
    str = str.replace(/<([^>]+)>/gm,'<span class="element">&lt;$1~</span>');
        
   str = str.replace(/&lt;([^~]+) ([^~]+)>/gm, '&lt;$1 <span class="attribute">$2</span>&gt;');
   
   str = str.replace(/~/g,'&gt;');
        
        
        return str
}