什么是Markdown？Markdown是一种轻量级的标记语言，由JohnGruber创立。它允许人们以易于阅读和编写的纯文本格式编写文档，然后将其转换为有效的XHTML（或HTML）文档。这种语言结合了电子邮件中已有的纯文本标记的许多功能。由于Markdown具有轻量级、易读易写的特点，并且支持图片、图表和数学公式，目前Markdown被很多网站广泛用于编写帮助文档或在论坛上发帖。比如GitHub、Reddit、Diaspora、StackExchange、OpenStreetMap、SourceForge、简书等等，甚至可以用来写电子书。[[wiki]](https://zh.wikipedia.org/wiki...)为什么要使用Markdown？在涉及文字内容展示的业务场景中，比如搭建博客系统或撰写在线简历，使用markdown进行撰写和展示会让内容排版更加简洁美观，不同设备下的展示兼容性更加友好，并支持内嵌html、流程图、代码块等功能，使编写过程更加灵活易用。markdown语法如何显示Markdown？前端展示markdown的库有很多。由于我主要使用React，所以选择react-markdown.js来实现Helloworldnpminstallreact-markdown--saveimportReactfrom'react'importReactMarkdownfrom'react-markdown'importReactDomfrom'react-dom'functionMarkdown(){return#Hello,*world*!}这样我们就可以很简单的成功显示一段markdown文本了页，对吗？如何引用外链markdown显示？为了兼容GFM格式，我们需要安装remark-gfmnpminstallremark-gfm--saveimportReactfrom'react'importReactDomfrom'react-dom'importReactMarkdownfrom'react-markdown'importremarkGfmfrom'remark-gfm'constmarkdown=`https://yourmarkdownlink.com`functionMarkdown(){return}这时候有同学问，如果我要引用本地链接的markdown呢？容易！只需使用require导入它并在获取的实例上调用default属性获取文本字符串importReactfrom'react'importReactDomfrom'react-dom'importReactMarkdownfrom'react-markdown'constmarkdown=require('你本地markdown文件的相对路径')//constmarkdown=require('@/docs/test.md')functionMarkdown(){return}如何设置代码高亮？npminstallrehype-rawreact-syntax-highlighter--save使用ts的同学如果遇到类型错误，需要安装npminstall@types/react-syntax-highlighter--save安装后即可使用在node_modules/react-syntax-highlighter/dist/esm/styles路径下可以看到支持的高亮主题，导入useimportReactfrom'react';importReactMarkdownfrom'react-markdown';importrehypeRawfrom'rehype-生的';import{PrismasSyntaxHighlighter}from'react-syntax-highlighter';import{prism}from'react-syntax-highlighter/dist/esm/styles/prism';functionMarkdown(){constmarkdown='高亮代码块'return):({children});},}}>}react-markdown会根据组件函数处理相应的代码判断并实现高亮
