react解析markdown文件
当当当又get到了一个新技能,使用react-markdown来直接解析markdown文件(咳咳,小菜鸟的自娱自乐)
项目中遇到了一个API的那种展示方式,类似于入门手册啥的那种,如果是一个个调用接口,改样式很复杂,所以用了直接解析后台给的markdown文件
首先我们需要安装一个react的网页语法高亮插件,(我最初并没有安装这个,结果导致解析文件是出来了,但是样式还挺丑的)
npm install react-syntax-highlighter --save //相关介绍在这里https://www.javascriptcn.com/read-43226.html
1.高亮的js codeBlock.js
import React from 'react';
import SyntaxHighlighter from 'react-syntax-highlighter';
import { tomorrowNightEighties } from 'react-syntax-highlighter/dist/esm/styles/hljs'; //我这边使用的是夜晚模式的css,你也可以在react-syntax-highlighter/dist/esm/styles/hljs里面找你自己喜欢的css,把名字替换就行 eg:
import { monokai } from 'react-syntax-highlighter/dist/esm/styles/hljs';
import { Form } from 'antd'; class CodeBlock extends React.PureComponent { render() { const { value } = this.props; return ( <SyntaxHighlighter language="" style={tomorrowNightEighties}> {value} </SyntaxHighlighter> ); } } export default Form.create()(CodeBlock);
2.然后解析文件的js
我这边直接从网上找了个.md文件如下
<p align="center">
<a href="https://github.com/uiwjs/react-markdown-editor/issues">
<img src="https://img.shields.io/github/issues/uiwjs/react-markdown-editor.svg">
</a>
<a href="https://github.com/uiwjs/react-markdown-editor/network">
<img src="https://img.shields.io/github/forks/uiwjs/react-markdown-editor.svg">
</a>
<a href="https://github.com/uiwjs/react-markdown-editor/stargazers">
<img src="https://img.shields.io/github/stars/uiwjs/react-markdown-editor.svg">
</a>
<a href="https://github.com/uiwjs/react-markdown-editor/releases">
<img src="https://img.shields.io/github/release/uiwjs/react-markdown-editor.svg">
</a>
<a href="https://www.npmjs.com/package/@uiw/react-markdown-editor">
<img src="https://img.shields.io/npm/v/@uiw/react-markdown-editor.svg">
</a>
</p> <p align="center">
A markdown editor with preview, implemented with React.js and TypeScript.
</p> ## Install ```bash
npm i @uiw/react-markdown-editor
``` ## Document Official document [demo preview](https://uiwjs.github.io/react-markdown-editor/) ([react解析markdown文件的更多相关文章
- 解析Markdown文件生成React组件文档
前言 最近做的项目使用了微前端框架single-spa. 对于这类微前端框架而言,通常有个utility应用,也就是公共应用,里面是各个子应用之间可以共用的一些公共组件或者方法. 对于一个团队而言,项 ...
- 开发一个简单的chrome插件-解析本地markdown文件
准备软件环境 1. 软件环境 首先,需要使用到的软件和工具环境如下: 一个最新的chrome浏览器 编辑器vscode 2. 使用的js库 代码高亮库:prismjs https://prismjs. ...
- 自制 Python小工具 将markdown文件转换成Html文件
今天看到了一个Python库,名为markdown.瞬间就给了我一个灵感,那就是制作一个将markdown文件转换成html文件的小工具. 我的实验环境 操作系统: Windows 7 64位 旗舰版 ...
- 使用Java解析XML文件或XML字符串的例子
转: 使用Java解析XML文件或XML字符串的例子 2017年09月16日 11:36:18 inter_peng 阅读数:4561 标签: JavaXML-Parserdom4j 更多 个人分类: ...
- 使用VS Code编写Markdown文件
VS Code默认支持Markdown文件文件格式,这里介绍两个比较实用的功能,后续有新发现,可以持续更新. 实时预览 顾名思义,实时编辑,实时预览解析效果. 在VS Code扩展中搜索"M ...
- 前端解析Markdown
目录 前端解析Markdown 1.使用strapdown 1.1.下载 1.2.使用 2.使用marked(配合highlightjs) 2.1.下载 2.2.使用 3.使用mdjs(配合highl ...
- python实现解析markdown文档中的图片,并且保存到本地~
背景 前阵子简书好像说是凉了,搞得我有点小慌,毕竟我的大部分博客都是放在简书上面的,虽然简书提供了打包导出功能,但是只能导出文字,图片的话还是存在简书服务器上面,再加上我一直想要重新做一个个人博客,于 ...
- 监听 Markdown 文件并热更新 Next.js 页面
Next.js 提供了 Fast-Refresh 能力,它可以为您对 React 组件所做的编辑提供即时反馈. 但是,当你通过 Markdown 文件提供网站内容时,由于 Markdown 不是 Re ...
- Android 解析XML文件和生成XML文件
解析XML文件 public static void initXML(Context context) { //can't create in /data/media/0 because permis ...
随机推荐
- GitHub最强技术面试手册:Tech Interview Handbook
摘要: 求职还是需要认真准备的. 原文:超实用技术面试手册,从工作申请.面试考题再到优势谈判,GitHub获30000星 作者:量子位 技术人员求职面试,单刷leetcode上的大厂题库可能还不够. ...
- Delphi 任务栏中不显示窗口
目的: 1. 窗口不在任务栏显示. 2. 窗口不显示在Alt+Tab的切换列表中. 3. 在任务管理器的应用程序列表中不显示. 示例: type TAppWndBrowser = class( TFo ...
- 关于jvm的常识介绍
1.关于jvm的组成(只介绍1.8,以前的版本不多介绍) vm stack,native method stack,program counter register,heap,metaspace 2. ...
- LeetCode 1244. 力扣排行榜
地址 https://www.acwing.com/solution/LeetCode/content/5765/ 题目描述新一轮的「力扣杯」编程大赛即将启动,为了动态显示参赛者的得分数据,需要设计一 ...
- Leetcode 90. 子集 II
地址 https://leetcode-cn.com/problems/subsets-ii/ 给定一个可能包含重复元素的整数数组 nums,返回该数组所有可能的子集(幂集). 说明:解集不能包含重 ...
- WPF (DataGridRowHeaderStyle)实现自义定行样式 并绑定数据
原文:WPF (DataGridRowHeaderStyle)实现自义定行样式 并绑定数据 功能阐述 就上面那图片 刚开始 考虑使用 RowHeaderTemplate 来实现 发现总绑定不上数据 ...
- CF732D Exams
这题可以用二分答案来做 那么为什么可以用二分答案呢? 答案当然是满足了单调性. 假设用\(x\)天能够考完所有试,那么用大于$x $天必定也能够考完所有试,所以满足了单调性,我们就可以二分答案 那么如 ...
- Matlab2019a启动慢,寻找许可证耽误时间解决办法
Matlab2017b启动慢,一直处于初始化状态的解决办法 - 善水的博客 - CSDN博客 评论区给出了更为具体的做法,效果非常好. "D:\Program Files\MATLAB\R2 ...
- OpenDaylight开发hello-world项目之代码框架搭建
OpenDaylight开发hello-world项目之开发环境搭建 OpenDaylight开发hello-world项目之开发工具安装 OpenDaylight开发hello-world项目之代码 ...
- Python与用户交互
目录 一.为什么交互? 二.如何交互? 三.Python2的交互 一.为什么交互? 让我们来回顾计算机的发明有何意义,计算机的发明是为了奴役计算机,解放劳动力.假设我们现在写了一个ATM系统取代了 ...