当当当又get到了一个新技能,使用react-markdown来直接解析markdown文件(咳咳,小菜鸟的自娱自乐)

项目中遇到了一个API的那种展示方式,类似于入门手册啥的那种,如果是一个个调用接口,改样式很复杂,所以用了直接解析后台给的markdown文件

首先我们需要安装一个react的网页语法高亮插件,(我最初并没有安装这个,结果导致解析文件是出来了,但是样式还挺丑的)

  1. npm install react-syntax-highlighter --save //相关介绍在这里https://www.javascriptcn.com/read-43226.html

1.高亮的js  codeBlock.js

  1. import React from 'react';
  2. import SyntaxHighlighter from 'react-syntax-highlighter';
  3. import { tomorrowNightEighties } from 'react-syntax-highlighter/dist/esm/styles/hljs'; //我这边使用的是夜晚模式的css,你也可以在react-syntax-highlighter/dist/esm/styles/hljs里面找你自己喜欢的css,把名字替换就行 eg:
  1. import { monokai } from 'react-syntax-highlighter/dist/esm/styles/hljs';
  1. 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文件如下

  1. <p align="center">
  2. <a href="https://github.com/uiwjs/react-markdown-editor/issues">
  3. <img src="https://img.shields.io/github/issues/uiwjs/react-markdown-editor.svg">
  4. </a>
  5. <a href="https://github.com/uiwjs/react-markdown-editor/network">
  6. <img src="https://img.shields.io/github/forks/uiwjs/react-markdown-editor.svg">
  7. </a>
  8. <a href="https://github.com/uiwjs/react-markdown-editor/stargazers">
  9. <img src="https://img.shields.io/github/stars/uiwjs/react-markdown-editor.svg">
  10. </a>
  11. <a href="https://github.com/uiwjs/react-markdown-editor/releases">
  12. <img src="https://img.shields.io/github/release/uiwjs/react-markdown-editor.svg">
  13. </a>
  14. <a href="https://www.npmjs.com/package/@uiw/react-markdown-editor">
  15. <img src="https://img.shields.io/npm/v/@uiw/react-markdown-editor.svg">
  16. </a>
  17. </p>
  18.  
  19. <p align="center">
  20. A markdown editor with preview, implemented with React.js and TypeScript.
  21. </p>
  22.  
  23. ## Install
  24.  
  25. ```bash
  26. npm i @uiw/react-markdown-editor
  27. ```
  28.  
  29. ## Document
  30.  
  31. Official document [demo preview](https://uiwjs.github.io/react-markdown-editor/) ([
  32. react解析markdown文件的更多相关文章

      1. 解析Markdown文件生成React组件文档
      1. 前言 最近做的项目使用了微前端框架single-spa. 对于这类微前端框架而言,通常有个utility应用,也就是公共应用,里面是各个子应用之间可以共用的一些公共组件或者方法. 对于一个团队而言,项 ...

      1. 开发一个简单的chrome插件-解析本地markdown文件
      1. 准备软件环境 1. 软件环境 首先,需要使用到的软件和工具环境如下: 一个最新的chrome浏览器 编辑器vscode 2. 使用的js库 代码高亮库:prismjs https://prismjs. ...

      1. 自制 Python小工具 将markdown文件转换成Html文件
      1. 今天看到了一个Python库,名为markdown.瞬间就给了我一个灵感,那就是制作一个将markdown文件转换成html文件的小工具. 我的实验环境 操作系统: Windows 7 64位 旗舰版 ...

      1. 使用Java解析XML文件或XML字符串的例子
      1. 转: 使用Java解析XML文件或XML字符串的例子 2017年09月16日 11:36:18 inter_peng 阅读数:4561 标签: JavaXML-Parserdom4j 更多 个人分类: ...

      1. 使用VS Code编写Markdown文件
      1. VS Code默认支持Markdown文件文件格式,这里介绍两个比较实用的功能,后续有新发现,可以持续更新. 实时预览 顾名思义,实时编辑,实时预览解析效果. 在VS Code扩展中搜索"M ...

      1. 前端解析Markdown
      1. 目录 前端解析Markdown 1.使用strapdown 1.1.下载 1.2.使用 2.使用marked(配合highlightjs) 2.1.下载 2.2.使用 3.使用mdjs(配合highl ...

      1. python实现解析markdown文档中的图片,并且保存到本地~
      1. 背景 前阵子简书好像说是凉了,搞得我有点小慌,毕竟我的大部分博客都是放在简书上面的,虽然简书提供了打包导出功能,但是只能导出文字,图片的话还是存在简书服务器上面,再加上我一直想要重新做一个个人博客,于 ...

      1. 监听 Markdown 文件并热更新 Next.js 页面
      1. Next.js 提供了 Fast-Refresh 能力,它可以为您对 React 组件所做的编辑提供即时反馈. 但是,当你通过 Markdown 文件提供网站内容时,由于 Markdown 不是 Re ...

      1. Android 解析XML文件和生成XML文件
      1. 解析XML文件 public static void initXML(Context context) { //can't create in /data/media/0 because permis ...

    1.  
    2. 随机推荐

        1. 039.[转] 基于 Kubernetes 和 Spring Cloud 的微服务化实践
        1. http://dockone.io/article/2967 基于 Kubernetes 和 Spring Cloud 的微服务化实践 写在前面 网易云容器平台期望能给实施了微服务架构的团队提供完整的 ...

        1. Saltstack_使用指南14_无master
        1. 1. 主机规划 salt 版本 [root@salt100 ~]# salt --version salt (Oxygen) [root@salt100 ~]# salt-minion --versi ...

        1. Zookeeper学习(一)
        1. shell角度 API角度 Zookeeper可单节点,可分布式 作用: distributed coordination(分布式协调) 同一时间只有一个对外提供服务,另外的就是standy. 当ac ...

        1. SQL Server清理数据库日志的脚本-干货
        1. USE [master]GOALTER DATABASE AAAAAA SET RECOVERY SIMPLE WITH NO_WAITGOALTER DATABASE AAAAAA SET RECO ...

        1. Thinkphp 模板中 if 嵌套层级过多的问题,嵌套3级就报错,取消层级限制
        1. 解决此问题有两种办法:1.第三层if换成eq或者原生<?php 'abc';>  2.修改Tp核心配置文件 1.第三层if换成eq或者原生<?php 'abc';> 如下图&l ...

        1. [Linux] 常见的并发模型
        1. 进程&线程(Apache) C10K问题异步非阻塞(Nginx,Libevent,NodeJS) 开发时复杂度高协程 (Golang Erlang lua) goroutine channel ...

        1. Linux uevent分析、用户接收uevent以及mdev分析
        1. 关键词:uevent.netlink.ADD/REMOVE/CHANGE.uevent_helper.hotplug.usermode helper.mdev.mdev.conf等等. 本文从三方面了 ...

        1. Druid-代码段-4-2
        1. 所属文章:池化技术(一)Druid是如何管理数据库连接的? 本代码段对应流程4.1,连接池瘦身: //连接池瘦身 public void shrink(boolean checkTime, boole ...

        1. acwing 50. 序列化二叉树
        1. 地址 https://www.acwing.com/problem/content/46/ 请实现两个函数,分别用来序列化和反序列化二叉树. 您需要确保二叉树可以序列化为字符串,并且可以将此字符串反序 ...

        1. [WPF]实现TextBox文本框单击全选
        1. 原文:[WPF]实现TextBox文本框单击全选 /// <summary>         /// Void:设置获取焦点时全选文本         /// </summary&g ...