reactの求人情報｜RESUMY JOBSreactの求人。株式会社Chottが運営するRESUMY JOBS（レジュミージョブ）は、大手・優良企業を中心に正社員からフリーランス案件まで豊富な求人情報を掲載中。reactの求人情報｜RESUMY JOBS

React.jsは、WebアプリケーションのUIを構築するための人気のJavaScriptライブラリです。React.jsを使ってMarkdownコンテンツを表示することで、記事やドキュメントを動的に生成し、インタラクティブな操作を加えることができます。本記事では、React.jsでMarkdownを表示する方法と、役立つライブラリ、実装例を紹介します。

React.jsでMarkdownを表示する方法

React.jsでMarkdownを表示するには、react-markdownというライブラリが便利です。react-markdownは、MarkdownをReactコンポーネントに変換してレンダリングします。

まず、react-markdownをインストールします。

npm install react-markdown

または、yarnを使う場合:

yarn add react-markdown

react-markdownのGitHubリポジトリ: https://github.com/remarkjs/react-markdown

react-markdownのnpmページ: https://www.npmjs.com/package/react-markdown

次に、Markdownコンテンツをreact-markdownコンポーネントに渡します。

import ReactMarkdown from 'react-markdown';

const markdown = `
# 見出し1
## 見出し2
- リスト項目1
- リスト項目2
`;

function MyComponent() {
  return (
    <ReactMarkdown>{markdown}</ReactMarkdown>
  );
}

これだけで、Markdownが適切にレンダリングされます。

react-markdownを拡張するプラグイン

remark-gfm

remark-gfmは、GitHubフレーバーのMarkdown(GFM)をサポートするプラグインです。テーブル、タスクリスト、自動リンクなどのGFM独自の記法を使えるようになります。

インストール:

npm install remark-gfm

または、yarnを使う場合:

yarn add remark-gfm

remark-gfmのGitHubリポジトリ: https://github.com/remarkjs/remark-gfm
remark-gfmのnpmページ: https://www.npmjs.com/package/remark-gfm

使用例:

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

const markdown = `
| 列1 | 列2 |
|----|-----|
| 値1 | 値2 |
`;

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

remark-math, rehype-katex

remark-mathとrehype-katexを使うと、TeX形式の数式をHTMLにレンダリングできます。

インストール:

npm install remark-math rehype-katex katex

または、yarnを使う場合:

yarn add remark-math rehype-katex katex

remark-mathのGitHubリポジトリ: https://github.com/remarkjs/remark-math

remark-mathのnpmページ: https://www.npmjs.com/package/remark-math

rehype-katexのGitHubリポジトリ: https://github.com/remarkjs/remark-math/tree/main/packages/rehype-katex

rehype-katexのnpmページ: https://www.npmjs.com/package/rehype-katex

katexのGitHubリポジトリ: https://github.com/KaTeX/KaTeX

katexのnpmページ: https://www.npmjs.com/package/katex

使用例:

import ReactMarkdown from 'react-markdown';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';
import 'katex/dist/katex.min.css';

const markdown = `
インラインの数式: $E = mc^2$

ブロックの数式:
$$
\\\\\\\\int_0^\\\\\\\\infty \\\\\\\\frac{x^3}{e^x-1}\\\\\\\\,dx = \\\\\\\\frac{\\\\\\\\pi^4}{15}
$$
`;

function MyComponent() {
  return (
    <ReactMarkdown
      remarkPlugins={[remarkMath]}
      rehypePlugins={[rehypeKatex]}
    >
      {markdown}
    </ReactMarkdown>
  );
}

シンタックスハイライトのカスタマイズ

react-syntax-highlighterを使えば、コードブロックのシンタックスハイライトをカスタマイズできます。言語名を指定してハイライトしたり、ファイル名を表示したりできます。

インストール:

npm install react-syntax-highlighter

または、yarnを使う場合:

yarn add react-syntax-highlighter

react-syntax-highlighterのGitHubリポジトリ: https://github.com/react-syntax-highlighter/react-syntax-highlighter

react-syntax-highlighterのnpmページ: https://www.npmjs.com/package/react-syntax-highlighter

言語を指定してハイライト:

import ReactMarkdown from 'react-markdown';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';

const markdown = `
\\\\`\\\\`\\\\`js
console.log('Hello, world!');
\\\\`\\\\`\\\\`
`;

function CodeBlock({ language, value }) {
  return (
    <SyntaxHighlighter language={language}>
      {value}
    </SyntaxHighlighter>
  );
}

function MyComponent() {
  return (
    <ReactMarkdown
      components={{
        code: CodeBlock
      }}
    >
      {markdown}
    </ReactMarkdown>
  );
}

ファイル名の表示:

import ReactMarkdown from 'react-markdown';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';

const markdown = `
\\\\`\\\\`\\\\`js:example.js
console.log('Hello, world!');
\\\\`\\\\`\\\\`
`;

function CodeBlock({ language, value }) {
  const [lang, filename] = language.split(':');
  return (
    <>
      <div>{filename}</div>
      <SyntaxHighlighter language={lang}>
        {value}
      </SyntaxHighlighter>
    </>
  );
}

function MyComponent() {
  return (
    <ReactMarkdown
      components={{
        code: CodeBlock
      }}
    >
      {markdown}
    </ReactMarkdown>
  );
}

その他のReact.js向けMarkdownライブラリ

MDX: JSXをMarkdownに埋め込める拡張記法。Markdownの中にReactコンポーネントを記述できる。

MDX: JSXをMarkdownに埋め込める拡張記法。
Markdownの中にReactコンポーネントを記述できる。
GitHubリポジトリ: mdx-js/mdx
ドキュメント: mdxjs.com

Showdown: オプションが豊富で柔軟なMarkdown-to-HTMLコンバータ。
GitHubリポジトリ: showdownjs/showdown
ドキュメント: showdownjs.com

markdown-to-jsx: シンプルで軽量なMarkdownレンダラー。
カスタムコンポーネントもサポート。
GitHubリポジトリ: probablyup/markdown-to-jsx
npmページ: npmjs.com/package/markdown-to-jsx

まとめ

本記事では、React.jsでMarkdownを表示する方法を解説しました。react-markdownを中心に、GitHubフレーバーのMarkdownや数式のレンダリング、シンタックスハイライトのカスタマイズ方法を紹介しました。また、各ライブラリのダウンロードリンクも付記しました。React.jsでMarkdownを活用することで、リッチなコンテンツを柔軟に表示できます。ライブラリの選択肢も豊富なので、プロジェクトのニーズに合わせて最適なものを選んでください。

reactの求人情報｜RESUMY JOBSreactの求人。株式会社Chottが運営するRESUMY JOBS（レジュミージョブ）は、大手・優良企業を中心に正社員からフリーランス案件まで豊富な求人情報を掲載中。reactの求人情報｜RESUMY JOBS