Markdown 如何使用Blazor在textarea或inputTextArea内呈现标记

如何在textarea或InputExtArea内显示标记字符串，以便将其滚动用于更大的文本

错误消息为：无法将markupstring转换为string

@if (HTMLContent != null)
{
    <InputTextArea @bind-Value="@((MarkupString) HTMLContent)">

    </InputTextArea>
    <textarea @bind="@( HTMLContent)">
            @((MarkupString) HTMLContent)
    </textarea>

}

@code {
    [Parameter] public string MarkdownContent { get; set; }
    private string HTMLContent;
    protected override void OnParametersSet()
    {
        if (!string.IsNullOrEmpty(MarkdownContent))
        {
            HTMLContent = Markdown.ToHtml(MarkdownContent);
        }
        else
        {
            HTMLContent = null;
        }
    }
}

@if（HTMLContent！=null）
{
@（（标记字符串）HTMLContent）
}
@代码{
[参数]公共字符串MarkdownContent{get；set；}
私有字符串HTMLContent；
受保护的覆盖无效OnParametersSet（）
{
如果（！string.IsNullOrEmpty（MarkdownContent））
{
HTMLContent=Markdown.ToHtml（MarkdownContent）；
}
其他的
{
HTMLContent=null；
}
}
}

我希望您已经在使用MarkDig nuget包来完成此任务。下面的代码将起作用。在这里检查一下

父组件

@代码{
私有字符串parentHtmlContent=$“您好，我是来自父级的Rahul…
”+
$"" +
$"" +
$“我目前为Blazor项目工作…
”；
}

子组件

@if（HTMLContent！=null）
{
}
@代码{
字符串markString2=$“嗨，我是Rahul…
”；
[参数]公共字符串MarkdownContent{get；set；}
私有字符串HTMLContent；
公共字符串到HTML
{
收到
{
返回Markdig.Markdown.ToHtml（markString2）；
}
设置
{
markString2=值；
}
}
受保护的覆盖无效OnParametersSet（）
{
如果（！string.IsNullOrEmpty（MarkdownContent））
{
HTMLContent=Markdig.Markdown.ToHtml（MarkdownContent）；
}
其他的
{
HTMLContent=null；
}
}
}

---

希望，这会有帮助，这是你想要的！谢谢

您可以使用@Rahul的解决方案，但它有点过于复杂。我认为这个博客用Markdig很好地总结了这一点：

步骤：

在客户端项目中安装程序包Markdig

创建名为

Editor.Razor

的新Blazor（Razor）组件，并添加以下值：

@page "/markdown"
@inherits MarkdownEditorBase

<div class="row">
    <div class="col-6">
        <textarea class="form-control" @bind-value="Body" @bind-value:event="oninput"></textarea>
    </div>
    <div class="col-6">
        @if (!string.IsNullOrWhiteSpace(Body))
        {
            @((MarkupString)Preview)
        }
    </div>
</div>

@code {

}

现在一切都好了

如果您希望Blazor组件代码块中的所有内容也能正常工作：

@page "/markdown"
@using Markdig;

<div class="row">
    <div class="col-6">
        <textarea class="form-control" @bind-value="Body" @bind-value:event="oninput"></textarea>
    </div>
    <div class="col-6">
        @if (!string.IsNullOrWhiteSpace(Body))
        {
            @((MarkupString)Preview)
        }
    </div>
</div>

@code {
    public string Body { get; set; }

    public string Preview => Markdown.ToHtml(Body);
}

@page”/markdown
@使用标记挖掘；
@如果（！string.IsNullOrWhiteSpace（Body））
{
@（（标记字符串）预览）
}
@代码{
公共字符串体{get；set；}
公共字符串预览=>Markdown.ToHtml（Body）；
}

例如：

---

是的，我正在使用MARKDIG Nuget软件包

@page "/markdown"
@using Markdig;

<div class="row">
    <div class="col-6">
        <textarea class="form-control" @bind-value="Body" @bind-value:event="oninput"></textarea>
    </div>
    <div class="col-6">
        @if (!string.IsNullOrWhiteSpace(Body))
        {
            @((MarkupString)Preview)
        }
    </div>
</div>

@code {
    public string Body { get; set; }

    public string Preview => Markdown.ToHtml(Body);
}