Biwen.Blazor.Components 1.0.0-beta1

Biwen.Blazor.Components

语法高亮组件 CodeHighlighter

语法高亮使用Prism.js，支持C#、CSS、HTML、JavaScript、JSON、Markdown、TypeScript等语言。

• LineNumbers为true时显示行号

<PrismHighlighter LineNumbers="true">
<pre>
	<code class="language-csharp">
	private int currentCount = 0;
	private void IncrementCount()
	{
	currentCount++;
	}
	</code>
</pre>
</PrismHighlighter>

MD显示组件 MarkdownViewer

提供MD文件显示功能

• FromAsset属性为MD文件路径，Content属性为MD内容
• CodeHighlight=true时，会对代码进行高亮显示
• CodeHighlightRowNumber=true && CodeHighlight=true时，会显示代码行号

1. 注册HttpClient服务

//请注意如果是Blazor WebAssembly项目，需要自行解决跨域问题
builder.Services.AddScoped<HttpClient>();

2. 使用MarkdownViewer组件

<MarkdownViewer FromAsset="/master/README.md" />
<MarkdownViewer Content="* 也可以这样传递MD" />

MD编辑器 MarkdownEditor

• Content属性为MD初始化内容
• UploadImage=true表示支持上传图片,需要同时设置UploadImagePath(上传地址),ImageMaxSize(文件大小单位kb,默认2048=2M),ImageAccept(支持上传类型,默认image/png,image/jpeg)

<MarkdownEditor @ref="editor" Content="@md" UploadImage="true" UploadImagePath="/upload"></MarkdownEditor>

    private string md = "## Hello World";
    private MarkdownEditor editor = null!;
    private async Task GetContent()
    {
        var content = editor.Content;
        await Task.CompletedTask;
    }

如果UploadImage=true还需要提供上传地址,以下是模拟一个上传接口:

app.MapPost("/upload", ([FromServices] IWebHostEnvironment env, IFormFileCollection files) =>
{
    //当前没有防伪标记,需要自行处理,需要自行解决权限和安全问题
    //不支持批量.只支持一次上传一个文件

    //上传文件逻辑:
    if (files.Count == 0)
    {
        return Results.Json(new { error = "400" });
    }

    var wwwroot = env.WebRootPath;
    var file = files[0];
    var ext = Path.GetExtension(file.FileName);
    string fileName = $"{Guid.NewGuid()}{ext}";
    //如果需要日期目录,请自行处理
    var filePath = Path.Combine(wwwroot, "uploads", fileName);
    using var stream = new FileStream(filePath, FileMode.CreateNew);
    file.CopyTo(stream);

    return Results.Json(new
    {
        data = new
        {
            //请注意需要使用绝对地址,远程路径格式比如:http://localhost:5000/uploads/xxx.png
            filePath = $"/uploads/{fileName}"
        }
    });
}).DisableAntiforgery();

Code编辑器 CodeEditor

• Language 属性为编辑器语言，支持csharp、css、html、javascript、json、markdown、typescript等语言
• Value 属性为编辑器初始化内容
• Style 属性为编辑器样式
• ShowLineNumbers是否显示行号.默认true显示
• ValueChanged 编辑器内容改变事件

 <CodeEditor @ref="codeEditor" Language="csharp"></CodeEditor>

    private CodeEditor codeEditor = null!;
    private async Task GetContent()
    {
        var content = codeEditor.Value;
        await Task.CompletedTask;
    }