1 讲目的

前几天上线了一个在线Icon转换工具,为了让大家使用放心,改了点代码,在转换下载Icon图标后立即删除临时文件,并在工具下面贴上了工具的开发步骤和代码,大家看这样改是否合适,见Issue 1

这篇不讲代码修改过程(因为工具和网站博文已经同步更新),本文讲讲在工具下方展示Markdown文件的实现方式,先看效果:

为啥要加这个功能?

我的想法是,除了提供工具免费使用外,也能让大家了解这个工具是如果开发的,这样应该更方便:

  1. 默认是不显示的,点击如何开发的?的按钮加载开发文章说明。
  2. 评论功能目前没有(不排除后面加上),需要点击我要建议(吐槽)跳转到Dotnet9网站同篇博文留言。
  3. 旁边有个按钮我要浏览源码可以点击浏览工具源码。

下面说说在Blazor中怎么展示Markdown文件,先说明目前完成的功能:

  1. 只是将Markdown文件展示为html。
  2. 高亮目前未加。

2 开发步骤

参考blazor-markdown

  1. 引入包
<PackageReference Include="BlazorMarkdown" Version="1.0.0" />
<PackageReference Include="HtmlSanitizer" Version="7.1.488" />
  1. 注入组件

Program.cs

builder.Services.AddScoped<IHtmlSanitizer, HtmlSanitizer>(x =>
{
// Configure sanitizer rules as needed here.
// For now, just use default rules + allow class attributes
var sanitizer = new HtmlSanitizer();
sanitizer.AllowedAttributes.Add("class");
return sanitizer;
});
  1. 引用命令空间

_Imports.razor

@using BlazorMarkdown
  1. 使用

准备好Markdown文件,比如我放wwwroot下:

IcoTool.razor中就可以直接使用了:

<Markdown FilePath="wwwroot/2022/02/2022-02-22_02.md"/>

总结

完了,就是这么简单,效果见文章开头,今天不啰嗦。

忘了,markdown中有图片等多媒体文件,记得加上这些样式实现自适应:

