正文

react解析markdown文件

IP云
IP云V管理员/4 阅读
08/30
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

当当当又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
```## DocumentOfficial document [demo preview](https://uiwjs.github.io/react-markdown-editor/) ([