Merge pull request #17 from Sagittal-ai/feature/FLAS-29-markdown-in-post-body

FLAS-29: Implement Markdown Support in Post Body

flaskr/blog.py

@@ -6,6 +6,7 @@ from flask import render_template
 from flask import request
 from flask import url_for
 from werkzeug.exceptions import abort
+import markdown
 
 from .auth import login_required
 from .db import get_db
@@ -22,6 +23,10 @@ def index():
         " FROM post p JOIN user u ON p.author_id = u.id"
         " ORDER BY created DESC"
     ).fetchall()
+    # Convert markdown to HTML for each post body
+    posts = [
+        {**post, 'body': markdown.markdown(post['body'])} for post in posts
+    ]
     return render_template("blog/index.html", posts=posts)
 
 

flaskr/static/style.css

@@ -231,6 +231,27 @@ body.dark-mode .content textarea {
   border: 1px solid #555;
 }
 
+/* SimpleMDE specific styles */
+.editor-toolbar {
+  background: #f5f5f5;
+  border: 1px solid #ccc;
+  border-radius: 4px 4px 0 0;
+}
+
+.CodeMirror {
+  border: 1px solid #ccc;
+  border-radius: 0 0 4px 4px;
+}
+
+body.dark-mode .editor-toolbar {
+  background: #333;
+  border: 1px solid #555;
+}
+
+body.dark-mode .CodeMirror {
+  border: 1px solid #555;
+}
+
 .post.collapsed .body {
   display: none;
 }

flaskr/templates/blog/create.html

@@ -8,8 +8,13 @@
   <form method="post">
     <label for="title">Title</label>
     <input name="title" id="title" value="{{ request.form['title'] }}" required>
-    <label for="body">Body</label>
+    <label for="body">Body (Markdown supported)</label>
     <textarea name="body" id="body">{{ request.form['body'] }}</textarea>
     <input type="submit" value="Save">
   </form>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
+  <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
+  <script>
+    var simplemde = new SimpleMDE({ element: document.getElementById("body") });
+  </script>
 {% endblock %}

flaskr/templates/blog/update.html

@@ -8,10 +8,15 @@
   <form method="post">
     <label for="title">Title</label>
     <input name="title" id="title" value="{{ request.form['title'] or post['title'] }}" required>
-    <label for="body">Body</label>
+    <label for="body">Body (Markdown supported)</label>
     <textarea name="body" id="body">{{ request.form['body'] or post['body'] }}</textarea>
     <input type="submit" value="Save">
   </form>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
+  <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
+  <script>
+    var simplemde = new SimpleMDE({ element: document.getElementById("body") });
+  </script>
   <hr>
   <form action="{{ url_for('blog.delete', id=post['id']) }}" method="post">
     <input class="danger" type="submit" value="Delete" onclick="return confirm('Are you sure?');">