Add markdown rendering for post content with professional styling

Author: ericgitangu

portfolio/static/post_details.css

@@ -135,7 +135,65 @@ main code {
   background-color: #f4f4f4;
   padding: 0.2rem 0.4rem;
   border-radius: 4px;
-  font-family: monospace;
+  font-family: 'Courier New', monospace;
+  font-size: 0.95rem;
+}
+
+main pre {
+  background-color: #1e1e1e;
+  color: #d4d4d4;
+  padding: 1rem;
+  border-radius: 8px;
+  overflow-x: auto;
+  margin: 1.5rem 0;
+}
+
+main pre code {
+  background-color: transparent;
+  color: inherit;
+  padding: 0;
+}
+
+main blockquote {
+  border-left: 4px solid #390281;
+  margin: 1.5rem 0;
+  padding: 0.5rem 1rem;
+  background-color: #f9f9f9;
+  font-style: italic;
+}
+
+main table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1.5rem 0;
+}
+
+main th, main td {
+  border: 1px solid #ddd;
+  padding: 0.75rem;
+  text-align: left;
+}
+
+main th {
+  background-color: #390281;
+  color: white;
+}
+
+main tr:nth-child(even) {
+  background-color: #f9f9f9;
+}
+
+main hr {
+  border: none;
+  border-top: 2px solid #eee;
+  margin: 2rem 0;
+}
+
+.post-content img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+  margin: 1rem 0;
 }
 
 .tag {

portfolio/templates/portfolio/post_details.html

@@ -1,6 +1,7 @@
 {% extends 'base.html' %}
 
 {% load static %}
+{% load markdown_extras %}
 
 {% block title %}{{post.title}}{% endblock %}
 
@@ -56,8 +57,8 @@ <h2>{{post.title}}</h2>
             </address>
         </article>
     </section>
-    <main>
-        {{post.content|urlize|linebreaks}}
+    <main class="post-content">
+        {{post.content|markdown}}
         <br><br>
         <a href ="{% url 'posts' %}" class="center">Back to all posts</a>
     </main>

portfolio/templatetags/__init__.py

@@ -0,0 +1,22 @@
+import markdown
+from django import template
+from django.utils.safestring import mark_safe
+
+register = template.Library()
+
+
+@register.filter(name='markdown')
+def markdown_format(text):
+    """Convert markdown text to HTML."""
+    if not text:
+        return ''
+
+    # Configure markdown with useful extensions
+    md = markdown.Markdown(extensions=[
+        'markdown.extensions.fenced_code',
+        'markdown.extensions.tables',
+        'markdown.extensions.nl2br',
+        'markdown.extensions.sane_lists',
+    ])
+
+    return mark_safe(md.convert(text))

portfolio/templatetags/markdown_extras.py

@@ -14,3 +14,4 @@ sqlparse==0.5.1
 typing_extensions==4.12.2
 urllib3==2.2.2
 whitenoise==6.4.0
+markdown==3.5.1