<style>
h3 {
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>

介绍这个库:C# Blazor中显示Markdown文件的更多相关文章

  1. vue中显示markdown文件为html

    1.安装插件 npm install marked -D npm install highlight.js -D   npm install markdown-loader -D npm instal ...

  2. 解决QZ-SDK静态库libRPToolLib.a中avfoundation.o文件和kxMovie依赖的ffmpeg静态库libavdevice.a函数重复定义的问题

    解决QZ-SDK静态库libRPToolLib.a中avfoundation.o文件和kxMovie依赖的ffmpeg静态库libavdevice.a函数重复定义的问题 在原来项目中导入全志v3相机的 ...

  3. 如何在浏览器网页中显示word文件内容

    如何在浏览器网页中显示word文件内容 把word文件读到byte[]中,再Response.OutputStream.Write(bytes)到客户端去 Page_Load事件中写: //FileS ...

  4. 利用FlashPaper在web页面中显示PDF文件(兼容各浏览器)

    应项目需求要把PDF内嵌到网页中显示,其中有了很多办法,比如用<embed/>元素放入PDF文件,但是效果不理想,浏览器兼容不理想,在ie9/8(其他版本没有测试)显示会提示下载pdf文件 ...

  5. 如何在VBS脚本中显示“选择文件对话框”或“选择目录对话框”

    .选择文件[XP操作系统,不能用于Win2000或98],使用“UserAccounts.CommonDialog”对象向用户显示一个标准的“文件打开”对话框 Set objDialog = Crea ...

  6. IE浏览器直接在页面中显示7z文件而不是下载问题解决

    IE浏览器中输入7z文件的完整下载URL后,不是保存文件,而是直接在页面中显示(当然是乱码) 这是因为浏览器对不同的资源文件处理的方式不同,例如图片文件,一般会直接打开,所以我们可以不用7z,使用zi ...

  7. [Mac]Mac中显示资源库文件夹

    在 Mac OS X 10.7 Lion 之后的版本中 , 用户的个人目录内的资源库文件默认是隐藏状态. 这个设定可能是为了避免用户误操作. 但是对于中高级用户来说会有些不变. 通过如下方式可以找回被 ...

  8. Linux中显示一个文件最后几行的命令

    tail -n 20 filename说明:显示filename最后20行. Linux下tail命令的使用方法.linux tail命令用途是依照要求将指定的文件的最后部分输出到标准设备,通常是终端 ...

  9. WinForm中显示PDF文件

    一.VS2013中,菜单-工具-选择工具箱项-COM组件-勾选“Adobe PDF Reader”-确定 二.在工具箱中就可以看到Adobe PDF Reader控件了,拖到窗体上. 拖到窗体上之后, ...

  10. 在网页中显示PDF文件及vue项目中弹出PDF

    1.<embed width="800" height="600" src="test_pdf.pdf"> </embed ...

随机推荐

  1. 华企盾DSC客户端右键菜单不显示常见处理方法

    1.检查控制台"客户端不显示右键菜单项" 2.未分发模块权限,若以分配可尝试去掉重新分配模块 3.检查杀毒软件是否杀掉了5097目录的文件(覆盖安装,以上两条没问题,这条比较常见) ...

  2. python获取已安装程序列表

    python获取已安装程序列表 本文主要讲述通过python脚本获取android 设备已安装列表. 首先,Python本身无法直接获取Android设备上已安装的程序列表,所以这里主要借助adb命令 ...

  3. 【Python】【OpenCV】定位条形码(一)

    关于二维码和条形码的检测和识别,在OpenCV中已经有提供了对应的API,cv2.QRCodeDetector() | cv2.barcode_BarcodeDetector() ,相关的实现极其简单 ...

  4. java实现一个录像大师

    java实现一个录像大师 javacv从入门到入土系列,发现了个好玩的东西,视频处理,于是我想搞了个屏幕录屏大师,这里我使用javafx进行页面显示. 依赖 <!-- 需要注意,javacv主要 ...

  5. C++ 学习宝藏网站分享

    C++ 学习宝藏网站分享 1. C++ 在线参考手册 Cppreference https://zh.cppreference.com C++ 开发者必备的在线参考手册,是我最常访问的 C++ 网站之 ...

  6. LeetCode206反转链表、24两两交换节点

    206. 反转链表 反转一个单链表. 示例: 输入: 1->2->3->4->5->NULL 输出: 5->4->3->2->1->NULL ...

  7. C++篇:第十章_命名空间_知识点大全

    C++篇为本人学C++时所做笔记(特别是疑难杂点),全是硬货,虽然看着枯燥但会让你收益颇丰,可用作学习C++的一大利器 十.命名空间 命名空间可以在全局作用域或其他命名空间内部定义,但不能在函数.结构 ...

  8. 第四部分_Shell脚本数组和其他变量

    数组定义 ㈠ 数组分类 普通数组:只能使用整数作为数组索引(元素的下标) 关联数组:可以使用字符串作为数组索引(元素的下标) ㈡ 普通数组定义 可以切片 一次赋予一个值 #数组名[索引下标]=值 ar ...

  9. 手把手教你使用ModelArts的自动学习识别毒蘑菇分类

    摘要:本文介绍了ModelArts如何通过自动学习进行毒蘑菇的识别. 想当年,白雪公主吃了毒蘑菇,换来了白马王子的一吻.如果白雪公主没有吃毒蘑菇,还会遇到白马王子吗?张小白觉得不见得--说不定她会遇到 ...

  10. JavaScript继承的实现方式:原型语言对象继承对象原理剖析

    面向对象编程:继承.封装.多态. 对象的继承:A 对象通过继承 B 对象,就能直接拥有 B 对象的所有属性和方法.这对于代码的复用是非常有用的. 在经典的面向对象语言中,您可能倾向于定义类对象,然后您 ...