Add markdown rendering to HTMX

example/assets/css/htmx_index.css

@@ -10,3 +10,7 @@
 [data-loading] {
   display: none;
 }
+
+#messages-list li p {
+  margin-bottom: 0;
+}

example/demo/templates/demo/chat_thread.html

@@ -1,4 +1,5 @@
 {% extends "demo/chat_home.html" %}
+{% load markdown %}
 
 {% block message_list %}
   <div id="messages-container" class="d-flex flex-column">
@@ -19,7 +20,8 @@
               {% if message.type == "ai" %}AI{% else %}User{% endif %}
             </strong>
           </span>
-          <span>{{ message.content }}</span>
+
+          <span>{{ message.content|markdown }}</span>
         </div>
       {% endfor %}
     </div>

example/demo/templatetags/markdown.py

@@ -0,0 +1,14 @@
+from django import template
+from django.utils.safestring import mark_safe
+
+from pycmarkgfm import markdown_to_html
+
+
+register = template.Library()
+
+
+@register.filter(name="markdown")
+def markdown_filter(value):
+    if value is None:
+        return ""
+    return mark_safe(markdown_to_html(value))  # noqa: S308

pyproject.toml

@@ -85,6 +85,7 @@ langchain-anthropic = "^0.2.1"
 langchain-community = "^0.3.1"
 gitpython = "^3.1.43"
 scikit-learn = "^1.5.2"
+pycmarkgfm = "^1.2.1"
 
 [build-system]
 requires = ["poetry-core>=1.2.0"]