如何在JS中展示Markdown文件?
<span style="font-size:19px">What's Markdown?</span>
Markdown是一种轻量级标记语言,创始人为约翰·格鲁伯。它允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML(或者HTML)文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。
由于Markdown的轻量化、易读易写特性,并且对于图片,图表、数学式都有支持,目前许多网站都广泛使用Markdown来撰写帮助文档或是用于论坛上发表消息。如GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等,甚至还能被用来撰写电子书。[[wiki]](https://zh.wikipedia.org/wiki...)
<span style="font-size:19px">Why Markdown?</span>
在搭建博客系统或编写线简历等涉及文本内容展示的业务场景下,使用markdown进行书写和展示,会使内容排版更加简洁美观,在不同设备下展示兼容性更加友好,并且支持内嵌html、流程图、代码块等功能使得撰写过程更加灵活易用。
<span style="font-size:19px">How to show Markdown?</span>
针对前端展示markdown的库有很多,由于我主要使用React,所以这里选择 react-markdown.js 来实现
<span style="font-size:19px">Hello world</span>
npm install react-markdown --save
import React from 'react'
import ReactMarkdown from 'react-markdown'
import ReactDom from 'react-dom'
function Markdown(){
return <ReactMarkdown># Hello, *world*!</ReactMarkdown>
}
这样我们就成功将一段markdown文本展示在了页面上,很简单对吧
<span style="font-size:19px">如何引用外链markdown进行展示?</span>
为了兼容GFM格式 我们需要另外安装remark-gfm
npm install remark-gfm --save
import React from 'react'
import ReactDom from 'react-dom'
import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
const markdown = `https://你的markdown链接.com`
function Markdown(){
return <ReactMarkdown children={markdown} remarkPlugins={[remarkGfm]} />
}
这时候有同学问了,如果我想引用本地链接的markdown怎么办呢?
eazy! 只需要使用require将其引入,并调用所获取实例上的default属性即可得到一串string文本
import React from 'react'
import ReactDom from 'react-dom'
import ReactMarkdown from 'react-markdown'
const markdown = require('你本地的markdown文件的相对路径')
// const markdown = require('@/docs/test.md')
function Markdown(){
return <ReactMarkdown children={markdown.default}/>
}
<span style="font-size:19px">如何设置代码高亮?</span>
npm install rehype-raw react-syntax-highlighter --save
如果使用ts的同学遇到类型报错还需安装
npm install @types/react-syntax-highlighter --save
安装完毕后可以在 node_modules/react-syntax-highlighter/dist/esm/styles
路径下看到支持的高亮主题 将其引入使用即可
import React from 'react';
import ReactMarkdown from 'react-markdown';
import rehypeRaw from 'rehype-raw';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { prism } from 'react-syntax-highlighter/dist/esm/styles/prism';
function Markdown(){
const markdown = '高亮代码块'
return <ReactMarkdown
children={markdown}
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={prism}
language={match[1]}
PreTag="div"
{...(props as any)}
/>
) : (
<code className={className} {...props}>
{children}
</code>
);
},
}}
></ReactMarkdown>
}
react-markdown会根据components函数对相应的代码进行判断和实现高亮
转载自:https://segmentfault.com/a/1190000041504785