JSFiddle - React, Tailwind, and code Playground

by timmah

HTML

<p>This is some code:
    `var p = 10; #  
    `var a = 5; #   
    `var x; #   
    `x = a * p; #    
    `console.log(x); #
    All I want is for this to work!
</p>

CSS

body {
  color: #121212;
  font-family: 'Helvetica Neue', serif;
  font-weight: 300;
  letter-spacing: .25px; }

code.styled {
    display: block; /* block display style */
    margin: 2px 0 2px 2.5%;
    padding: 3px;
    width: auto;
    font-family: arial, serif;
    background-color: #f9f9f9; /* soft gray bg color */
    background-color: #fafafa;
    border: 1px solid #f5f5f5; }

JavaScript

$('p').each(function() {
var text = $(this).html(); // Grab HTML from each <p>
text = text.replace(/`/gi,"<code class='styled'>"); // Replaces every ` with <code>
text = text.replace(/#/gi,"</code>"); // Replaces every # with </code>
$(this).html(text); // Set <p> html as replaced code
});