在项目中需要一个需求，需要将markdown文件放在react前端项目中实现浏览器在线浏览，修改markdown文件前端页面内容自动更新，在使用过程中，使用react-markdown文件渲染markdown文件格式，使用markdown-navbar自动生成侧边栏导航，但此插件在有多个三级标题时点击目录高亮会出错，修改css文件后可正常使用。
yarn add react-markdown
yarn add markdown-navbar
//markdown样式插件
yarn add remark-gfm
yarn add rehype-raw
//markdown内容样式
yarn add github-markdown-css
import React from 'react';
import ReactMarkdown from 'react-markdown';
const Document = () => {
const [mdContent, setMdContent] = React.useState('')
React.useEffect(() => {
fetch("/document/ansible笔记.md") //已把文档放在项目的pubilc目录中
.then(res => res.text())
.then(text => setMdContent(text));
}, []);
return (
<div >
<Grid container justify="center" alignItems="center">
<Box width={"70%"}>
<ReactMarkdown className={"markdown-body"} >{mdContent}</ReactMarkdown>
</Box>
</Grid>
</div>
);
};
export default Document;
此时已能实现读取markdown文件。
此时仅仅读取了markdown文件，并没有渲染任何的样式，比如线，表，HTML语句等解析，我们这时可以引入第一步中下载的插件美化样式。
import React from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeRaw from 'rehype-raw'; // 解析标签，支持html语法
import 'github-markdown-css';
const Document = () => {
const [mdContent, setMdContent] = React.useState('')
React.useEffect(() => {
fetch("/document/ansible笔记.md") //已把文档放在项目的pubilc目录中
.then(res => res.text())
.then(text => setMdContent(text));
}, []);
return (
<div >
<Grid container justify="center" alignItems="center">
<Box width={"70%"}>
<ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]} className={"markdown-body"} >{mdContent}</ReactMarkdown>
</Box>
</Grid>
</div>
);
};
export default Document;
markdown-navbar可以自动生成markdown文件的目录，并定位锚点。下面我们在组件中加入markdown-navbar
import React from 'react';
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
import { Box, Drawer, Grid } from "@material-ui/core";
import ReactMarkdown from 'react-markdown';
import MarkNav from 'markdown-navbar';
import remarkGfm from 'remark-gfm'; // 划线、表、任务列表和直接url等的语法扩展
import rehypeRaw from 'rehype-raw'; // 解析标签，支持html语法
import 'github-markdown-css'; //代码块的背景和表格线条等样式
import './navbar.css';//引入修改后的目录格式
const useStyles = makeStyles((theme: Theme) => createStyles({
main: {
flexGrow: 1,
padding: theme.spacing(4),
paddingBottom: theme.spacing(3),
paddingTop: theme.spacing(12),
minHeight: 'calc(100% - 120px)',
},
drawer: {
flexShrink: 0,
width: 296,
'& svg': {
fontSize: "1.5rem"
}
},
paper: {
width: 296,
overflowY: 'hidden',
},
}));
const Document = () => {
const classes = useStyles();
const [mdContent, setMdContent] = React.useState('')
React.useEffect(() => {
fetch("/document/ansible笔记.md")
.then(res => res.text())
.then(text => setMdContent(text));
}, []);
return (
<div >
<Drawer className={classes.drawer} variant={"permanent"} classes={{ paper: classes.paper }}>
<Box >
<MarkNav
className="article"
source={mdContent}
headingTopOffset={40} //离顶部的距离
ordered={false} //是否显示标题题号1,2等
/>
</Box>
</Drawer>
<main className={classes.main}>
<Grid container justify="center" alignItems="center">
<Box width={"70%"}>
<ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]} className={"markdown-body"} >{mdContent}</ReactMarkdown>
</Box>
</Grid>
</main>
</div>
);
};
export default Document;
由于如果出现多个三级标题下有四级标题，点击四级标题后会显示多处高亮的错误，因此修改此插件的css文件并与上述代码放在同一级目录下引入，即可解决此问题。此处是注释了点击目录后显示高亮的样式，改为鼠标指向目录显示高亮，点击后目录不显示高亮。
.markdown-navigation {
font-size: 14px;
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", "Arial", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
width: 100%;
overflow: hidden;
}
.markdown-navigation .title-anchor {
display: block;
color: #bbb;
transition: all 0.2s;
margin: 0.8em 0;
font-weight: lighter;
line-height: 2em;
padding-right: 1.8em;
cursor: pointer;
}
.markdown-navigation .title-anchor:hover{
background-color: #f8f8f8;
color: #007fff;
}
/* .markdown-navigation .title-anchor.active {
background-color: #f8f8f8;
text-decoration: inherit;
} */
/* .markdown-navigation .title-anchor.active {
color: #007fff;
} */
.markdown-navigation .title-anchor small {
margin: 0 0.8em;
}
.markdown-navigation .title-level1 {
color: #000;
font-size: 1.2em;
padding-left: 1em;
font-weight: normal;
}
.markdown-navigation .title-level2 {
color: #000;
font-size: 1em;
padding-left: 1.5em;
font-weight: normal;
}
.markdown-navigation .title-level3 {
color: #222;
font-size: 0.9em;
padding-left: 3em;
font-weight: normal;
}
.markdown-navigation .title-level4 {
color: #444;
font-size: 0.8em;
padding-left: 5em;
}
.markdown-navigation .title-level5 {
color: #444;
font-size: 0.8em;
padding-left: 6.5em;
}
.markdown-navigation .title-level6 {
color: #444;
font-size: 0.8em;
padding-left: 8em;
}
-navigation .title-level5 {
color: #444;
font-size: 0.8em;
padding-left: 6.5em;
}
.markdown-navigation .title-level6 {
color: #444;
font-size: 0.8em;
padding-left: 8em;
}
最后效果展示如下
如果读者想修改目录的缩进或高亮颜色等样式，也直接修改此文件。