Add MudJustifiedMarkdown component and apply justified styling

This commit is contained in:
Thorsten Sommer 2026-04-10 16:14:00 +02:00
parent e384260cfb
commit c8692c97ce
No known key found for this signature in database
GPG Key ID: B0B7E2FC074BF1F5
4 changed files with 32 additions and 1 deletions

View File

@ -33,5 +33,5 @@
} }
} }
<MudMarkdown Value="@this.Info.Markdown" Props="Markdown.DefaultConfig" MarkdownPipeline="Markdown.SAFE_MARKDOWN_PIPELINE" /> <MudJustifiedMarkdown Value="@this.Info.Markdown" />
</MudStack> </MudStack>

View File

@ -0,0 +1,3 @@
<div class="justified-markdown">
<MudMarkdown Value="@this.Value" Props="Markdown.DefaultConfig" MarkdownPipeline="Markdown.SAFE_MARKDOWN_PIPELINE" />
</div>

View File

@ -0,0 +1,9 @@
using Microsoft.AspNetCore.Components;
namespace AIStudio.Components;
public partial class MudJustifiedMarkdown
{
[Parameter]
public string Value { get; set; } = string.Empty;
}

View File

@ -116,6 +116,25 @@
margin-bottom:2em; margin-bottom:2em;
} }
.justified-markdown .mud-markdown-body p,
.justified-markdown .mud-markdown-body li,
.justified-markdown .mud-markdown-body blockquote p {
text-align: justify;
hyphens: auto;
}
.justified-markdown .mud-markdown-body pre,
.justified-markdown .mud-markdown-body code,
.justified-markdown .mud-markdown-body h1,
.justified-markdown .mud-markdown-body h2,
.justified-markdown .mud-markdown-body h3,
.justified-markdown .mud-markdown-body h4,
.justified-markdown .mud-markdown-body h5,
.justified-markdown .mud-markdown-body h6,
.justified-markdown .mud-markdown-body table {
text-align: left;
}
.code-block { .code-block {
background-color: #2d2d2d; background-color: #2d2d2d;
color: #f8f8f2; color: #f8f8f2;