如何在JS中展示Markdown文件？

What's Markdown？

Markdown是一种轻量级标记语言，创始人为约翰·格鲁伯。它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML（或者HTML）文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。

由于Markdown的轻量化、易读易写特性，并且对于图片，图表、数学式都有支持，目前许多网站都广泛使用Markdown来撰写帮助文档或是用于论坛上发表消息。如GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等，甚至还能被用来撰写电子书。[[wiki]](https://zh.wikipedia.org/wiki...)

Why Markdown？

在搭建博客系统或编写线简历等涉及文本内容展示的业务场景下，使用markdown进行书写和展示，会使内容排版更加简洁美观，在不同设备下展示兼容性更加友好，并且支持内嵌html、流程图、代码块等功能使得撰写过程更加灵活易用。

markdown语法

How to show Markdown？

针对前端展示markdown的库有很多，由于我主要使用React,所以这里选择 react-markdown.js 来实现

Hello world

npm install react-markdown --save

import React from 'react'
import ReactMarkdown from 'react-markdown'
import ReactDom from 'react-dom'

function Markdown(){
    return # Hello, *world*!
}

这样我们就成功将一段markdown文本展示在了页面上,很简单对吧

如何引用外链markdown进行展示？

为了兼容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 
}

这时候有同学问了，如果我想引用本地链接的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 
}

如何设置代码高亮？

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 
            ) : (
              
                {children}
              
            );
          },
        }}
      >
}

react-markdown会根据components函数对相应的代码进行判断和实现高亮