Skip to content

Commit

Permalink
doc: Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
jaywcjlove committed Oct 9, 2021
1 parent 0a40ac7 commit 651f05e
Showing 1 changed file with 25 additions and 9 deletions.
34 changes: 25 additions & 9 deletions README.md
Expand Up @@ -58,8 +58,6 @@ type MarkdownPreviewProps = {

This [`ReactMarkdownProps`](https://github.com/remarkjs/react-markdown/tree/02bac837bf141cdb8face360fb88be6fa33ab194#props) details. [Upgrade `react-markdown` v6](https://github.com/remarkjs/react-markdown/blob/15b4757082cf3f32a25eba0b8ea30baf751a8b40/changelog.md#600---2021-04-15)



- `children` (`string`, default: `''`)\
Markdown to parse
- `className` (`string?`)\
Expand Down Expand Up @@ -103,13 +101,33 @@ This [`ReactMarkdownProps`](https://github.com/remarkjs/react-markdown/tree/02ba
Same as `transformLinkUri` but for images
- `components` (`Object.<string, Component>`, default: `{}`)\
Object mapping tag names to React components
- `remarkPlugins` (`Array.<Plugin>`, default: `[]`)\
- `remarkPlugins`<!--rehype:style=color: red;background-color: #ffeb3b;--> (`Array.<Plugin>`, default: `[]`)\
List of [remark plugins](https://github.com/remarkjs/remark/blob/main/doc/plugins.md#list-of-plugins) to use.
See the next section for examples on how to pass options
- `rehypePlugins` (`Array.<Plugin>`, default: `[]`)\
- `rehypePlugins`<!--rehype:style=color: red;background-color: #ffeb3b;--> (`Array.<Plugin>`, default: `[]`)\
List of [rehype plugins](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins) to use.
See the next section for examples on how to pass options

## Markdown Features

### Supports for CSS Style

Use HTML comments [`<!--rehype:xxx-->`](https://github.com/jaywcjlove/rehype-attr)<!--rehype:style=color: red;--> to let Markdown support style customization.

```markdown
## Title
<!--rehype:style=display: flex; height: 230px; align-items: center; justify-content: center; font-size: 38px;-->

Markdown Supports **Style**<!--rehype:style=color: red;-->
```

### Support for [GFM footnotes](https://github.blog/changelog/2021-09-30-footnotes-now-supported-in-markdown-fields/)

```markdown
Here is a simple footnote[^1]. With some additional text after it.

[^1]: My reference.
```

## Development

Expand All @@ -119,9 +137,8 @@ Runs the project in development mode.
# Step 1, run first,
# listen to the component compile and output the .js file
# listen for compilation output type .d.ts file
npm run watch
# listen to the component compile and output the .css file
npm run css:watch
npm run watch
# Step 2, development mode, listen to compile preview website instance
npm start
```
Expand All @@ -135,16 +152,15 @@ npm run build
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!


### Related

If you need more features-rich Markdown Editor, you can use [@uiwjs/react-markdown-editor](https://github.com/uiwjs/react-markdown-editor)

- [@uiw/react-markdown-editor](https://github.com/uiwjs/react-markdown-editor): A markdown editor with preview, implemented with React.js and TypeScript.
- [@uiw/react-md-editor](https://github.com/uiwjs/react-md-editor): A simple markdown editor with preview, implemented with React.js and TypeScript.
- [@uiw/react-textarea-code-editor](https://github.com/uiwjs/react-textarea-code-editor): A simple code editor with syntax highlighting.
- [@uiw/react-codemirror](https://github.com/uiwjs/react-codemirror): CodeMirror component for React. @codemirror
- [@uiw/react-monacoeditor](https://github.com/jaywcjlove/react-monacoeditor): Monaco Editor component for React.
- [@uiw/react-markdown-editor](https://github.com/uiwjs/react-markdown-editor): A markdown editor with preview, implemented with React.js and TypeScript.
- [@uiw/react-md-editor](https://github.com/uiwjs/react-md-editor): A simple markdown editor with preview, implemented with React.js and TypeScript.

## License

Expand Down

0 comments on commit 651f05e

Please sign in to comment.