https://github.com/hyy1115/react-markdown-module

基于showdown封装的React-markdown组件，支持showdown的所有option配置项，采用github-markdown-css为默认样式，支持自定义其他样式。
https://github.com/hyy1115/react-markdown-module

github-markdown markdown module react showdown

Last synced: about 2 months ago
JSON representation

基于showdown封装的React-markdown组件，支持showdown的所有option配置项，采用github-markdown-css为默认样式，支持自定义其他样式。

• Host: GitHub
• URL: https://github.com/hyy1115/react-markdown-module
• Owner: hyy1115
• License: mit
• Created: 2018-01-04T11:03:25.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-01-04T12:02:29.000Z (almost 7 years ago)
• Last Synced: 2024-11-03T03:32:36.202Z (2 months ago)
• Topics: github-markdown, markdown, module, react, showdown
• Language: CSS
• Homepage:
• Size: 7.81 KB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-markdown-module

1、基于showdown封装的React-markdown组件，支持showdown的所有option配置项。

2、采用github-markdown-css为默认样式，支持自定义其他样式。

### 安装

```npm

npm i --save react-markdown-module

```

### 用法

1、基本用法

将markdown转换成html

```javascript

import ReactMarkdown from 'react-markdown-module'

const text = `

# Live demo

Changes are automatically rendered as you type.

* Implements [GitHub Flavored Markdown](https://github.github.com/gfm/)

* Renders actual, "native" React DOM elements

* Allows you to escape or skip HTML (try toggling the checkboxes above)

* If you escape or skip the HTML, no \`dangerouslySetInnerHTML\` is used! Yay!

## HTML block below

`

```

2、自定义配置项

如果你不知道有哪些可选的配置，请看：https://github.com/showdownjs/showdown/wiki/Showdown-options

自定义option会覆盖默认值，但不会影响其他默认值。

```javascript

import ReactMarkdown from 'react-markdown-module'

const text = `

# Live demo

Changes are automatically rendered as you type.

* Implements [GitHub Flavored Markdown](https://github.github.com/gfm/)

* Renders actual, "native" React DOM elements

* Allows you to escape or skip HTML (try toggling the checkboxes above)

* If you escape or skip the HTML, no \`dangerouslySetInnerHTML\` is used! Yay!

## HTML block below

`

const options = {tables: false}

```

3、自定义样式

不喜欢github-mardown-css的默认样式？没问题，只需要在你的组件导入你喜欢的样式，但是必须有一个命名空间、或者是顶级的classname。

```javascript

import ReactMarkdown from 'react-markdown-module'

import 'otherMarkdownCss.css'

const text = `

# Live demo

Changes are automatically rendered as you type.

* Implements [GitHub Flavored Markdown](https://github.github.com/gfm/)

* Renders actual, "native" React DOM elements

* Allows you to escape or skip HTML (try toggling the checkboxes above)

* If you escape or skip the HTML, no \`dangerouslySetInnerHTML\` is used! Yay!

## HTML block below

`

```