使うもの
-
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 に書いてた。
ブログに書いたものコピペです