better progressive enhancement of editor

2 files changed, 35 insertions, 20 deletions

diff --git a/static/mde.js b/static/mde.js
deleted file mode 100644
index 7471110..0000000
--- a/static/mde.js
+++ /dev/null
@@ -1,20 +0,0 @@
-(function() {
-    var textarea = document.getElementsByTagName("textarea")[0];
-    var form = textarea.form;
-    var container = document.createElement('div');
-    /*container.innerHTML =
-	"<p>I know it looks funny in the editor, but to set the page "+
-	"title (what appears in the tab name/window bar), put this at "+
-	"the top of the page:</p>\n"+
-	"<pre>---\ntitle: \"Your Title Here\"\n---\n</pre>";*/
-    form.insertBefore(container, textarea);
-    container.appendChild(textarea);
-
-    var simplemde = new SimpleMDE({
-	autoDownloadFontAwesome: false,
-	element: textarea,
-	promptURLs: true,
-	forceSync: true,
-	showIcons: ["code", "table"],
-    });
-})();
diff --git a/static/style.css b/static/style.css
index cad83c0..2ce7fa8 100644
--- a/static/style.css
+++ b/static/style.css
@@ -34,3 +34,38 @@ input[type=file] {
     background: #EEEEEE;
     border-radius: 4px;
 }
+
+kbd, code, samp, tt, pre {
+    background: #DDDDFF;
+    white-space: pre;
+}
+pre {
+    margin: auto 2em;
+    padding: .5em;
+    overflow: auto;
+    border: solid 1px #AAAAAA;
+}
+
+aside {
+    padding: 10px;
+    border-radius: 4px;
+    border: solid 1px #ddd;
+    background: rgb(240, 240, 240);
+    opacity: 0.7;
+}
+
+.CodeMirror {
+     /* match Firefox's built-in style for textearea */
+    border: 1px solid rgb(232, 232, 231);
+}
+.CodeMirror .cm-trailingspace {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUXCToH00Y1UgAAACFJREFUCNdjPMDBUc/AwNDAAAFMTAwMDA0OP34wQgX/AQBYgwYEx4f9lQAAAABJRU5ErkJggg==);
+    background-position: bottom left;
+    background-repeat: repeat-x;
+}
+.CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUXCToH00Y1UgAAACFJREFUCNdjPMDBUc/AwNDAAAFMTAwMDA0OP34wQgX/AQBYgwYEx4f9lQAAAABJRU5ErkJggg==) !important;
+    background-position: bottom left !important;
+    background-repeat: repeat-x !important;
+    background-color: transparent !important;
+}