如何在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、流程图、代码块等功能使得撰写过程更加灵活易用。

markdown语法

<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函数对相应的代码进行判断和实现高亮