项目中遇见一个需求，要求直接在浏览器打开markdown文件进行预览，初次使用遇见一些坎坷，以下记录实现过程，将其封装成了一个组件。
yarn add react-markdown
//其余样式插件：
yarn add remark-gfm
yarn add rehype-raw
yarn add react-syntax-highlighter
yarn add github-markdown-css
react-markdown是github上的一款开源的适用于markdown文件的组件。
2.1 获取markdown文件内容
此处使用fetch来获取文件内容，我在项目中直接引入无法被识别，当然大家也可以试试直接引入的方式。
import React from 'react';
import ReactMarkdown from 'react-markdown';//引入
//import md from './README.md';
const App=({url})=>{
const [mdContent, setMdContent] = useState('')
useEffect(() => {
//url是markdown文件的路径，我在项目中是放到了media文件夹下，示例：url为'/media/xx.md'
fetch(url)
.then(res => res.text())
.then(text => setMdContent(text));
}
}, []);
return(
<ReactMarkdown
className='markdown-body'
children={mdContent}
/>
)
}
export default App实现效果（以我的vue学习笔记做个示例...）
此时已经可以实现markdown文件的读取了，但是样式单一，表格、标题、代码块等各种样式都没有展示出来，并且也没有像Typora等编辑器那样的导航栏。导航栏部分放到文章最后进行讲述，接下来进行内容的美化。
仍然是通过插件来实现（使用的是标题1.下载依赖中的 “其余样式插件” ）
import React from 'react';
import ReactMarkdown from 'react-markdown';//引入
//import md from './README.md';
import remarkGfm from 'remark-gfm';// 划线、表、任务列表和直接url等的语法扩展
import rehypeRaw from 'rehype-raw'// 解析标签，支持html语法
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter' // 代码高亮
//高亮的主题，还有很多别的主题，可以自行选择
import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism'
const App=({url})=>{
const [mdContent, setMdContent] = useState('')
useEffect(() => {
//url是markdown文件的路径，我在项目中是放到了media文件夹下，示例：url为'/media/xx.md'
fetch(url)
.then(res => res.text())
.then(text => setMdContent(text));
}
}, []);
return(
<ReactMarkdown
className='markdown-body'
children={mdContent}
remarkPlugins={[remarkGfm, { singleTilde: false }]}
rehypePlugins={[rehypeRaw]}
components={{
code({ node, inline, className, children, ...props }) {
const match = /language-(\w+)/.exec(className || '')
return !inline && match ? (
<SyntaxHighlighter
children={String(children).replace(/\n$/, '')}
style={tomorrow}
language={match[1]}
PreTag="div"
{...props}
/>
) : (
<code className={className} {...props}>
{children}
</code>
)
}
}}
/>
)
}
export default App标签倒是被解析出来了。表格部分也整齐了许多，但是代码块的背景和表格线条等样式统统没有。
查阅之后发现是没有引入内容样式，github-markdown-css，这个可以直接使用yarn或npm进行安装，引入一下：
import 'github-markdown-css';现在就可以得到一份完美的markdown格式内容了。
关于目录的实现，也有对应的插件可以直接进行生成，markdown-navbar，很多文章都说非常好用，懒人插件，但是这个插件对markdown文件编写格式有要求，格式不规范的话识别会出错，导致将文章内容或者备注也识别为标题。这里也简单介绍一下使用。
首先安装
yarn add markdown-navbar
使用。目录想要显示在导航栏左侧或固定在某处等等，都可以自行调整样式。
import MarkNav from 'markdown-navbar';
const App=({url})=>{
const [mdContent, setMdContent] = useState('')
useEffect(() => {
//url是markdown文件的路径，我在项目中是放到了media文件夹下，示例：url为'/media/xx.md'
fetch(url)
.then(res => res.text())
.then(text => setMdContent(text));
}
}, []);
return(
<div className='nav-menu'>
<MarkNav
className="article-menu"
source={mdContent}
headingTopOffset={80}
ordered={false} //是否显示标题题号1,2等
/>
</div>
<div className='content-box'>
//markdown内容
</div>
)
}
export default App接下来是手动实现markdown目录导航栏的方式。
本文是使用antd的组件Anchor进行了目录的实现。
首先遍历了markdown文件中所有的内容，取出所有h1-h6标签以及标签中的文本进行目录的展示，在每个标题标签中加入一个a标签作为锚点，方便点击标题跳转时进行定位。方法如下。
const [titles, setTitles] = useState([])
const addAnchor = () => {
const ele = document.getElementsByClassName('markdown-body')[0];
let eid = 0;
let titles = [];
for (const e of ele.childNodes) {
if (e.nodeName === 'H1' || e.nodeName === 'H2' || e.nodeName === 'H3' || e.nodeName === 'H4' || e.nodeName === 'H5' || e.nodeName === 'H6') {
let a = document.createElement('a');
a.setAttribute('id', '#' + eid);
a.setAttribute('class', 'anchor-title');
a.setAttribute('href', '#' + eid);
a.innerText = ' '
let title = {
type: e.nodeName,
id: eid,
name: e.innerText
};
titles.push(title);
e.appendChild(a);
eid++;
}
}
return titles;
}使用antd的Anchor组件，Link的href与上述加入的a标签中的href相同，title就是标题标签中取出的文本内容，为每个Link增加一个类名，如此处h1标签类名为title-H1，h2标签类名为title-H2...方便区分修改样式。
<Anchor
className='markdown-nav'
affix={false}
onClick={handleClickFun}
getContainer={() => document.getElementsByClassName('content-box')}
>
{
titles.map(t => (
<Link href={'#' + t.id} title={t.name} className={'title-' + t.type} key={t.id} />
))
}
</Anchor>为Anchor绑定点击事件，点击标题的时候，让内容也对应定位到标题所在的地方。
测试发现，antd的Anchor组件在点击锚点后会修改URL，将当前点击的herf拼接到路由上，而单页应用中如果使用哈希模式的路由，当URL被修改后，刷新页面会导致当前路由没有定义而出现404的情况。
查阅antd官方文档。 发现该组件点击事件的回调函数第一个参数就是事件，那么就通过e.preventDefault()阻止掉默认事件，然后再通过第二个参数拿到点击的href，通过document.getElementById获取到这个元素，然后使用scrollIntoView添加页面滚动效果。
const handleClickFun = (e, link) => {
e.preventDefault();
if (link.href) {
// 找到锚点对应得的节点
let element = document.getElementById(link.href);
// 如果对应id的锚点存在，就跳滚动到锚点顶部
element && element.scrollIntoView({ block: 'start', behavior: 'smooth' });
}
}以下是完整实现效果，标题导航栏的缩进自行通过样式调整即可，本文是让二级标题缩进1em，三级标题缩进2em，依次类推...
