editor is now a codemirror instance and syntax highlighted

templates/edit.html

@@ -1,12 +1,33 @@
 {% extends "layout.html" %}
+{% block header_addition %}
+<link rel="stylesheet" media="all" href="{{ url_for('static',filename='lib/codemirror.css') }}" />
+<script src="{{ url_for('static',filename='lib/codemirror.js') }}" type="text/javascript"></script>
+<script src="{{ url_for('static',filename='lib/addon/mode/overlay.js') }}" type="text/javascript"></script>
+<script src="{{ url_for('static',filename='lib/mode/rst/rst.js') }}" type="text/javascript"></script>
+<script>
+
+  $(document).ready(
+    function() {
+      var textArea = document.getElementById("editor")
+      var editor = CodeMirror.fromTextArea(textArea, {
+        mode: 'rst',
+        lineNumbers: true
+      })
+    }
+  );
+</script>
+{% endblock %}
 {% block content %}
 <div class="container-fluid">
   <div class="row">
     <div class="col-md">
       <form action='/update' method='POST'>
-        <textarea rows = "30" cols = "120" name = "content" id="content">{% if filecontent %}{{ filecontent }}
-        {% endif %}
-        </textarea><br>
+        <div>
+          <textarea rows = "30" cols = "120" name = "content" id="editor">{% if filecontent %}{{ filecontent }}
+            {% endif %}
+          </textarea>
+        </div>
+        <br>
         <input type='hidden' id='sha' name='sha' value="{{ sha }}">
         <input type='hidden' id='path' name='path' value="{{ path }}">
         <button type="submit">Update in GIT!!</button>
@@ -26,4 +47,5 @@
   </div>
 </div>
 <script type="text/javascript" src="{{ url_for('static',filename='upload.js') }}"></script>
+
 {% endblock %}

templates/layout.html

@@ -4,10 +4,11 @@
     {% block head %}
     <!-- CSS -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
-
     <!-- jQuery and JS bundle w/ Popper.js -->
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
+
+
     <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='style.css') }}">
     <title>{% block title %}{% endblock %}</title>
     {% endblock %}