react使用markdown进行展示

有一些文档非常长,但是又要挨个设置样式,直接用

组件库 - marked

注意文档要放在public下才能读取。但非常方便

import { marked, Renderer } from "marked".....const [html, setHtml] = useState<any>("")const renderer: Renderer = new marked.Renderer()const getMarkdownFile = () => {const path = "/PrivacyPolicy.md"if (!path) {return}fetch(path).then(function (response) {return response.text()}).then(function (data) {setHtml(marked(data, { renderer }))})}useEffect(() => {getMarkdownFile()}, [])......<div id="markdown"><div dangerouslySetInnerHTML={{ __html: html }} />
</div>

然后css不用全局,用id即可

最后是我的markdwon样式

#markdown {overflow: scroll;color: rgba(255, 255, 255, 0.80);padding: 0 20px;font-family: "PingFang SC";font-size: 14px;font-style: normal;font-weight: 400;line-height: 200%;
}
#markdown .effectiveDate {color:rgba(255, 255, 255, 0.50); ;
}#markdown strong {color: white;
}#markdown p {margin: 20px 0;
}
#markdown .no-wrap{margin: 20px 0;
}
#markdown h5 {padding: 20px 0 10px 0;
}
#markdown h5 strong{color: #998D76;
}
#markdown h1 strong{color: #998D76;/* position: relative; *//* top: 15px; */
}
#markdown a {color: #83574E;
}#markdown li p {margin-bottom: 0px;padding: 0px;
}#markdown ul {list-style: disc;padding-left: 24px;
}#markdown li {list-style: disc;
}#markdown ol {padding-left: 20px;
}
#markdown ol li {list-style: auto;
}

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

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

相关文章

3-7 使用深度学习解决温度即示数问题

3-7 使用深度学习解决温度即示数问题 直接上代码 %matplotlib inline import matplotlib.pyplot as plt import numpy as np import torch torch.set_printoptions(edgeitems2, linewidth75)设置Jupyter Notebook在单元格中内嵌显示图像&#xff0c;导入所需库并设置PyTorch的…

代码随想三刷动态规划篇10

