@akiravoid/fluent-markdown

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'));