Open3

ReactでMarkdown表示を実装する方法について📝

React
TypeScript
Markdown
frontend
マークダウン記法
まさぴょん🐱まさぴょん🐱

ReactでMarkdown表示を実装する方法について by GPT o1

ReactアプリケーションでMarkdownを表示する際、最もよく使われている方法の一つがライブラリを利用する方法です。代表的なライブラリとして以下のものがあります。

  1. react-markdown
  2. react-showdown
  3. markdown-it や marked などのパーサと組み合わせて独自にレンダリング

1. react-markdown

Reactを使ってMarkdownを表示する際に最もポピュラーかつ簡単に利用できるのが react-markdown です。マークダウンのレンダリングに加え、GitHub Flavored Markdownへの対応やプラグインで拡張が可能なのが特徴です。

インストール

npm install react-markdown remark-gfm
# or
yarn add react-markdown remark-gfm

remark-gfm は表組みやチェックリストなどのGitHub Flavored Markdownをサポートするためのプラグインです。必要に応じてインストールしてください。

基本的な使い方

import React from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

function App() {
  const markdown = `
# サンプルタイトル

- リスト1
- リスト2
- リスト3

**太字** や *斜体* も使えます！
  `;

  return (
    <div>
      <ReactMarkdown remarkPlugins={[remarkGfm]}>
        {markdown}
      </ReactMarkdown>
    </div>
  );
}

export default App;

これだけで、与えたMarkdown文字列がHTMLとしてレンダリングされます。

シンタックスハイライトの対応

コードブロックにシンタックスハイライトを付けたい場合は、react-syntax-highlighter や rehype-highlight といったプラグインを組み合わせることができます。

npm install react-syntax-highlighter rehype-highlight

import React from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeHighlight from 'rehype-highlight';

function App() {
  const markdown = `
\`\`\`js
console.log("Hello World");
\`\`\`
  `;

  return (
    <ReactMarkdown
      remarkPlugins={[remarkGfm]}
      rehypePlugins={[rehypeHighlight]}
    >
      {markdown}
    </ReactMarkdown>
  );
}

export default App;

2. react-showdown

showdown というMarkdownパーサをReactで手軽に使いやすくしたのが react-showdown です。

インストール

npm install react-showdown
# or
yarn add react-showdown

使い方

import React from 'react';
import { MarkdownView } from 'react-showdown';

function App() {
  const markdown = `
# react-showdownの例
- 一覧
- 一覧2
  `;
  
  return (
    <MarkdownView
      markdown={markdown}
      options={{ tables: true, emoji: true }}
    />
  );
}

export default App;

showdownのオプションを活用して、GitHub Flavored Markdownのテーブルや絵文字などをサポートできます。

3. markdown-itやmarkedなどを独自に組み込み

markdown-it や marked などのパーサを利用してMarkdownをHTML文字列に変換し、それをReactコンポーネントの中で dangerouslySetInnerHTML を使って表示する方法もあります。

例: marked

npm install marked

import React from 'react';
import { marked } from 'marked';

function App() {
  const markdown = `
# markedの例
- リストA
- リストB
  `;

  const html = marked(markdown); // Markdown → HTMLに変換

  return (
    <div
      dangerouslySetInnerHTML={{ __html: html }}
    />
  );
}

export default App;

ただし dangerouslySetInnerHTML は、XSSなどのセキュリティリスクに対する注意が必要です。信頼できるMarkdownのみを扱う場合は問題ないですが、ユーザー入力をそのまま表示する可能性がある場合は、パーサのサニタイズオプションを有効にする等の対策を取った方がよいでしょう。

まとめ

  • 簡単に導入したい場合
    → react-markdown を使うのがもっとも手軽です。プラグインも充実しているので幅広いMarkdownに対応できます。
  • 軽量かつ柔軟に表現したい場合
    → react-showdown も候補になります。
  • より細かいカスタマイズが必要な場合
    → markdown-it や marked などのパーサを直接使い、必要に応じてサニタイズ・プラグインなどを組み合わせる方法があります。

一般的には、react-markdown が開発コミュニティでも広く使用されており、Markdown表示の最適解の一つとされています。ぜひ検討してみてください。

まさぴょん🐱まさぴょん🐱

react-markdownで、CSSを適用したい場合 by GPT o1

ReactMarkdown はデフォルトで生成される HTML 要素（例: <a> タグ）にスタイルを適用しません。
そのため、リンクを青色 & 下線で表示するには、以下のいずれかの方法でスタイルを当てる必要があります。

1. シンプルに CSS で <a> タグをスタイリングする

ReactMarkdown が出力する <a> タグに対して、CSS でスタイルを指定する方法です。グローバルな CSS や、モジュール化した CSS を使って、下記のようにスタイル指定を行います。

/* 例: markdown.css など */
a {
  color: blue;
  text-decoration: underline;
}

ReactMarkdown の出力箇所がアプリ全体に影響しないようにしたい場合は、専用のクラスを付与してスコープを絞ることをおすすめします。

.markdown-content a {
  color: blue;
  text-decoration: underline;
}

React 側では、以下のようにクラスを指定しておけば OK です。

function App() {
  const markdown = `[Google](https://www.google.com) へのリンク`;

  return (
    <div className="markdown-content">
      <ReactMarkdown>{markdown}</ReactMarkdown>
    </div>
  );
}

2. components (旧renderers) プロパティでカスタムコンポーネントを指定する

ReactMarkdown には、要素単位で独自のレンダリングコンポーネントを指定する仕組みがあります。
components={{ a: カスタムコンポーネント }} という形で指定することで、 <a> タグに好きなスタイルやロジックを簡単に組み込めます。

import React from 'react';
import ReactMarkdown from 'react-markdown';

function StyledLink({ node, ...props }) {
  return (
    <a
      {...props}
      style={{
        color: 'blue',
        textDecoration: 'underline'
      }}
    />
  );
}

function App() {
  const markdown = `[Google](https://www.google.com) へのリンク`;

  return (
    <ReactMarkdown
      components={{
        a: StyledLink
      }}
    >
      {markdown}
    </ReactMarkdown>
  );
}

export default App;

これにより、ReactMarkdown 内で生成されるリンクは自動的に上記のスタイルが適用されます。

まとめ

  • CSS でスタイリングする方法
    単純に「ReactMarkdown が生成する HTML 要素」に対して CSS をあてるだけでも OK です。特定のクラスを付与しておけば、他の要素への影響も防げます。
  • components を使った方法
    よりコンポーネントとして React 的に管理したい場合は、ReactMarkdown の components で <a> をオーバーライドして、スタイルを直接付与できます。

どちらの方法でも、最終的に普通の HTML の <a> タグが作られますので、お好みに合った方法で青色 & 下線スタイルを適用してみてください。