ReactにMarkdownを組み込んでドキュメントページを素早く作る

はじめに

ReactでWEBページを作成する際、ドキュメントページは手慣れたMarkdownで書いて、素早く形を作っていきたいと考えた。

その際に便利なmarkdown-to-jsxというComponentを使ったのでまとめてみる。

最小構成のコードをcodesandboxにまとめた。
codesandbox/markdown-to-jsx test

ポイント

■下記のように直接Markdownファイルを読み込もうとすると、

import contents from "./contents.md";

Cannot find module './contents.md' or its corresponding type declarations.ts(2307)

という警告が出た。
これを修正するために、global.d.tsファイルを作成し、

declare module "*.md";

と書くと警告が消えた。

■コードのMarkdown記法の修飾

QiitaのコードのMarkdown表現

黒バックに白字、インデント、上下スペース

これを実現するためには、styles.cssで

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
  color: white;
}

pre {
  background-color: black;
  padding-top: 1em;
  padding-left: 1em;
  padding-bottom: 1em;
}

とすれば実現できた。ついでにコードを表現するのに定番なフォントも設定してみた。

■組み込み方

いろいろいじってみたが、下記が最小構成で動作した。

import * as React from "react";
import "./styles.css";
import Markdown from "markdown-to-jsx";
import contents from "./contents.md";

export default function App() {
  return <Markdown className="App" children={contents} />;
}

ヘッダー、フッター等コンポーネントを組み合わせて見栄えの良いドキュメントページが構築しやすくなった。