React で Markdown を HTML に変換しつつ簡単に syntax highlight したい

使うもの

• react-markdown
  • Markdown を HTML に変換してくれるライブラリ
• React Syntax Highlighter
  • 受け取った文字列を syntax highlight してくれるライブラリ

実装例

~/components/CodeBlock.tsx

import React from "react"
// syntax highlight の styleはお好み、自分は JetBrains 信者なので darcula 推し
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
import { darcula } from "react-syntax-highlighter/dist/cjs/styles/prism"

interface P {
  value: string
  language?: string
}

const CodeBlock: React.FC<P> = ({ language, value }) => {
  return (
    <SyntaxHighlighter language={language} style={darcula}>
      {value}
    </SyntaxHighlighter>
  )
}

export default CodeBlock

~/pages/hoge

// 呼び出し側、どこかのページとか任意の場所で
import React from "react"
import ReactMarkdown from 'react-markdown'
import CodeBlock from "~/components/CodeBlock"

interface P {
  // マークダウンで記述された内容をstringとして受け取るとする
  markdown: string
}

const Page: React.FC = ({ markdown }) => {
  // 先に用意した CodeBlock コンポーネントを renderers に渡すと
  // md から html に変換する際、code タグになる部分だけ渡したコンポーネントを使って描画してくれるので
  // syntax highlight が簡単にできる
  return (
    <ReactMarkdown
      source={markdown}
      renderers={{ code: CodeBlock }}
    />
  )
}

style の import 元は 2 種類あるので注意

// CommonJS 準拠
import { darcula } from "react-syntax-highlighter/dist/cjs/styles/prism"
// ECMAScript 準拠
import { darcula } from "react-syntax-highlighter/dist/esm/styles/prism"

ES6構文のexportに対応してない環境だと esm から import してしまうとエラーとなるので、環境に合わせて esm か cjs か選択する。

他に使えるオプションとかはそれぞれの README に書いてた。

---

ブログに書いたものコピペです