Last time, we have successfully displayed a Markdown article on the website and automatically generated a catalogue. Now, we wanted to generate a more practical fixed sidebar navigation. Solution 1: We can use ‘markdown-navbar’. However, this plugin has requirements for the format of markdown files, if the format is not Read more…
Last time, we have introduced how to display a Markdown document in React.(http://52.65.48.177/index.php/2023/03/13/rendering-markdown-in-react/) Now, let’s move forward to support ToC(Table of Content), Mathematical Formula and Footnote. 1. ToC (Table of Content) To support ToC and in-page jump, we need two plugins: remarkToc and rehypeSlug. RehypeSlug is a plugin to add Read more…
Download dependency. yarn add react-markdown yarn add remark-gfm yarn add rehype-raw yarn add react-syntax-highlighter yarn add github-markdown-css Use fetch to fetch the contents of a Markdown file and render it using react-markdown. import React from ‘react’; import ReactMarkdown from ‘react-markdown’; const App=({url})=>{ const [mdContent, setMdContent] = useState(”) useEffect(() => { Read more…