JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://codemirror.net/mode/sql/sql.js"></script>
<link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
This is some text first...<br />
Now show code:<br />
<pre class="code" data-code-mode="text/x-plsql">DECLARE
  l_data VARCHAR2(32767);
BEGIN
  NULL;
END;</pre>
More text below code block.<br />
now using a div for code:<br />
<div class="code" data-code-mode="text/x-plsql">SELECT user
  FROM dual;</div>
Nice, isn't it?<br />
Finally some code without line numbers <span class="code nolinenumbers" data-code-mode="text/x-plsql">SELECT * FROM emp;</span> where we just select everything from the famous emp table.

CSS

.CodeMirror {
    height: auto!important;   
}

JavaScript

$(document).ready(function()
{
  $(".code").each(function() 
  { 
    var myThis = $(this);
    var myCode = myThis.html();
    var myMode = myThis.attr("data-code-mode");
    $(this).empty();
    CodeMirror(
      this,
      {
        value: myCode,
        mode: myMode,
        lineNumbers: !$(this).is('.nolinenumbers'),
        readOnly: true
      }  
    );
  });    
});