@akiravoid/fluent-markdown
v1.0.7
Published
A component for React to transform Markdown text to React components using Fluent Design v9. Powered by remark, support remark and rehype plugins.
Downloads
22
Maintainers
Readme
Fluent Markdown
A component for React to transform Markdown text to React components using Fluent Design v9. Powered by remark, support remark and rehype plugins.
Install
npm i @akiravoid/fluent-markdown
# or
yarn add @akiravoid/fluent-markdown
Usage
Basic
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import FluentMarkdown from '@akiravoid/fluent-markdown';
function Page() {
return (
<FluentMarkdown>
# This is a title {'\n\n'}
Your content with **Markdown**
</FluentMarkdown>
);
}
ReactDOM.render(<Page />, document.querySelector('#root'));
Use plugins
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import FluentMarkdown from '@akiravoid/fluent-markdown';
import remarkMyPlugin from 'remark-my-plugin';
import rehypeMyPlugin from 'rehype-my-plugin';
import remarkMyPluginOptions from 'remark-my-plugin-options';
function Page() {
return (
<FluentMarkdown
remarkPlugins={[
remarkMyPlugin,
[remarkMyPluginOptions, { option: true }],
]}
rehypePlugins={[rehypeMyPlugin]}
>
# This is a title {'\n\n'}
Your content with **Markdown**
</FluentMarkdown>
);
}
ReactDOM.render(<Page />, document.querySelector('#root'));