完美:C# Blazor中显示Markdown并添加代码高亮
2022-02-27 19:39
1136 查看
昨天发了一篇介绍这个库:C# Blazor中显示Markdown文件,介绍怎么在Blazor中显示Markdown内容的文章,文章内的代码是没有高亮的,思来相去,还是要做好,于是百度到这篇文章.NET C# Blazor 服务端渲染Markdown,现在渲染效果如下:
自认为应该是比较完美了,下面说说怎么做的。
一、准备工具
1.1 添加Markdown转html包:Markdig
Markdig:Markdig 是一个快速、强大、符合CommonMark标准、可扩展的 .NET Markdown 处理器。
<PackageReference Include="Markdig" Version="0.27.0" />
1.2 引入Prism插件
此Prism非彼Prism,是一个JS插件:Prism 是一个轻量级、健壮且优雅的语法高亮库。这是Dabblet的一个衍生项目。
在
_Layout.cshtml的
head中引入:
<head> .... <!--重置浏览器样式--> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css"> <!--代码块主题--> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.27.0/themes/prism-coy.min.css"> <!--工具栏插件--> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.27.0/plugins/toolbar/prism-toolbar.min.css"> <!--行号插件--> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.27.0/plugins/line-numbers/prism-line-numbers.min.css"> ... </head> <body> ... <!--prism核心js (用于渲染代码块)--> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.27.0/prism.min.js"></script> <!--显示代码块行号--> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.27.0/plugins/line-numbers/prism-line-numbers.min.js"></script> <!--工具栏(一些插件的前置依赖)--> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.27.0/plugins/toolbar/prism-toolbar.min.js"></script> <!--代码块显示语言名称--> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.27.0/plugins/show-language/prism-show-language.min.js"></script> <!--复制代码--> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.27.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script> <!--自动去cdn加载对应语言的代码高亮js--> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.27.0/plugins/autoloader/prism-autoloader.min.js"></script> </body>
二、使用
我将
Markdown展示单独提取成了组件
MarkdownComponent.razor,将加载的
Markdown文件相对路径、需要链接的文章链接和源码链接做成参数,方便后面其他工具复用,下面的代码片段主要在这个文件内。
组件参数定义:
@code { [Parameter] public string LocalPostFilePath { get; set; } = null!; [Parameter] public string RemotePostUrl { get; set; } = null!; [Parameter] public string SourceCodeUrl { get; set; } = null!; }
Markdown内容读取,
Markdown格式转
html在
OnInitializedAsync()方法中定义:
protected override async Task OnInitializedAsync() { var markdownData = await File.ReadAllTextAsync(LocalPostFilePath); // markdown 转为 html var htmlData = Markdown.ToHtml(markdownData); // 转为 prism 支持的语言标记(不是必须,可以删除) htmlData = htmlData.Replace("language-golang", "language-go"); // TODO: 使用 https://github.com/mganss/HtmlSanitizer 清洗html中的xss if (htmlData.Contains("<script") || htmlData.Contains("<link")) { _hasXss = true; } // 将 普通文本 转为 可以渲染的html的类型 _postHtmlContent = (MarkupString) htmlData; }
最后一步,需要在组件完成后,调用
Prism插件方法,写在方法
OnAfterRenderAsync(bool firstRender)中,这是做代码高亮的关键代码:
protected override async Task OnAfterRenderAsync(bool firstRender) { await _jsRuntime.InvokeVoidAsync("Prism.highlightAll"); }
渲染相对来说就简单了(只针对我们使用),见下面的代码:
<div class="line-numbers"> @{ if (_hasXss) { @_postHtmlContent.ToString() } else { @_postHtmlContent } } </div>
在
IcoTool.razor调用该组件:
<MarkdownComponent LocalPostFilePath="wwwroot/2022/02/2022-02-22_02.md" RemotePostUrl="https://dotnet9.com/1715" SourceCodeUrl="https://github.com/dotnet9/dotnet9.com/blob/develop/src/Dotnet9.Tools.Web/Pages/Public/ImageTools/IcoTool.razor"/>
当然组件封装看个人需求,大致思路是上面的,就不贴详细代码了,有兴趣看看Dotnet9工具箱源码。
参考文章:
相关文章推荐
- 给CuteEditor5增加了高亮代码显示功能(C#版)
- 自定义markdown代码高亮显示-cnblog
- 使用prettify为编辑器xhEditor添加代码(code)高亮显示
- CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
- ckeditor添加代码插入功能及高亮显示(插件)
- 利用prettify为编辑器xhEditor添加代码高亮显示
- .net c# 用代码来添加断点并且在Visual Studio输出窗口中显示自定义信息
- Visual Assist X添加默认包含路径+支持VS2010高亮显示CUDA代码(Windows 7)
- 给CuteEditor5增加了高亮代码显示功能(C#版)
- 给CuteEditor5增加了高亮代码显示功能(C#版)
- [装载]给CuteEditor5增加了高亮代码显示功能(C#版)
- 给CuteEditor5增加了高亮代码显示功能(C#版)
- 使用prettify为编辑器xhEditor添加代码(code)高亮显示
- 【原】高亮您的代码,秀出您的水平【有源码,支持大部分常用语言的高亮显示,如C#,JAVA等】
- 为论坛和Blog添加代码高亮显示的功能
- 全面启用Markdown语法以及前端格式优化(代码高亮行号显示等优化)全过程
- mavon-editor markdown 编辑器配置及代码块高亮显示并添加行号
- 给CuteEditor5增加了高亮代码显示功能(C#版)
- 为论坛和Blog添加代码高亮显示的功能。
- (转).NET(C#):用代码来添加断点并且在Visual Studio输出窗口中显示自定义信息