MudBlazor Markdown 组件使用教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00073/article/details/142582362

MudBlazor Markdown 组件使用教程

MudBlazor.Markdown Markdown component based on the MudBlazor environment 项目地址: https://gitcode.com/gh_mirrors/mu/MudBlazor.Markdown

1. 项目目录结构及介绍

MudBlazor.Markdown/
├── samples/
│   └── ...
├── src/
│   └── MudBlazor.Markdown/
│       ├── Components/
│       ├── Services/
│       └── ...
├── tests/
│   └── MudBlazor.Markdown.Tests/
│       └── ...
├── .gitattributes
├── .gitignore
├── .gitmodules
├── LICENSE
├── MudBlazor.Markdown.sln
├── README.md
└── favico.png

目录结构介绍

samples/: 包含示例代码，展示了如何在实际项目中使用 MudBlazor Markdown 组件。
src/MudBlazor.Markdown/: 项目的核心代码，包含了组件、服务以及其他相关代码。
- Components/: 包含 Markdown 组件的实现。
- Services/: 包含与 Markdown 组件相关的服务。
tests/: 包含项目的单元测试代码。
.gitattributes: Git 属性配置文件。
.gitignore: Git 忽略文件配置。
.gitmodules: Git 子模块配置文件。
LICENSE: 项目许可证文件。
MudBlazor.Markdown.sln: 项目的解决方案文件。
README.md: 项目的说明文档。
favico.png: 项目的图标文件。

2. 项目的启动文件介绍

Blazor Server 启动文件

在 Blazor Server 项目中，启动文件通常是 Startup.cs 或 Program.cs。以下是关键部分的介绍：

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddMudServices();
        services.AddMudMarkdownServices();
        // 可选：如果默认的剪贴板功能失败，可以添加自定义服务
        // services.AddMudMarkdownClipboardService<MauiClipboardService>();
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        // 其他配置代码
    }
}

Blazor WebAssembly 启动文件

在 Blazor WebAssembly 项目中，启动文件通常是 Program.cs。以下是关键部分的介绍：

public class Program
{
    public static async Task Main(string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        builder.Services.AddMudServices();
        builder.Services.AddMudMarkdownServices();
        // 可选：如果默认的剪贴板功能失败，可以添加自定义服务
        // builder.Services.AddMudMarkdownClipboardService<MauiClipboardService>();

        await builder.Build().RunAsync();
    }
}

3. 项目的配置文件介绍

配置文件

在 Blazor 项目中，配置文件通常包括 appsettings.json 和 _Imports.razor。以下是关键部分的介绍：

`appsettings.json`

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  }
}

`_Imports.razor`

@using MudBlazor
@using MudBlazor.Markdown

其他配置

在 App.razor 或 MainLayout.razor 中添加以下节点：

<MudThemeProvider />
<MudPopoverProvider />
<MudDialogProvider />
<MudSnackbarProvider />

在 Pages/_Host.cshtml (Server) 或 wwwroot/index.html (WebAssembly) 中添加以下节点：

<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
    <link href="_content/MudBlazor.Markdown/MudBlazor.Markdown.min.css" rel="stylesheet" />
</head>
<body>
    <script src="_content/MudBlazor/MudBlazor.min.js"></script>
    <script src="_content/MudBlazor.Markdown/MudBlazor.Markdown.min.js"></script>
</body>

通过以上配置，您可以成功启动并使用 MudBlazor Markdown 组件。

MudBlazor.Markdown Markdown component based on the MudBlazor environment 项目地址: https://gitcode.com/gh_mirrors/mu/MudBlazor.Markdown