react解析markdown文件

玉芳發表於 2019-6-10 16:43:00

当当当又get到了一个新技能，使用react-markdown来直接解析markdown文件（咳咳，小菜鸟的自娱自乐）
项目中遇到了一个API的那种展示方式，类似于入门手册啥的那种，如果是一个个调用接口，改样式很复杂，所以用了直接解析后台给的markdown文件
首先我们需要安装一个react的网页语法高亮插件，（我最初并没有安装这个，结果导致解析文件是出来了，但是样式还挺丑的）
<div class="cnblogs_code">
<pre>npm install react-syntax-highlighter --save //相关介绍在这里https://www.javascriptcn.com/read-43226.html</pre>
</div>
 1.高亮的js  codeBlock.js
<div class="cnblogs_code">
<pre>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：</pre>
<pre>import { monokai } from 'react-syntax-highlighter/dist/esm/styles/hljs';</pre>
<pre>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);</pre>
</div>
2.然后解析文件的js
我这边直接从网上找了个.md文件如下
<div class="cnblogs_code">
<pre>
<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>



A markdown editor with preview, implemented with React.js and TypeScript.


## Install

```bash
npm i @uiw/react-markdown-editor
```

## Document

Official document (https://uiwjs.github.io/react-markdown-editor/) ([🇨🇳中国镜像网站](http://uiw.gitee.io/react-markdown-editor/))

## Basic Usage

```jsx
import MarkdownEditor from '@uiw/react-markdown-editor';
import React from 'react';
import ReactDOM from 'react-dom';

const Dome = () => (
<MarkdownEditor
value={this.state.markdown}
onChange={this.updateMarkdown}
/>
);
```

controlled usage

```jsx
import MarkdownEditor from '@uiw/react-markdown-editor';
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
constructor() {
super();
this.state = {
 markdown: '# This is a H1\n## This is a H2\n###### This is a H6',
};
this.updateMarkdown = this.updateMarkdown.bind(this);
}

updateMarkdown(editor, data, value) {
this.setState({ markdown: value });
}

render() {
return (
 <MarkdownEditor
 value={this.state.markdown}
 onChange={this.updateMarkdown}
 />
 );
}
}

ReactDOM.render(
<App />,
document.getElementById('app')
);
```

## Props

- value (*string*) - the raw markdown that will be converted to html (**required**)
- `visble?:boolean` - Shows a preview that will be converted to html.
- `toolbars?:array` - Tool display settings.
- `toolbarsMode?:array` - Tool display settings.
- onChange (*function(editor: IInstance, data: CodeMirror.EditorChange, value: string)*) - called when a change is made (**required**)

> (https://github.com/uiwjs/react-markdown-editor/blob/8de6abbf628b6d272d7da1c28e985fbbcba71b93/src/components/CodeMirror/index.tsx#L21-L60)


### Development

```bash
npm run dev
npm run type-check:watch
npm run doc
```

## License

(./LICENSE)</pre>
</div>
照例先安装react-markdown
<div class="cnblogs_code">
<pre>npm install --save react-markdown//具体的介绍在这里https://www.javascriptcn.com/read-34344.html</pre>
</div>
解析markdown文件的home.js
<div class="cnblogs_code">
<pre>import React, {Component} from 'react';
import ReactMarkdown from 'react-markdown/with-html';
import AppMarkdown from './test.md';
import CodeBlock from './codeBlock';
class Home extends React.Component {
constructor(props) {
 super(props);
 this.state = {
 markdown: '',
 }
}
componentWillMount() {
 fetch(AppMarkdown)
 .then(res => res.text())
 .then(text => this.setState({markdown: text}));
}
render() {
 const {markdown} = this.state;
 return (
 <div>
 <div >
 <ReactMarkdown
 className="markdown-body"
 source={markdown}
 escapeHtml={false}
 renderers={{
 code: CodeBlock,
 }}
 />
 </div>
 </div>
 )
}

}

export default Home;</pre>
</div>
然后就可以出来效果了
<img src="https://img2018.cnblogs.com/blog/1117603/201906/1117603-20190610164244766-748474336.png">
 注：这个时候你看你的f12中属性都是添加到各个元素里面的，如果你想要的自己定义css，这个时候可以在这里添加个属性，然后再引入你想要的css文件就可以了
<div class="cnblogs_code">
<pre>import './mark.css'; //自己定义的css

<SyntaxHighlighter language="" style={tomorrowNightEighties} useInlineStyles={false}> //userInlineStyles可以给元素添加classname
 {value}
 </SyntaxHighlighter></pre>
</div>
  
来源：https://www.cnblogs.com/yesu/p/10998594.html

頁: [1]

琼殿技术论坛's Archiver

react解析markdown文件