Blazor封装一个显示Markdown的组件

Posted 2023-02-08 Yu-Core

前言

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

准备工作

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

<link rel="stylesheet" href="https://cdn.masastack.com/npm/vditor/3.8.12/dist/index.css" />

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

2. 创建MarkdownDisplay.razor文件

<div @ref="element"></div>

@code 
    public ElementReference element;
    private string _value = default!;
    private Dictionary<string, object> _options = new();

    [Inject]
    IJSRuntime JS  get; set;  = default!;

    [Parameter]
    public string Value
    
        get => _value;
        set => SetValue(value);
    

    protected override void OnAfterRender(bool firstRender)
    
        if (firstRender)
        
            RenderingMarkdown(Value);
        
        base.OnAfterRender(firstRender);
    

    private void SetValue(string value)
    
        if (_value != value)
        
            _value = value;
            RenderingMarkdown(value);
        
    

    private async void RenderingMarkdown(string value)
    
        if (element.Context != null && !string.IsNullOrEmpty(value))
        
            await JS.InvokeVoidAsync("Vditor.preview", new object[3]  element, value, _options );
        

    

3. 额外配置

_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 Dictionary<string, object> _options = new()

    "mode", "light"
;