介绍这个库:C# Blazor中显示Markdown文件

1 讲目的

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

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

85513216de690e7fd22cc46f6d48eacb.gif

Blazor中显示Markdown

为啥要加这个功能?

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

  1. 默认是不显示的,点击如何开发的?的按钮加载开发文章说明。

  2. 评论功能目前没有(不排除后面加上),需要点击我要建议(吐槽)跳转到Dotnet9[5]网站同篇博文[6]留言。

  3. 旁边有个按钮我要浏览源码可以点击浏览工具源码。

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

  1. 只是将Markdown文件展示为html。

  2. 高亮目前未加。

2 开发步骤

参考blazor-markdown[7]

  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 attributesvar sanitizer = new HtmlSanitizer();sanitizer.AllowedAttributes.Add("class");return sanitizer;
});
  1. 引用命令空间

_Imports.razor

@using BlazorMarkdown
  1. 使用

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

3906682b2fe548348aed4416479fe3bd.png
Markdown文件

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>

参考资料

[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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/291031.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux 信号量 生产者消费者小例题

菜鸟偶遇信号量&#xff0c;擦出火花&#xff08;只有不熟才会有火花&#xff09;。于是上网搜资料和看《Unix环境高级编程》实现了几个小例题&#xff0c;高手请勿喷&#xff01;这几位写得非常好啊&#xff1a; 题目来源&#xff1a; http://www.it165.net/os/html/201312/70…

Redhat 5.1 install PHP 5.3.6

Redhat 5.1 install PHP 5.3.6现在各种版本的坑。。导致没有低版本的php 可能是使用的问题导致。系统版本没有提升导致的没有包可用....yum install gcc libxml2-devel bzip2-devel zlib-devel \ curl-devel libmcrypt-devel libjpeg-devel \ libpng-devel gd-devel mysql-deve…

C/C++语言之通过定义指针函数方式来实现在一个cpp文件里面获取另外一个cpp文件函数的返回值

1、定义函数指针 typedef int (* fun) (); static fun f; 2、代码实现 3、结果 4、总结 我们可以这样使用 在a.h文件里面里面定义函数指针,并且有个传递函数指针的方法 typedef std::string (*fun)();void f2(fun f 1); 然后在a.cpp文件里面实现f2方法 static fun f;…

讀後感

看別人的故事&#xff0c;寫自己的故事&#xff0c;寫自己的感受。 在學習的過程中&#xff0c;其實會遇到很多的人、事、物&#xff0c;而處在我們這個階段的青年&#xff0c;往往是無知的。有些人或許還看不到自己前方的路是怎麼樣&#xff0c;在迷茫之中探索未來的些許星光&…

linux系统做的小游戏,2007最新 100个Linux系统上的小游戏汇集

希望了解Linux小游戏的朋友可以阅读下。给大家介绍一下&#xff0c;Linux下的小游戏&#xff0c;一共100个&#xff0c;有游戏的截图。有人说Linux缺乏娱乐性&#xff0c;其实不然&#xff01;在Linux下玩游戏要比Windows下表现力更好&#xff0c;Linux有非常多的小游戏&#x…

Dapr 中文社区汇总

Dapr 于 2019 年在微软创建。随着时间的推移&#xff0c;许多社区成员加入该项目并做出贡献&#xff0c;扩展并帮助它在 2021 年 2 月达到了稳定的 1.0 版本。2021年3 月提交给 CNCF&#xff0c;在2021年11月被接受 Dapr 作为 CNCF 的孵化项目。关于CNCF 的每个级别的成熟度要求…

逻辑查询优化

为什么80%的码农都做不了架构师&#xff1f;>>> 1、逻辑查询优化 基于关系代数理论&#xff0c;启发式规则&#xff0c;对查询进行等价重写。 2、查询重写规则 &#xff08;1&#xff09;子查询优化 &#xff08;2&#xff09;视图重写 &#xff08;3&#xff09;等…

CentOS 7 Root用户密码重置 2017-04-02

跨平台系列汇总&#xff1a;http://www.cnblogs.com/dunitian/p/4822808.html#linux 异常处理汇总-服 务 器 http://www.cnblogs.com/dunitian/p/4522983.html 开机的时候按e &#xff08;如果正在使用&#xff0c;你可以输入reboot&#xff0c;然后赶紧按回车键&#xff0c;也…

Android之解决布局文件图片太大同步放缩后挤掉其它布局的问题

1、问题 局文件图片太大同步放缩后挤掉其它布局的问题 比如有个图片logo1.png,很大,在平板上图片布局写成这样 <ImageViewandroid:src="@drawable/logo1"android:layout_width="wrap_content"android:layout_height="wrap_content"andro…

oracle处理考勤时间,拆分考勤时间段的sql语句

最近一直在用mysql数据库做云项目,有段时间没有接触oracle了,昨天有朋友叫我帮忙用oracle处理一个考勤记录的需求,我在考虑如何尽量精简实现上面花了一些时间。于是把这个实现做个总结。 需求如下: rownum为奇数的为进厂时间&#xff0c;偶数的为离场时间第一个奇数行的时间被第…

c语言程序出现错误,C语言程序错误,不能正常读写文件,求解啊

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼#define LEN sizeof(struct student)#include#include#includestruct student{int num;char name[20];int score[3];int aver;}; void personal_information_input(FILE *fp){struct student *p;int a,i,n;printf("请输入将要…

实现DDD领域驱动设计: Part 2

原文链接: https://dev.to/salah856/implementing-domain-driven-design-part-ii-2i36实现&#xff1a;构建块这是本系列的重要部分。我们将通过示例介绍和解释一些明确的规则。在实现领域驱动设计时&#xff0c;你可以遵循这些规则并应用到你的解决方案中。示例示例将使用GitH…

王彪20162321 2016-2017-2 《程序设计与数据结构》第5周学习总结

王彪 2016-2017-2 《程序设计与数据结构》第5周学习总结 教材学习内容总结 1.关键概念 1.面向对象程序设计的核心是类的定义&#xff0c;它代表了状态和行为的对象。2.变量的作用域依赖于变量声明的位置&#xff0c;作用域决定在哪里可以使用变量。3.对象应该是封装的&#xff…

ubuntukylin14安装ns-allinone-2.35教程(虚拟机ubuntu同理)

准备材料&#xff1a; 1.ubuntukylin14&#xff0c;百度进官网自行下载&#xff1b; 2.ns-allinone-2.35.tar.gz&#xff0c;百度进官网自行下载&#xff1b; 3.虚拟机&#xff1a;vmwareworkstation&#xff08;可选&#xff09;. 4.不推荐windows环境下的cygwinns2&#xff0…

C语言之理解(*(void (*)())0)()和signal函数

1、需要理解的表达式 计算机启动的时候,硬件将要调用首地址为0位置的子例程,表达式如下 (*(void (*)())0)(); 2、解释 我们知道void (*f)() f是指向返回值为void类型的函数 因此,(void (*)())表示指向返回值为void类型的函数的指针的类型强制转换符 我们调用函数指针的时…

c语言指针索引数组,C语言数组指针表示法

指针在处理数组时很有用&#xff0c;我们可以用指针指向已有的数组&#xff0c;也可以从堆上分配内存然后把这块内存当做一个数组使用。数组表示法和指针表示法在某种意义上可以互换。不过&#xff0c;它们并不完全相同&#xff0c;后面的“数组和指针的差别”中会详细说明。单…

关于我自己的三个层次

有时候会意识到自己不够聪明&#xff0c;然后在把自己同那些大家相比时会感到自己的渺小&#xff0c;比如说博弈论专家纳什在20世界50年代就弄清楚的博弈论我现在学起来还是感觉很晦涩难懂&#xff0c;这就是自己的天分确实不是很好的直接证明。 天分好不好不是决定性因素&…

C# 使用AggregateException 信息

为了得到所有失败任务的异常信息&#xff0c;可以将 Task.WhenAll 返回的结果写到一个Task 变量中。这个任务会一直等到所有任务都结束。否则&#xff0c;仍然可能错过抛出的异常。上一小节中&#xff0c;catch 语句只检索到第一个任务的异常。不过&#xff0c;现在可以访问外部…

简单动态规划问题分析

例题&#xff1a; 1022: 菜鸟和大牛&#xff08;csuoj&#xff09; 像这一类问题&#xff0c;首先不管是属于什么类型的&#xff0c;如果是按照题目的思路一步步走下来&#xff0c;然后运行&#xff0c;最后肯定是要超时的&#xff0c;究其原因&#xff0c;它的时间复杂度很不合…

Android之内置和外置sdcard路径显示并且写入数据

1、效果图片 2、部分代码 package com.example.sdcardcheck;import java.io.File; import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.IOException; import java.io.OutputStream; import java.lang.reflect.Array; import java.lang.…