markdown-to-page

Light weight react component for creating a responsive markdown page with beautiful TOC.

📖 简体中文

Overview

Demo

Check out the demo page.

Features

• Supports <HashRouter> 🔥.
• Supports <BrowserRouter>.
• Auto create a table of contents 😍.
• Responsive component 🔥.
• Code highlighting 😍.
• Optional support for theme.
• Easy-to-use.
• Thorough documentation 🎉.
• Chinese docs 🌐.
• High speed 🔥.
• Safe by default.

Installation

npm install markdown-to-page

with yarn :

yarn add markdown-to-page

Usage

Only markdownText is required.

import * as React from 'react';
import MarkdownPage from 'markdown-to-page';

const App = () => {
  const md = '# your markdown text ...';
  return <MarkdownPage markdownText={md}/>;
};

export default App;

Props

| Name | Type | Default | Description | | :-----------------------------------------: | :-------------------------: | :-----: | :---------- | | markdownText | string | - | markdown text string | | isHashRouter | boolean | false | current route is <HashRouter> or not | | themeColor | string | #5e7ce0 | theme color | | anchorId | string | _to | if choose <HashRouter>, the anchor is ?_to=xxx | | markdownInstance|Markdown-it|-| implement a markdown parse by yourself with markdown-it |

markdownText

Follows the CommonMark spec + adds syntax extensions & sugar (URL autolinking, typographer).

isHashRouter

Use <HashRouter> whether or not.

themeColor

Change the style of the page with a main color, incoming prop like themeColor='5e7ce0' or themeColor='#5e7ce0' are all OK.

anchorId

The default anchorId is _to , just like this localhost:8080/#/page/level/?_to=custom-style, maybe _to is conflict with your query, with anchorId prop to change this.

markdownInstance

This prop is a instance of Markdown-it , when you want to implement a markdown parse by yourself.

FAQ

Anchor don't work under HashRouter

To check whether React.StrictMode is used , markdown-to-page monitor URL changes by react-router-dom, but the useLocation hook will fail under strict mode , just like this:

import * as React from 'react';
import ReactDOM from 'react-dom/client';

import MarkdownPage from '../.';
import { HashRouter, Route, Switch } from 'react-router-dom';
const md = '# your markdown text ...'; 

const App = () => (
  <HashRouter>
    <Switch>
      <Route path="/">
        <MarkdownPage markdownText={md} isHashRouter={true} />
      </Route>
    </Switch>
  </HashRouter>
);

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

So try to remove this nested StrictMode :

root.render(
-  <React.StrictMode>
    <App />
-  </React.StrictMode>
);

Development

Local development is broken into two parts (ideally using two tabs).

1. First, run rollup to watch your src/ module and automatically recompile it into dist/ whenever you make changes.

npm start

2. The second part will be running the example/ create-react-app that's linked to the local version of your module.

cd example
npm start

Now, anytime you make a change to your library in src/ or to the example app's example/src, create-react-app will live-reload your local dev server so you can iterate on your component in real-time.

Publishing to npm

npm publish

License

MIT © chao31