Skip to content

Commit 651f05e

Browse files
committed
doc: Update README.md
1 parent 0a40ac7 commit 651f05e

File tree

1 file changed

+25
-9
lines changed

1 file changed

+25
-9
lines changed

README.md

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,6 @@ type MarkdownPreviewProps = {
5858

5959
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)
6060

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

111+
## Markdown Features
112+
113+
### Supports for CSS Style
114+
115+
Use HTML comments [`<!--rehype:xxx-->`](https://github.com/jaywcjlove/rehype-attr)<!--rehype:style=color: red;--> to let Markdown support style customization.
116+
117+
```markdown
118+
## Title
119+
<!--rehype:style=display: flex; height: 230px; align-items: center; justify-content: center; font-size: 38px;-->
120+
121+
Markdown Supports **Style**<!--rehype:style=color: red;-->
122+
```
123+
124+
### Support for [GFM footnotes](https://github.blog/changelog/2021-09-30-footnotes-now-supported-in-markdown-fields/)
125+
126+
```markdown
127+
Here is a simple footnote[^1]. With some additional text after it.
128+
129+
[^1]: My reference.
130+
```
113131

114132
## Development
115133

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

138-
139155
### Related
140156

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

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

149165
## License
150166

0 commit comments

Comments
 (0)