Blazor封装一个显示Markdown的组件

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

Blazor封装一个显示Markdown的组件

2023-02-07 21:03:02 来源：博客园

【资料图】

前言

最近在用MASA Blazor组件库，里面有Markdown编辑器，但如何显示Markdown是个问题。MASA Blazor的Markdown编辑器是基于Vditor封装的，Vditor提供了渲染方法Vditor.preview，所以只要简单封装一下就可以了。

准备工作

修改index.html，引入Vditor所需的文件

<script src="https://cdn.masastack.com/npm/vditor/3.8.12/dist/index.min.js"></script>

创建MarkdownDisplay.razor文件


@code {    public ElementReference element;    private string _value = default!;    private Dictionary _options = new();    [Inject]    IJSRuntime JS { get; set; } = default!;    [Parameter]    public string Value    {        get => _value;        set => SetValue(value);    }    private void SetValue(string value)    {        if(_value != value)        {            _value = value;            RenderingMarkdown(value);        }    }    private async void RenderingMarkdown(string value)    {        await JS.InvokeVoidAsync("Vditor.preview", new object[3] { element, value, _options });    }}

额外配置

_options中可以添加Vditor的一些配置,资料来自https://ld246.com/article/1549638745630#static-methods

previewElement: HTMLDivElement,   // 使用该元素进行渲染markdown: string,  // 需要渲染的 markdown 原文options?: IPreviewOptions {  mode: "dark" | "light";  anchor?: number;  // 为标题添加锚点 0：不渲染；1：渲染于标题前；2：渲染于标题后，默认 0  customEmoji?: { [key: string]: string };    // 自定义 emoji，默认为 {}  lang?: (keyof II18nLang);    // 语言，默认为 "zh_CN"  emojiPath?: string;    // 表情图片路径  hljs?: IHljs; // 参见 options.preview.hljs  speech?: {  // 对选中后的内容进行阅读    enable?: boolean,  };  math?: IMath; // 数学公式渲染配置  cdn?: string; // 自建 CDN 地址  transform?(html: string): string; // 在渲染前进行的回调方法  after?(); // 渲染完成后的回调  lazyLoadImage?: string; // 设置为 Loading 图片地址后将启用图片的懒加载  markdown?: options.preview.markdown;  theme?: options.preview.theme;  renderers?: ILuteRender; // 自定义渲染 https://ld246.com/article/1588412297062}

例如下面这样

private async void RenderingMarkdown(string value){    _options.Add("mode", "light");    await JS.InvokeVoidAsync("Vditor.preview", new object[3] { element, value, _options });}