2 files changed, 112 insertions, 2 deletions
diff --git a/templates/create.html b/templates/create.html
new file mode 100644
index 0000000..4d48992
--- /dev/null
+++ b/templates/create.html
@@ -0,0 +1,110 @@
+{% extends "base.html" %}
+{% block content %}
+<script src="{{ url_for('static',  filename='bower_components/simplemde/dist/simplemde.min.js') }}">
+</script>
+<script src="{{ url_for('static',  filename='bower_components/markdown-it/markdown-it.min.js') }}">
+</script>
+<link rel="stylesheet" type="text/css" href="{{ url_for('static', 
+    filename='bower_components/simplemde/dist/simplemde.min.css') }}">
+
+<h1>Blob Create</h1>
+
+
+
+<div class="tab">
+    <button type="button" class="tablinks" id="defaultOpen" onclick="openTab(event, 'input-area')">Editor</button>
+    <button type="button" class="tablinks" onclick="openTab(event, 'document-rendered')">Preview</button>
+</div>
+<!-- Textarea for Markdown input -->
+<div id="input-area" class="tabcontent">
+    <form method="post" novalidate>
+        {{ form.hidden_tag() }}
+        <p>
+	    {{form.title.label}}: {{form.title}} <br>
+            {{ form.content.label }}<br>
+            {{ form.content(cols="80", rows="24") }}
+        </p>
+        <p>
+            Markdown is fully supported<br>
+            {% for error in form.content.errors %}
+            <span style="color: peru;">[{{ error }}]</span>
+            {% endfor %}
+        </p>
+        <p>{{ form.submit() }}</p>
+    </form>
+    <div class="tools">
+        <a href="#">Use The Advanced Editor</a>
+        <menu>
+            <li><button id="activate" onclick="activeAdvanced()">Advanced</button></li>
+            <li><button id="kill" onclick="killAdvanced()">Basic</button></li>
+        </menu>
+    </div>
+</div>
+<!-- Div to display rendered Markdown -->
+<div id="document-rendered" class="tabcontent"></div>
+
+
+
+<script>
+    // Initialize markdown-it
+    const md = window.markdownit();
+    var simplemde = null;
+    // Function to render Markdown
+    function renderMarkdown() {
+        const markdownInput = document.getElementById('body').value;
+        const html = md.render(markdownInput);
+        document.getElementById('document-rendered').innerHTML = html;
+    }
+
+    function openTab(evt, cityName) {
+        // Declare all variables
+        var i, tabcontent, tablinks;
+
+        // Get all elements with class="tabcontent" and hide them
+        tabcontent = document.getElementsByClassName("tabcontent");
+        for (i = 0; i < tabcontent.length; i++) {
+            tabcontent[i].style.display = "none";
+        }
+
+        // Get all elements with class="tablinks" and remove the class "active"
+        tablinks = document.getElementsByClassName("tablinks");
+        for (i = 0; i < tablinks.length; i++) {
+            tablinks[i].className = tablinks[i].className.replace(" active", "");
+        }
+
+        // Show the current tab, and add an "active" class to the button that opened the tab
+        document.getElementById(cityName).style.display = "block";
+        evt.currentTarget.className += " active";
+    }
+
+    function activeAdvanced() {
+
+        if (simplemde == null) {
+            simplemde = new SimpleMDE({
+                element: document.getElementById("content")
+            });
+            simplemde.codemirror.on("change", function () {
+                const mdIn = simplemde.value();
+                var ourHtml = md.render(mdIn);
+                document.getElementById('document-rendered').innerHTML = ourHtml;
+
+            });
+        }
+    }
+
+    function killAdvanced() {
+        if (simplemde != null) {
+            simplemde.toTextArea();
+            simplemde = null;
+            document.getElementById('document-input').addEventListener('input', renderMarkdown);
+
+        }
+    }
+
+
+    // Render Markdown on initial load
+    document.getElementById('defaultOpen').click();
+    renderMarkdown();
+    document.getElementById('document-input').addEventListener('input', renderMarkdown);
+</script>
+{% endblock %}
diff --git a/templates/post.html b/templates/post.html
index 5a28b2b..8272d37 100644
--- a/templates/post.html
+++ b/templates/post.html
@@ -3,6 +3,6 @@
 {% block content %}
     <h2>{{ post.title }}</h2>
     <p>{{ post.created_at.strftime('%Y-%m-%d %H:%M') }}</p>
-    <div>{{ post.content }}</div>
+    <div>{{ post.content|markdown|safe }}</div>
     <a href="{{ url_for('index') }}">Back to posts</a>
-{% endblock %}
\ No newline at end of file
+{% endblock %}