JSFiddle - React, Tailwind, and code Playground

by joshdavenport

HTML

<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<link rel="stylesheet" href="https://jmblog.github.io/color-themes-for-google-code-prettify/themes/tomorrow-night-blue.css">
<body>
  <pre id="pre">
    &lt;script type=&quot;text/javascript&quot;&gt;
    // Say hello world until the user starts questioning
    // the meaningfulness of their existence.
    function helloWorld(world) {
      for (var i = 42; --i &gt;= 0;) {
        alert('Hello ' + String(world));
      }
    }
    &lt;/script&gt;
    &lt;style&gt;
    p { color: pink }
    b { color: blue }
    u { color: &quot;umber&quot; }
    &lt;/style&gt;
</pre>


<button id="button">My button</button>
</body>

JavaScript

$(document).ready(function() {

  $("#button").on("click", function() {
    // Cache jquery object
    var $pre = $("#pre");
    // If the element has a prettyprint class, it's already been manually
    // prettified
    if (!$pre.hasClass("prettyprint")) {
      // Element hasn't been prettified, store the html in jQuery data
      $pre.data("original-html", $pre.html());
      // Manually prettify
      $pre.html(PR.prettyPrintOne($pre.html(), "html", true))
        .addClass("prettyprint");
    } else {
      // Element has been prettified, restore the orginal html stored in jQuery
      // data and remove the prettyprint class, back to where we started
      $pre.html($pre.data("original-html"))
        .removeClass("prettyprint");
      // Remove the jQuery data entry for our original HTML, so next time we
      // start fresh
      $pre.data("original-html", null);
    }
  });

});