代码随想三刷动态规划篇10 300. 最长递增子序列题目代码 674. 最长连续递增序列题目代码 718. 最长重复子数组题目代码 1143. 最长公共子序列题目代码 1035. 不相交的线题目代码 300. 最长递增子序列 题目 链接 代码 class Solution {public int lengthOfLIS(int[] nums) {…

裸金属服务器与物理服务器之间的区别

裸金属服务器与物理服务器之间主要的区别就在于虚拟化技术、资源共享和灵活性等多种方面。 裸金属服务器主要是通过虚拟化技术将物理服务器划分成多个独立的虚拟机&#xff0c;致使每个虚拟机都具有独立的操作系统与资源&#xff1b;物理服务器则是指有着独立的服务器硬件&…

阿里发布大模型发布图结构长文本处理智能体,超越GPT-4-128k

随着大语言模型的发展&#xff0c;处理长文本的能力成为了一个重要挑战。虽然有许多方法试图解决这个问题&#xff0c;但都存在不同程度的局限性。最近&#xff0c;阿里巴巴的研究团队提出了一个名为GraphReader的新方法&#xff0c;通过将长文本组织成图结构&#xff0c;并利用…

0. python面试常见问题

这里写目录标题 1.python迭代器和生成器1.1 迭代器1.2 生成器1.3 总结一下迭代器和生成器的应用场景 什么是装饰器&#xff08;decorator&#xff09;Python中如何实现多线程-GIL&#xff08;全局解释器锁&#xff09; 知乎&#xff1a;python面试170题 知乎&#xff1a;30道py…

2,区块链、数字货币及其应用场景(react+区块链实战)

2&#xff0c;区块链、数字货币及其应用场景&#xff08;react区块链实战&#xff09; 一、什么是区块链&#xff1f;1 ibloackchain&#xff08;1&#xff09;安装ibloackchain&#xff08;2&#xff09;Blance查询余额&#xff08;3&#xff09;Mine挖矿&#xff08;4&#x…

JavaScript中的拷贝技术探秘:浅拷贝与深拷贝的奥秘

最新技术资源&#xff08;建议收藏&#xff09; https://www.grapecity.com.cn/resources/ 前言 JavaScript中的浅拷贝和深拷贝是非常重要的概念&#xff0c;它们在处理对象和数组时具有不同的作用。在编程中&#xff0c;经常需要复制数据以便进行各种操作&#xff0c;但必须注…

小波与傅里叶变换的对比(Python)

直接上代码&#xff0c;理论可以去知乎看。 #Import necessary libraries %matplotlib inline import numpy as np import matplotlib.pyplot as plt import seaborn as snsimport pywt from scipy.ndimage import gaussian_filter1d from scipy.signal import chirp import m…

基于 sftp 的 NAS (局域网文件存储服务器)

局域网 NAS (文件存储服务器) 的基本功能有: 能够存储文件, 同时能够通过多个设备访问 (上传/下载) 文件. 这些功能通过 sftp 可以实现. sftp 是基于 SSH 的文件传输协议, SSH 全程加密传输, 使用 公钥 认证 (不使用密码/口令), 能够提供很高的安全性. 上文说到, 在 LVM 和 bt…

谷粒商城-个人笔记(集群部署篇三)

前言 ​学习视频&#xff1a;​Java项目《谷粒商城》架构师级Java项目实战&#xff0c;对标阿里P6-P7&#xff0c;全网最强​学习文档&#xff1a; 谷粒商城-个人笔记(基础篇一)谷粒商城-个人笔记(基础篇二)谷粒商城-个人笔记(基础篇三)谷粒商城-个人笔记(高级篇一)谷粒商城-个…

古建筑倾斜在线监测系统:科技守护历史的创新实践

​ ​​在文化遗产保护的广阔领域中&#xff0c;古建筑的健康监测占据着举足轻重的地位。然而&#xff0c;传统的监测方法往往受限于布线复杂、安装难度大以及对古建筑本体可能造成的伤害等问题。近年来&#xff0c;一种新型的古建筑倾斜在线监测系统应运而生&#xff0c;它…

Halcon 模糊圆边的找圆案例

Halcon 模糊圆边的找圆案例 基本思路 1.将图像转成灰度图像 2.再观察要找到的区域的灰度值变化&#xff0c;找到前景与背景的具体数值。 3.根据找到的前景与背景的具体数值&#xff0c;增强图像对比度。&#xff08;使图像变成黑白图片&#xff09; 4.使用灰度直图工具进行阈值…

用Vue3和Plotly.js绘制交互式3D散点图

本文由ScriptEcho平台提供技术支持 项目地址&#xff1a;传送门 使用 Plotly.js 创建 2D 密度图 应用场景介绍 密度图是一种可视化数据分布的图表&#xff0c;它显示了数据点的密度在不同区域的变化情况。在许多科学和工程领域中&#xff0c;密度图被广泛用于探索和分析数据…

5G(NR) NTN 卫星组网架构

5G(NR) NTN 卫星组网架构 参考 3GPP TR 38.821 5G NTN 技术适用于高轨、低轨等多种星座部署场景&#xff0c;是实现星地网络融合发展的可行技术路线。5G NTN 网络分为用户段、空间段和地面段三部分。其中用户段由各种用户终端组成&#xff0c;包括手持、便携站、嵌入式终端、车…

git撤销/返回到某次提交(idea工具 + gitbush)

不多说废话&#xff0c;直接展示使用。 方法一&#xff1a;使用idea工具进行返回 准备某次过度提交 使用idea打开git log 找到要回去的版本 点击右键选到reset 模式选hard&#xff0c;强制回滚 这个时候本地代码已经回归你指定的版本了。 这个时候再进行强制推送&#xff0c…

Drools开源业务规则引擎(三)- 事件模型(Event Model)

文章目录 Drools开源业务规则引擎&#xff08;三&#xff09;- 事件模型&#xff08;Event Model&#xff09;1.org.kie.api.event2.RuleRuntimeEventManager3.RuleRuntimeEventListener接口说明示例规则文件规则执行日志输出 4.AgentaEventListener接口说明示例监听器实现类My…

09 docker 安装tomcat 详解

目录 一、安装tomcat 1. tomcat镜像的获取 2. docker创建容器实列 3. 访问测试 404错误 4. 解决方案 5. 使用免修改版容器镜像 5.1. 运行实列的创建 5.2. 出现问题及解决&#xff1a; 6. 验证 OK 一、安装tomcat 1. tomcat镜像的获取 docker search tomcat #docker …

SCI二区TOP|蜘蛛黄蜂优化算法(SWO)原理及实现【免费获取Matlab代码】

目录 1.背景2.算法原理2.1算法思想2.2算法过程 3.结果展示4.参考文献5.代码获取 1.背景 2023年&#xff0c;M Abdel-Basset受到蜘蛛黄蜂优化社会行为启发&#xff0c;提出了蜘蛛黄蜂优化算法&#xff08;Spider Wasp Optimizer, SWO&#xff09;。 2.算法原理 2.1算法思想 S…

dpo相对于rlhf的优化,或两者之间的异同

DPO (Direct Preference Optimization) 和 RLHF (Reinforcement Learning from Human Feedback) 都是用于优化大型语言模型以符合人类偏好的方法&#xff0c;但它们在实现方式和效果上有一些重要的区别&#xff1a; 相同点 目标&#xff1a;两种方法都旨在使模型输出与人类偏…

Android | 开发UI时候要注意的(单线程模型 导致事件执行到最后都需要回归主线程)

在 Android 开发中&#xff0c;所有涉及到 UI 操作的代码必须在主线程&#xff08;UI 线程&#xff09;上执行的原因如下所述&#xff0c;以及程序员在开发过程中需要注意的一些事项&#xff1a; 1. 原因&#xff1a; 安全性和稳定性&#xff1a; Android 系统是单线程模型的&…