项目中遇见一个需求,要求直接在浏览器打开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() } 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({ code({ node, inline, className, children, ...props }) { const match = /language-(\w+)/.exec(className || '') return !inline && match ? ( ) : ( {children} ) } }} /> ) } 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(//markdown内容 ) } 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...方便区分修改样式。
document.getElementsByClassName('content-box')} > { titles.map(t => ( )) }
为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,依次类推...