Add more supports to markdown

TaikoWebUI/Pages/Dashboard.razor

@@ -28,11 +28,16 @@
 
     protected override async Task OnInitializedAsync()
     {
+        var pipeline = new MarkdownPipelineBuilder()
+            .UseAdvancedExtensions()
+            .UseEmojiAndSmiley()
+            .Build();
+        
         var markdown = await Http.GetStringAsync("Dashboard.md");
 
         if (!string.IsNullOrWhiteSpace(markdown))
         {
-            markdownContent = Markdown.ToHtml(markdown);
+            markdownContent = Markdown.ToHtml(markdown, pipeline);
         }
         
         isLoading = false;

TaikoWebUI/wwwroot/Dashboard.md

@@ -1,3 +1,3 @@
 **Welcome to TaikoWebUI!**
 
-To change this content, edit `Dashboard.md` in the `wwwroot` directory. All standard Markdown syntax is supported.
+To change this content, edit `Dashboard.md` in the `wwwroot` directory. All standard Markdown syntax is supported, including tables and emojis :smile:.

TaikoWebUI/wwwroot/css/app.css

@@ -128,6 +128,7 @@
 
 .markdown-container {
     min-height:75vh;
+    overflow-x: scroll;
 }
 
 .markdown-content {
@@ -138,6 +139,7 @@
     max-width: 1000px;
     margin: 0 auto;
     padding: 25px;
+    
 }
 
 .markdown-content * {
@@ -179,4 +181,33 @@
     font-size: 0.9em;
     padding: 0.5em;
     overflow-x: auto;
+}
+
+.markdown-content table {
+    border-collapse: collapse;
+    width: 100%;
+}
+
+.markdown-content th,
+.markdown-content td {
+    border: 1px solid #ccc;
+    padding: 0.5em;
+}
+
+.markdown-content thead {
+    background-color: var(--mud-palette-primary);
+    color: white;
+}
+
+.markdown-content tr:nth-child(2n) {
+    background-color: var(--mud-palette-background-grey);
+}
+
+.markdown-content blockquote {
+    font-family: 'Nijiiro', sans-serif;
+    border-left: 5px solid var(--mud-palette-primary);
+    margin: 0;
+    padding: 0.5em 1em;
+    min-width: 500px;
+    width: 65%;
 }