Render notes as Markdown

games/static/base.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.0 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -1125,10 +1125,6 @@ select {
   font-weight: 600;
 }
 
-.italic {
-  font-style: italic;
-}
-
 .text-gray-700 {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));
@@ -1232,7 +1228,7 @@ a:hover {
   transition: all 0.2s ease-out;
 }
 
-:is(.dark form label) {
+:is(:where(.dark) form label) {
   --tw-text-opacity: 1;
   color: rgb(148 163 184 / var(--tw-text-opacity));
 }
@@ -1242,7 +1238,7 @@ a:hover {
   margin-right: auto;
 }
 
-:is(.dark .responsive-table) {
+:is(:where(.dark) .responsive-table) {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
@@ -1273,8 +1269,8 @@ a:hover {
   border-left-color: rgb(100 116 139 / var(--tw-border-opacity));
 }
 
-:is(.dark form input),:is(.dark 
-select),:is(.dark 
+:is(:where(.dark) form input),:is(:where(.dark) 
+select),:is(:where(.dark) 
 textarea) {
   border-width: 1px;
   --tw-border-opacity: 1;
@@ -1285,8 +1281,8 @@ textarea) {
   color: rgb(241 245 249 / var(--tw-text-opacity));
 }
 
-:is(.dark form input:disabled),:is(.dark 
-select:disabled),:is(.dark 
+:is(:where(.dark) form input:disabled),:is(:where(.dark) 
+select:disabled),:is(:where(.dark) 
 textarea:disabled) {
   --tw-bg-opacity: 1;
   background-color: rgb(51 65 85 / var(--tw-bg-opacity));
@@ -1402,6 +1398,34 @@ th label {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.markdown-content ul {
+  list-style-type: disc;
+  list-style-position: inside;
+  padding-left: 1em;
+}
+
+.markdown-content ol {
+  list-style-type: decimal;
+  list-style-position: inside;
+  padding-left: 1em;
+}
+
+.markdown-content ul, 
+.markdown-content ol {
+  list-style-position: outside;
+  padding-left: 1em;
+}
+
+.markdown-content ul ul, 
+.markdown-content ul ol, 
+.markdown-content ol ul, 
+.markdown-content ol ol {
+  list-style-type: circle;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+  padding-left: 1em;
+}
+
 .hover\:bg-gray-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(156 163 175 / var(--tw-bg-opacity));
@@ -1458,36 +1482,6 @@ th label {
   display: block;
 }
 
-:is(.dark .dark\:bg-gray-800) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-}
-
-:is(.dark .dark\:bg-gray-900) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
-}
-
-:is(.dark .dark\:text-slate-400) {
-  --tw-text-opacity: 1;
-  color: rgb(148 163 184 / var(--tw-text-opacity));
-}
-
-:is(.dark .dark\:text-slate-500) {
-  --tw-text-opacity: 1;
-  color: rgb(100 116 139 / var(--tw-text-opacity));
-}
-
-:is(.dark .dark\:text-slate-600) {
-  --tw-text-opacity: 1;
-  color: rgb(71 85 105 / var(--tw-text-opacity));
-}
-
-:is(.dark .dark\:text-white) {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-
 @media (min-width: 640px) {
   .sm\:inline {
     display: inline;
@@ -1572,3 +1566,33 @@ th label {
     max-width: 32rem;
   }
 }
+
+:is(:where(.dark) .dark\:bg-gray-800) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
+
+:is(:where(.dark) .dark\:bg-gray-900) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+}
+
+:is(:where(.dark) .dark\:text-slate-400) {
+  --tw-text-opacity: 1;
+  color: rgb(148 163 184 / var(--tw-text-opacity));
+}
+
+:is(:where(.dark) .dark\:text-slate-500) {
+  --tw-text-opacity: 1;
+  color: rgb(100 116 139 / var(--tw-text-opacity));
+}
+
+:is(:where(.dark) .dark\:text-slate-600) {
+  --tw-text-opacity: 1;
+  color: rgb(71 85 105 / var(--tw-text-opacity));
+}
+
+:is(:where(.dark) .dark\:text-white) {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}

games/templates/view_game.html

@@ -3,6 +3,7 @@
     {{ title }}
 {% endblock title %}
 {% load static %}
+{% load markdown_extras %}
 {% block content %}
     <div class="dark:text-white max-w-sm sm:max-w-xl lg:max-w-3xl mx-auto">
         <h1 class="text-4xl flex items-center">
@@ -96,7 +97,7 @@
 
                         {% endif %}
                     </li>
-                    <li class="sm:pl-4 italic">{{ session.note|linebreaks }}</li>
+                    <li class="sm:pl-4 markdown-content">{{ session.note|markdown }}</li>
                     <div class="hidden" hx-swap-oob="innerHTML:#session-count">
                         ({{ session_count }})
                     </div>

games/templatetags/markdown_extras.py

@@ -0,0 +1,10 @@
+from django import template
+from django.utils.safestring import mark_safe
+import markdown
+
+register = template.Library()
+
+
+@register.filter(name="markdown")
+def markdown_format(text):
+    return mark_safe(markdown.markdown(text))