react解析markdown⽂件
当当当⼜get到了⼀个新技能，使⽤react-markdown来直接解析markdown⽂件（咳咳，⼩菜鸟的⾃娱⾃乐）
项⽬中遇到了⼀个API的那种展⽰⽅式，类似于⼊门⼿册啥的那种，如果是⼀个个调⽤接⼝，改样式很复杂，所以⽤了直接解析后台给的markdown⽂件
⾸先我们需要安装⼀个react的⽹页语法⾼亮插件，（我最初并没有安装这个，结果导致解析⽂件是出来了，但是样式还挺丑的）
npm install react-syntax-highlighter --save //相关介绍在这⾥www.javascriptcn/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 2.然后解析⽂件的js
我这边直接从⽹上了个.md⽂件如下
<p align="center">
<a href="github/uiwjs/react-markdown-editor/issues">
<img src="img.shields.io/github/issues/uiwjs/react-markdown-editor.svg">
</a>
<a href="github/uiwjs/react-markdown-editor/network">
<img src="img.shields.io/github/forks/uiwjs/react-markdown-editor.svg">
</a>
<a href="github/uiwjs/react-markdown-editor/stargazers">
<img src="img.shields.io/github/stars/uiwjs/react-markdown-editor.svg">
</a>
<a href="github/uiwjs/react-markdown-editor/releases">
<img src="img.shields.io/github/release/uiwjs/react-markdown-editor.svg">
</a>
<a href="www.npmjs/package/@uiw/react-markdown-editor">
<img src="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](uiwjs.github.io/react-markdown-editor/) ([ 中国镜像⽹站](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}
/>
)
;
}
}
<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](github/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 //具体的介绍在这⾥www.javascriptcn/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 => ())
.then(text => this.setState({markdown: text}));
}
render() {
editor barconst {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>
PDFtutorial-ScriptSpot
« 上一篇
HP93K_digital_flow中文版
下一篇 »
发表评论