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/) ([🇨🇳中國鏡像網站](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**)

> [Other Props Options](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

[MIT © Kenny Wong](./LICENSE)

照例先安裝react-markdown

npm install --save react-markdown  //具體的介紹在這里https://www.javascriptcn.com/read-34344.html

解析markdown文件的home.js

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;

然后就可以出來效果了

 注：這個時候你看你的f12中屬性都是添加到各個元素里面的，如果你想要的自己定義css，這個時候可以在這里添加個屬性，然后再引入你想要的css文件就可以了

import './mark.css'; //自己定義的css

<SyntaxHighlighter language="" style={tomorrowNightEighties} useInlineStyles={false}> //userInlineStyles可以給元素添加classname
                {value}
            </SyntaxHighlighter>