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文件的更多相关文章
前言 最近做的项目使用了微前端框架single-spa. 对于这类微前端框架而言,通常有个utility应用,也就是公共应用,里面是各个子应用之间可以共用的一些公共组件或者方法. 对于一个团队而言,项 ...
准备软件环境 1. 软件环境 首先,需要使用到的软件和工具环境如下: 一个最新的chrome浏览器 编辑器vscode 2. 使用的js库 代码高亮库:prismjs https://prismjs. ...
今天看到了一个Python库,名为markdown.瞬间就给了我一个灵感,那就是制作一个将markdown文件转换成html文件的小工具. 我的实验环境 操作系统: Windows 7 64位 旗舰版 ...
转: 使用Java解析XML文件或XML字符串的例子 2017年09月16日 11:36:18 inter_peng 阅读数:4561 标签: JavaXML-Parserdom4j 更多 个人分类: ...
VS Code默认支持Markdown文件文件格式,这里介绍两个比较实用的功能,后续有新发现,可以持续更新. 实时预览 顾名思义,实时编辑,实时预览解析效果. 在VS Code扩展中搜索"M ...
目录 前端解析Markdown 1.使用strapdown 1.1.下载 1.2.使用 2.使用marked(配合highlightjs) 2.1.下载 2.2.使用 3.使用mdjs(配合highl ...
背景 前阵子简书好像说是凉了,搞得我有点小慌,毕竟我的大部分博客都是放在简书上面的,虽然简书提供了打包导出功能,但是只能导出文字,图片的话还是存在简书服务器上面,再加上我一直想要重新做一个个人博客,于 ...
Next.js 提供了 Fast-Refresh 能力,它可以为您对 React 组件所做的编辑提供即时反馈. 但是,当你通过 Markdown 文件提供网站内容时,由于 Markdown 不是 Re ...
解析XML文件 public static void initXML(Context context) { //can't create in /data/media/0 because permis ...
随机推荐
http://dockone.io/article/2967 基于 Kubernetes 和 Spring Cloud 的微服务化实践 写在前面 网易云容器平台期望能给实施了微服务架构的团队提供完整的 ...
1. 主机规划 salt 版本 [root@salt100 ~]# salt --version salt (Oxygen) [root@salt100 ~]# salt-minion --versi ...
shell角度 API角度 Zookeeper可单节点,可分布式 作用: distributed coordination(分布式协调) 同一时间只有一个对外提供服务,另外的就是standy. 当ac ...
USE [master]GOALTER DATABASE AAAAAA SET RECOVERY SIMPLE WITH NO_WAITGOALTER DATABASE AAAAAA SET RECO ...
解决此问题有两种办法:1.第三层if换成eq或者原生<?php 'abc';> 2.修改Tp核心配置文件 1.第三层if换成eq或者原生<?php 'abc';> 如下图&l ...
进程&线程(Apache) C10K问题异步非阻塞(Nginx,Libevent,NodeJS) 开发时复杂度高协程 (Golang Erlang lua) goroutine channel ...
关键词:uevent.netlink.ADD/REMOVE/CHANGE.uevent_helper.hotplug.usermode helper.mdev.mdev.conf等等. 本文从三方面了 ...
所属文章:池化技术(一)Druid是如何管理数据库连接的? 本代码段对应流程4.1,连接池瘦身: //连接池瘦身 public void shrink(boolean checkTime, boole ...
地址 https://www.acwing.com/problem/content/46/ 请实现两个函数,分别用来序列化和反序列化二叉树. 您需要确保二叉树可以序列化为字符串,并且可以将此字符串反序 ...
原文:[WPF]实现TextBox文本框单击全选 /// <summary> /// Void:设置获取焦点时全选文本 /// </summary&g ...