6
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-07-22

使うもの

実装例

~/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 してしまうとエラーとなるので、環境に合わせて esmcjs か選択する。
他に使えるオプションとかはそれぞれの README に書いてた。


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

6
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?