【ブログ作りたい方必見】Reactでmdファイルを使わずに、Qiitaと同じようにMarkdownで記事を書く方法

皆さんこんにちは！

つい１ヶ月ほど前ぐらいからReactの勉強をし始め、今ではReactのフレームワークGatsby.jsで遊んでいます。

そんなReactで面白いパッケージを発見したのでご紹介したいと思います。

その名は、、、

react-markdownです！

これはQiitaと同じようにMarkdownで記事を書くことが可能です！

世の中便利になりましたね。

実装も全く難しくありません。

パッケージのインストール時間を合わせても１０分いかないくらいで実装できます。

説明はこの辺にして早速始めていきましょう！

はじめに

QiitaのMarkdownすべてが実装できるわけではありません。

console.log('markdown')

例えば、このようなコードを記載するMarkdownは使えません。

もしかしたら実装できるかもしれないのですが、調べた限り方法は見つかりませんでした。

知っている方がいたらぜひコメント欄に教えて下さると助かります。

必要パッケージのインストール

まずは必要なパッケージをインストールします。

npm install react-markdown remark-gfm github-markdown-css

react-markdownの設定

import 'github-markdown-css/github-markdown.css';
import React from 'react';
import ReactMarkdown from 'react-markdown';
import gfm from 'remark-gfm';

const Markdown = () => {
  const markdown = `
  **aiueo**

  # aiueo
  `
  return(
    <React.Fragment>
      <ReactMarkdown className="markdown-body p-3" remarkPlugins={[gfm]} children={markdown} />
    </React.Fragment>
  )
}

export default Markdown

まず初めに気を付けることはmarkdownの記述を""（ダブルクォーテーション）ではなく、``（バッククォーテーション）で行っているということです。

ダブルクォーテーションだと正しくmarkdownが読み込まれないので気を付けください。

remarkPluginsはよくわかんないっす（笑）。

一応公式ドキュメントを載せておきます。

react-markdown - npm

children にはMarkdownで記述したものを指定します。

最後にimport 'github-markdown-css/github-markdown.css'でCSSをインポートしてください。

これでMarkdownでブログを書くことが可能です。

実際に書くとこんな感じです。

意外と簡単に実装できました。

ただ、import 'github-markdown-css/github-markdown.css'これがないとQiitaのようなMarkdownを記述できないところで少し躓きました。

皆さんはコピペで十分です！

以上、「【ブログ作りたい方必見】Reactでmdファイルを使わずに、Qiitaと同じようにMarkdownで記事を書く方法」でした！

Thank you for reading