[ui] add styling for markdown content in notes

rushlow-development · May 24, 2024 · 170212e · 170212e
1 parent e5a85c6
commit 170212e
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 1 deletion.
diff --git a/assets/styles/app.css b/assets/styles/app.css
@@ -7,6 +7,22 @@
         min-width: 0;
     }
 
+    a {
+        @apply p-2 underline decoration-cyan-500 hover:text-cyan-500 hover:decoration-gray-500;
+    }
+
+    h1 {
+        @apply text-4xl;
+    }
+
+    h2 {
+        @apply text-2xl;
+    }
+
+    h3 {
+        @apply text-xl;
+    }
+
     /* SVG classes */
     .bi {
         @apply inline-block;
@@ -20,4 +36,33 @@
     .menu-color:hover {
         fill: theme(colors.cyan.500);
     }
+
+    .md-content pre {
+        @apply bg-gray-600/75 rounded my-6 p-4 overflow-auto whitespace-pre;
+    }
+
+    .md-content code {
+        @apply text-yellow-200/75 font-mono;
+    }
+
+    .md-content ul {
+        @apply list-disc list-inside;
+    }
+
+    .md-content table {
+        @apply table-auto border-collapse ;
+    }
+
+    .md-content td {
+        @apply px-4;
+    }
+
+    .md-content h1,
+    .md-content h2,
+    .md-content h3,
+    .md-content h4,
+    .md-content table,
+    .md-content ul {
+        @apply my-4;
+    }
 }
diff --git a/src/Twig/MarkdownExtension.php b/src/Twig/MarkdownExtension.php
@@ -6,6 +6,7 @@
 use League\CommonMark\Extension\Attributes\AttributesExtension;
 use League\CommonMark\Extension\ExtensionInterface;
 use League\CommonMark\Extension\GithubFlavoredMarkdownExtension;
+use League\CommonMark\Extension\Table\TableExtension;
 
 class MarkdownExtension implements ExtensionInterface
 {
@@ -14,5 +15,6 @@ public function register(EnvironmentBuilderInterface $environment): void
     {
         $environment->addExtension(new GithubFlavoredMarkdownExtension());
         $environment->addExtension(new AttributesExtension());
+        $environment->addExtension(new TableExtension());
     }
 }
diff --git a/templates/main.html.twig b/templates/main.html.twig
@@ -22,7 +22,7 @@
 
                 <twig:Button:Edit-Link path="app_note_edit" id="{{ note.id }}" class="float-right p-2 text-amber-400"/>
 
-                <section>{{ (note.content ?? '')|markdown_to_html }}</section>
+                <section class="md-content">{{ (note.content ?? '')|markdown_to_html }}</section>
             </article>
         {% endfor %}
     </section>