React展示markdown文件

• 概述
• 實現方式
  • 依賴的主要 package
  • 前端頁面
  • markdown 文件位置
• 實現效果

概述

markdown 文件雖然可以轉成 html 文件再展示在瀏覽器中， 但多了一層轉換總覺得有些麻煩，特別是對於需要頻繁改動的 markdown 文件。

所以，這里探索了一種直接在 React 工程中顯示 Markdown 內容的方式。 把 markdown 文件當成靜態 html 一樣來展示，只要編輯保存 markdown 文件之后，就可以直接在瀏覽器中查看。

實現方式

這里主要記錄如何在 React 工程中實現直接展示 markdown 文件，對於 React 工程的創建和運行不再贅述。

依賴的主要 package

首先下載這 3 個 npm package。

yarn add react-markdown   # 這是主要的package
yarn add remark-gfm       # 這個是插件，為了識別gfm格式的markdown
yarn add markdown-navbar  # 這個是為了生成目錄

前端頁面

前端頁面 2 部分，一個 jsx，一個 css

import React, { useState, useEffect } from 'react';
import ReactMarkdown from 'react-markdown';
import gfm from 'remark-gfm';
import MarkNav from 'markdown-navbar';
import 'markdown-navbar/dist/navbar.css';
import './index.css';

const Help = () => {
  const [md, handleMD] = useState('loading... ...');

  useEffect(() => {
    fetch('/help-doc/help.md')
      .then((resp) => resp.text())
      .then((txt) => handleMD(txt));
  }, [md]);

  return (
    <div>
      <div className="nav-container">
        <MarkNav className="article-menu" source={md} headingTopOffset={80} ordered={false} />
      </div>
      <div className="article-container">
        <ReactMarkdown plugins={[[gfm, { singleTilde: false }]]} allowDangerousHtml>
          {md}
        </ReactMarkdown>
      </div>
    </div>
  );
};
export default Help;

.article-container {
  width: 960px;
  max-width: 100%;
  margin: 60px auto;
  padding: 20px 40px;
  background: #fff;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
}

.nav-container {
  position: fixed;
  right: 20px;
  top: 60px;
  background-color: #fff;
  border-radius: 5px;
  border: 1px solid #eee;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
  transform: translate(0, 0);
  transition: transform 500ms ease;
}

markdown 文件位置

markdown 文件靜態文件目錄下，本例中，放在了 public/help-doc 文件夾下面了。

$ tree help-doc
help-doc
├── chap2-1.mp4
├── chap2-2.mp4
├── chap2-3.mp4
├── chap2-4.mp4
├── help.md
└── modules.png

markdown 中引用圖片的地方，比如：

## 1. 概要
目前整個平台包含如下幾個模塊: (**綠色**是已完成部分, **紅色**是未完成部分)

![模塊](/help-doc/modules.png)

引用視頻的地方，比如：

### 2.1 定義數據類型

數據類型代表了某種類型的數據. 它們都有相同的字段.

<video width="500" height="300" controls>
<source src="/help-doc/chap2-1.mp4" type="video/mp4">
</video>

### 2.2 定義數據類型中的字段

實現效果

部署工程之后，只要修改靜態目錄下的 help.md 再保存，頁面就會變化，不需要發布和轉換 markdown 文件。

顯示效果如下，此文檔包括文字，圖片和視頻，均能正常顯示。