网络科技有限公司名字推荐,wordpress 加速优化,中牟郑州网站建设,中国网站1 讲目的 前几天上线了一个在线Icon转换工具[1]#xff0c;为了让大家使用放心#xff0c;改了点代码#xff0c;在转换下载Icon图标后立即删除临时文件#xff0c;并在工具下面贴上了工具的开发步骤和代码#xff0c;大家看这样改是否合适#xff0c;见Issue 1[2]。这篇… 1 讲目的 前几天上线了一个在线Icon转换工具[1]为了让大家使用放心改了点代码在转换下载Icon图标后立即删除临时文件并在工具下面贴上了工具的开发步骤和代码大家看这样改是否合适见Issue 1[2]。这篇不讲代码修改过程(因为工具[3]和网站博文[4]已经同步更新)本文讲讲在工具下方展示Markdown文件的实现方式先看效果Blazor中显示Markdown为啥要加这个功能我的想法是除了提供工具免费使用外也能让大家了解这个工具是如果开发的这样应该更方便默认是不显示的点击如何开发的的按钮加载开发文章说明。评论功能目前没有不排除后面加上需要点击我要建议吐槽跳转到Dotnet9[5]网站同篇博文[6]留言。旁边有个按钮我要浏览源码可以点击浏览工具源码。下面说说在Blazor中怎么展示Markdown文件先说明目前完成的功能只是将Markdown文件展示为html。高亮目前未加。2 开发步骤 参考blazor-markdown[7]。引入包PackageReference IncludeBlazorMarkdown Version1.0.0 /
PackageReference IncludeHtmlSanitizer Version7.1.488 /注入组件Program.csbuilder.Services.AddScopedIHtmlSanitizer, HtmlSanitizer(x
{// Configure sanitizer rules as needed here.// For now, just use default rules allow class attributesvar sanitizer new HtmlSanitizer();sanitizer.AllowedAttributes.Add(class);return sanitizer;
});引用命令空间_Imports.razorusing BlazorMarkdown使用准备好Markdown文件比如我放wwwroot下Markdown文件在IcoTool.razor中就可以直接使用了Markdown FilePathwwwroot/2022/02/2022-02-22_02.md/总结 完了就是这么简单效果见文章开头今天不啰嗦。忘了markdown中有图片等多媒体文件记得加上这些样式实现自适应styleh3 {border-bottom: 1px solid #eee;margin-top: 50px;padding-bottom: 10px;}pre {background: #1E1E1E;color: #eee;overflow-x: auto;padding: 0.5em !important;white-space: pre;word-break: normal;word-wrap: normal;}img, video, source { max-width: 100% }pre code { white-space: pre; }
/style参考资料[1]在线Icon转换工具: https://tool.dotnet9.com/ico[2]Issue 1: https://github.com/dotnet9/dotnet9.com/issues/1[3]工具: https://tool.dotnet9.com/ico[4]博文: https://dotnet9.com/1715[5]Dotnet9: https://dotnet9.com[6]博文: https://dotnet9.com/1715[7]blazor-markdown: https://github.com/georgemathieson/blazor-markdown
