diff --git a/TaikoWebUI/Pages/Dashboard.razor b/TaikoWebUI/Pages/Dashboard.razor index 1b22a22..1e26a41 100644 --- a/TaikoWebUI/Pages/Dashboard.razor +++ b/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; diff --git a/TaikoWebUI/wwwroot/Dashboard.md b/TaikoWebUI/wwwroot/Dashboard.md index ed8c832..8d9223a 100644 --- a/TaikoWebUI/wwwroot/Dashboard.md +++ b/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. \ No newline at end of file +To change this content, edit `Dashboard.md` in the `wwwroot` directory. All standard Markdown syntax is supported, including tables and emojis :smile:. \ No newline at end of file diff --git a/TaikoWebUI/wwwroot/css/app.css b/TaikoWebUI/wwwroot/css/app.css index da91ca2..06f8fa2 100644 --- a/TaikoWebUI/wwwroot/css/app.css +++ b/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%; } \ No newline at end of file