Skip to content

⚡ A high speed react component for creating an awesome markdown page.

License

Notifications You must be signed in to change notification settings

chao31/markdown-to-page

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

markdown-to-page

npm last-commit license

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

📖 简体中文

Overview

Image from Gyazo

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
  1. 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

About

⚡ A high speed react component for creating an awesome markdown page.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published