Показать текст в Blazor с форматированным текстом

Question

Я использую Blazor с текстовым редактором. Когда я выводю текст следующим образом:

Он добавляет кавычки вокруг текста и отображаемый фактический идентификатор разметки:

Моя разметка отображается в кавычках, а фактическая разметка (полужирный и цветной) не отображается. Кто-нибудь знает, почему или как заставить это работать с Blazor?

Answer 1

Эта проблема является фундаментальной для того, как Blazor компилирует и отображает страницы. Компоненты создаются как сгенерированные классы во время компиляции, которые затем используют RenderTreeBuilder для генерации возврата HTML снова. Это, в свою очередь, воспринимает ваши входные данные как строковые литералы и выводит их как таковые, поскольку в вашей разметке блазор видит «вставить строку x в позицию y», а не фактическую HTML разметку.

РЕДАКТИРОВАТЬ Вскоре после ответа я нашел простой способ сделать это, поэтому разместил его здесь, используя тип MarkupString. Настройка выполняется следующим образом:

MarkupRenderer.razor

@((MarkupString)Markup)

@code {

    [Parameter]
    public string Markup { get; set; }

}

, а затем в вашем родителе вы используете его так:

Parent.razor *

.....

<MarkupRenderer Markup="@markupString" />

Это выдаст теги и атрибуты, которые вы ищете, чтобы получить вывод содержимого в виде HTML.

Официальная документация по этому вопросу очень короткая и включает предупреждение: «Рендеринг необработанных данных HTML, созданный из любого ненадежного источника, представляет угрозу безопасности и его следует избегать!» так что имейте это в виду, если вы еще этого не сделали.

Answer 2

В итоге я использовал Markdig

<PackageReference Include="Markdig" Version="0.20.0" />

Затем включил в мою модель POCO не отображенное поле:

[NotMapped]
public MarkupString HtmlQuestion { get; set; }

Затем в свой сервисный слой я добавил текст разметки:

using Markdig;
...
q.HtmlQuestion = (MarkupString)Markdown.ToHtml(q.QuestionDescription);