JSFiddle - React, Tailwind, and code Playground

by aljordan82

HTML

<script src="http://codemirror.net/lib/codemirror.js"></script>
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<script src="http://codemirror.net/mode/xml/xml.js"></script>
 

    <style type="text/css">

    </style>
       <style id="markerStyle" type="text/css">
 
    </style>
  </head>
  <body>
    <h1>CodeMirror:Hide Markers</h1>

    <form><textarea id="code" name="code">
<?xml version="1.0"?>
<catalog>
   <book id="bk101">
      <author>Gambardella, Matthew</author>
      <title>XML Developer's Guide</title>
      <genre>Computer</genre>
      <price>44.95</price>
      <publish_date>2000-10-01</publish_date>
      <description>An in-depth look at creating applications 
      with XML.</description>
   </book>
   <book id="bk102">
      <author>Ralls, Kim</author>
      <title>Midnight Rain</title>
      <genre>Fantasy</genre>
      <price>5.95</price>
      <publish_date>2000-12-16</publish_date>
      <description>A former architect battles corporate zombies, 
      an evil sorceress, and her own childhood to become queen 
      of the world.</description>
   </book>
   <book id="bk103">
      <author>Corets, Eva</author>
      <title>Maeve Ascendant</title>
      <genre>Fantasy</genre>
      <price>5.95</price>
      <publish_date>2000-11-17</publish_date>
      <description>After the collapse of a nanotechnology 
      society in England, the young survivors lay the 
      foundation for a new society.</description>
   </book>
   <book id="bk104">
      <author>Corets, Eva</author>
      <title>Oberon's Legacy</title>
      <genre>Fantasy</genre>
      <price>5.95</price>
      <publish_date>2001-03-10</publish_date>
      <description>In post-apocalypse England, the mysterious 
      agent known only as Oberon helps to create a new life 
      for the inhabitants of London. Sequel to Maeve 
      Ascendant.</description>
   </book>
   <book id="bk105">
      <author>Corets, Eva</author>
      <title>The Sundered Grail</title>
...

CSS

.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
      dt {font-family: monospace; color: #666;}

JavaScript

$(document).ready(function() {
    
    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        mode: "text/html",
        lineNumbers: true,
        onCursorActivity: function() {},
        readOnly :true
        
    });

    $("#readonly").click(function() { 
        
                 var curPosition = editor.getCursor();
        editor.replaceRange("testing",  curPosition, curPosition,"fffff")
    });


    $("#editable").click(function() {
        editor.options.readOnly = false;
    });
});