JSFiddle - React, Tailwind, and code Playground

by aljordan82

HTML

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CodeMirror: Markers</title>
    <link rel="stylesheet" href="../lib/codemirror.css">
    <script src="../lib/codemirror.js"></script>
    <script src="../mode/xml/xml.js"></script>
 

    <style type="text/css">
      .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
      dt {font-family: monospace; color: #666;}
    </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...

JavaScript

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

    // Demo marker
    editor.markText({
        line: 2,
        ch: 0
    }, {
        line: 5,
        ch: 20
    }, {
        className: "bg"
    });

    $("#mark").click(function() {
        var marker = editor.markText(editor.getCursor(true), editor.getCursor(false), {
            className: "bg"
        });
        //save marker or do other things
    });


    $("#hideMarkers").click(function() {
        $("#markerStyle").html(".bg{background:none;}");
    });

    $("#showMarkers").click(function() {
        $("#markerStyle").html(".bg{background:#AAAAAA;}");
    });
});