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 ids to headings. So that we can use #id to jump.
RemarkToc is used to generate a table of contents.
The following is a code template:
import React from 'react';
import ReactMarkdown from 'react-markdown';
// Syntax extensions for underlining, tables, task lists and direct URLs
import remarkGfm from 'remark-gfm';
import rehypeRaw from 'rehype-raw'; // Parsing tags, supporting html syntax
import remarkToc from 'remark-toc';
import rehypeSlug from 'rehype-slug';
const App=({url})=>{
const [mdContent, setMdContent] = useState('')
useEffect(() => {
fetch(url)
.then(res => res.text())
.then(text => setMdContent(text));
}
}, []);
return(
<ReactMarkdown
className='markdown-body'
children={mdContent}
remarkPlugins={[remarkGfm,
[remarkToc, { heading: 'catalog' }]]}
rehypePlugins={[rehypeRaw, rehypeSlug]}
/>
)
}
export default App Look, I add a parameter heading to reamrkToc. Now type #catalog in your markdown document. It will automatically generate a ToC accoding to the headings after that line. The defaulte value of heading is toc. So if you don’t set it manually, just type #toc in markdown. There are lots of other parameters. Please read offical document if you are interested in.
2. Mathematical Formula
Math formula can also be supported with remarkMath
import React from 'react';
import ReactMarkdown from 'react-markdown';
// Syntax extensions for underlining, tables, task lists and direct URLs
import remarkGfm from 'remark-gfm';
import rehypeRaw from 'rehype-raw'; // Parsing tags, supporting html syntax
import remarkToc from 'remark-toc';
import rehypeSlug from 'rehype-slug';
import remarkMath from 'remark-math';
import remarkParse from 'remark-parse';
import rehypeStringify from 'rehype-stringify';
import rehypeMathJaxSvg from 'rehype-mathjax';
const App=({url})=>{
const [mdContent, setMdContent] = useState('')
useEffect(() => {
fetch(url)
.then(res => res.text())
.then(text => setMdContent(text));
}
}, []);
return(
<ReactMarkdown
className='markdown-body'
children={mdContent}
remarkPlugins={[remarkGfm,
[remarkToc, { heading: 'catalog' }],
remarkMath, remarkParse]
}
rehypePlugins={[rehypeRaw, rehypeSlug, rehypeMathJaxSvg, rehypeStringify]}
/>
)
}
export default App Yes, it requires a lot of plugins. Make sure you don’t miss anyone.
3. FootNote
React-markdown has already supported footnotes. But if you want to change it label other than ‘footnote’, you need to use Remark-rehype.
import React from 'react';
import ReactMarkdown from 'react-markdown';
// Syntax extensions for underlining, tables, task lists and direct URLs
import remarkGfm from 'remark-gfm';
import rehypeRaw from 'rehype-raw'; // Parsing tags, supporting html syntax
import remarkToc from 'remark-toc';
import rehypeSlug from 'rehype-slug';
import remarkMath from 'remark-math';
import remarkParse from 'remark-parse';
import rehypeStringify from 'rehype-stringify';
import rehypeMathJaxSvg from 'rehype-mathjax';
import remarkRehype from 'remark-rehype';
const App=({url})=>{
const [mdContent, setMdContent] = useState('')
useEffect(() => {
fetch(url)
.then(res => res.text())
.then(text => setMdContent(text));
}
}, []);
return(
<ReactMarkdown
className='markdown-body'
children={mdContent}
remarkPlugins={[remarkGfm,
[remarkToc, { heading: 'catalog' }],
remarkMath, remarkParse,
[remarkRehype, { footnoreLabel: 'Refference:'}]]
}
rehypePlugins={[rehypeRaw, rehypeSlug, rehypeMathJaxSvg, rehypeStringify]}
/>
)
}
export default App
0 Comments