![cover](https://img-blog.csdnimg.cn/e2e0a8f0e8ab49e8b971ad7241a7d87c.jpeg)
【前端】React使用react-markdown+antd实现引入渲染markdown文件
react使用react-markdown渲染markdown文件,手动生成导航栏目录
项目中遇见一个需求,要求直接在浏览器打开markdown文件进行预览,初次使用遇见一些坎坷,以下记录实现过程,将其封装成了一个组件。
1.下载依赖
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.引入使用
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学习笔记做个示例...)
3.样式美化
此时已经可以实现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格式内容了。
4.导航栏目录实现
关于目录的实现,也有对应的插件可以直接进行生成,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,依次类推...
![Logo](https://devpress.csdnimg.cn/79de2bf0b7994defa4242ef90d5513fa.jpg)
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)