代码拉取完成,页面将自动刷新
React component preview markdown text in web browser. The minimal amount of CSS to replicate the GitHub Markdown style. The current document website is converted using this react component.
$ npm install @uiw/react-markdown-preview --save
import MarkdownPreview from '@uiw/react-markdown-preview';
const source = `
## MarkdownPreview
> todo: React component preview markdown text.
`;
function Demo() {
return (
<MarkdownPreview source={source} />
)
}
import { ReactMarkdownProps } from 'react-markdown';
type MarkdownPreviewProps = {
className?: string;
source?: string;
style?: React.CSSProperties;
warpperElement?: HTMLDivElement;
onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
onMouseOver?: (e: React.MouseEvent<HTMLDivElement>) => void;
} & ReactMarkdownProps;
source
(string
, default: ''
)className
(string?
)div
with this class nameThis ReactMarkdownProps
details. Upgrade react-markdown
v6
children
(string
, default: ''
)className
(string?
)div
with this class nameskipHtml
(boolean
, default: false
)sourcePos
(boolean
, default: false
)data-sourcepos="3:1-3:13"
)rawSourcePos
(boolean
, default: false
)sourcePosition: {start: {line: 3, column: 1}, end:…}
)includeElementIndex
(boolean
, default: false
)index
(number of elements before it) and siblingCount
(number
of elements in parent) as props to all componentsallowedElements
(Array.<string>
, default: undefined
)disallowedElements
).
By default all elements are alloweddisallowedElements
(Array.<string>
, default: undefined
)allowedElements
).
By default no elements are disallowedallowElement
((element, index, parent) => boolean?
, optional)allowedElements
/ disallowedElements
is used first!unwrapDisallowed
(boolean
, default: false
)strong
is not allowed, it and it’s children is dropped,
but with unwrapDisallowed
the element itself is dropped but the children
usedlinkTarget
(string
or (href, children, title) => string
, optional)_blank
for <a target="_blank"…
)transformLinkUri
((href, children, title) => string
, default:
uri-transformer.js, optional)http
, https
, mailto
, and tel
, and is
available at ReactMarkdown.uriTransformer
.
Pass null
to allow all URLs.
See [security][]transformImageUri
((src, alt, title) => string
, default:
uri-transformer.js, optional)transformLinkUri
but for imagescomponents
(Object.<string, Component>
, default: {}
)remarkPlugins
(Array.<Plugin>
, default: []
)rehypePlugins
(Array.<Plugin>
, default: []
)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
# Step 2, development mode, listen to compile preview website instance
npm start
Builds the app for production to the build folder.
npm run build
The build is minified and the filenames include the hashes. Your app is ready to be deployed!
If you need more features-rich Markdown Editor, you can use @uiwjs/react-markdown-editor
Licensed under the MIT License.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。