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;
onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
onMouseOver?: (e: React.MouseEvent<HTMLDivElement>) => void;
} & ReactMarkdownProps;
This ReactMarkdownProps
details.
source
(string
, default:''
)
Markdown to parseclassName
(string?
)
Wrap the markdown in adiv
with this class nameallowDangerousHtml
(boolean
, default:false
)
This project is safe by default and escapes HTML. UseallowDangerousHtml: true
to allow dangerous html instead. See securityskipHtml
(boolean
, default:false
)
Ignore HTML in MarkdownsourcePos
(boolean
, default:false
)
Pass a prop to all renderers with a serialized position (data-sourcepos="3:1-3:13"
)rawSourcePos
(boolean
, default:false
)
Pass a prop to all renderers with their position (sourcePosition: {start: {line: 3, column: 1}, end:…}
)includeNodeIndex
(boolean
, default:false
)
Passindex
andparentChildCount
in props to all renderersallowedTypes
(Array.<string>
, default: list of all types)
Node types to allow (can’t combine w/disallowedTypes
). All types are available atReactMarkdown.types
disallowedTypes
(Array.<string>
, default:[]
)
Node types to disallow (can’t combine w/allowedTypes
)allowNode
((node, index, parent) => boolean?
, optional)
Function called to check if a node is allowed (when truthy) or not.allowedTypes
/disallowedTypes
is used first!unwrapDisallowed
(boolean
, default:false
)
Extract (unwrap) the children of not allowed nodes. By default, whenstrong
is not allowed, it and it’s content is dropped, but withunwrapDisallowed
the node itself is dropped but the content usedlinkTarget
(string
or(url, text, title) => string
, optional)
Target to use on links (such as_blank
for<a target="_blank"…
)transformLinkUri
((uri) => string
, default: [./uri-transformer.js
][uri], optional)
URL to use for links. The default allows onlyhttp
,https
,mailto
, andtel
, and is available atReactMarkdown.uriTransformer
. Passnull
to allow all URLs. See securitytransformImageUri
((uri) => string
, default: [./uri-transformer.js
][uri], optional)
Same astransformLinkUri
but for imagesrenderers
(Object.<Component>
, default:{}
)
Object mapping node types to React components. Merged with the default renderers (available atReactMarkdown.renderers
). Which props are passed varies based on the nodeplugins
(Array.<Plugin>
, default:[]
)
List of remark plugins to use. See the next section for examples on how to pass options
See Options Props for more details.
Runs the project in development mode.
# Step 1, run first, listen to the component compile and output the .js file
npm run ts:watch
# Step 2, listen for compilation output type .d.ts file
npm run types:watch
# Step 3, development mode, listen to compile preview website instance
npm run doc:dev
Builds the app for production to the build folder.
npm run released
The build is minified and the filenames include the hashes. Your app is ready to be deployed!
Licensed under the MIT License.