ReactでQiitaみたいにマークダウンで書いたものを左にプレビューを表示させる

はじめに

こんにちは、エンジニアのkeitaMaxです。

ReactでQiitaみたいにマークダウンで書いたものを左にプレビューを表示させようと思います。

インストール

以下コマンドでreact-markdownをインストールします。

npm install react-markdown

また、remark-gfmもインストールします。

npm install remark-gfm

これをインストールするとマークダウンの拡張機能を追加することができます。

~~two~~

例）上記が以下のように表示されます。

実装

以下のように実装しました。

index.ts

import React, { useState } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

export const AddArticleTest = React.memo(function AddArticleTest() {
    const [markdown, setMarkdown] = useState<string>('');

    return (
        <div className="flex h-screen">
            {/* 左側のエディタ */}
            <div className="w-1/2 p-4">
                <h2 className="text-xl font-bold mb-4">Markdownエディタ</h2>
                <textarea
                    className="w-full h-full p-2 border rounded-md"
                    placeholder="ここにマークダウンを入力してください..."
                    value={markdown}
                    onChange={(e) => setMarkdown(e.target.value)}
                />
            </div>

            {/* 右側のプレビュー */}
            <div className="w-1/2 p-4 border-l overflow-y-auto">
                <h2 className="text-xl font-bold mb-4">プレビュー</h2>
                <div className="prose prose-lg max-w-none">
                    <ReactMarkdown
                        remarkPlugins={[remarkGfm]}
                    >
                        {markdown}
                    </ReactMarkdown>
                </div>
            </div>
        </div>
    );
});

export default AddArticleTest

これをStorybookで起動してみると以下のような画面になります。

色々してみる

実際にしっかりマークダウンとして認識されるかを確認します。

## 見出し2
### 見出し3
#### 見出し4
`インラインコード`
**強調**


| a | b  |  c |  d  |
| - | :- | -: | :-: |

上記を入れてみると、

このようにしっかりとプレビュー画面ができていることがわかります。

おわりに

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！

参考

次の記事