Merge pull request #1351 from CTFd/codemirror-improvements

* Add proper syntax highlighting for Codemirror and make theme footer & header configs use Codemirror as well

CTFd/themes/admin/assets/css/codemirror.scss

@@ -1 +1,4 @@
 @import "~codemirror/lib/codemirror.css";
+.CodeMirror {
+  font-size: 12px;
+}

CTFd/themes/admin/assets/js/pages/configs.js

@@ -7,6 +7,8 @@ import CTFd from "core/CTFd";
 import { default as helpers } from "core/helpers";
 import $ from "jquery";
 import { ezQuery, ezProgressBar } from "core/ezq";
+import CodeMirror from "codemirror";
+import "codemirror/mode/htmlmixed/htmlmixed.js";
 
 function loadTimestamp(place, timestamp) {
   if (typeof timestamp == "string") {
@@ -233,6 +235,20 @@ function insertTimezones(target) {
 }
 
 $(() => {
+  CodeMirror.fromTextArea(document.getElementById("theme-header"), {
+    lineNumbers: true,
+    lineWrapping: true,
+    mode: "htmlmixed",
+    htmlMode: true
+  });
+
+  CodeMirror.fromTextArea(document.getElementById("theme-footer"), {
+    lineNumbers: true,
+    lineWrapping: true,
+    mode: "htmlmixed",
+    htmlMode: true
+  });
+
   insertTimezones($("#start-timezone"));
   insertTimezones($("#end-timezone"));
   insertTimezones($("#freeze-timezone"));

CTFd/themes/admin/assets/js/pages/editor.js

@@ -4,6 +4,7 @@ import $ from "jquery";
 import CTFd from "core/CTFd";
 import { default as helpers } from "core/helpers";
 import CodeMirror from "codemirror";
+import "codemirror/mode/htmlmixed/htmlmixed.js";
 import { ezQuery, ezToast } from "core/ezq";
 
 function get_filetype_icon_class(filename) {
@@ -206,7 +207,7 @@ $(() => {
     {
       lineNumbers: true,
       lineWrapping: true,
-      mode: "xml",
+      mode: "htmlmixed",
       htmlMode: true
     }
   );

CTFd/themes/admin/templates/config.html

@@ -1,5 +1,9 @@
 {% extends "admin/base.html" %}
 
+{% block stylesheets %}
+	<link rel="stylesheet" type="text/css" href="{{ url_for('views.themes', theme='admin', path='css/codemirror.css') }}">
+{% endblock %}
+
 {% block content %}
 <div class="jumbotron">
 	<div class="container">