【react-syntax-highlighter】シンタックスハイライト表示用コンポーネント

react-syntax-highlighterを使用してコードをハイライトした状態で表示するコンポーネント。
ハイライトできない言語の場合は、codeタグを使用して表示。

Snippet

import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
import { nord } from 'react-syntax-highlighter/dist/esm/styles/prism'
import React from 'react'

type Props = {
  children: React.ReactNode
  language: string
  className?: string
}

const SyntaxCode: React.FC<Props> = (props) => {
  return (
    <>
      {props.language !== '' ? (
        <SyntaxHighlighter PreTag="div" language={props.language} style={nord}>
          {String(props.children).replace(/\n$/, '')}
        </SyntaxHighlighter>
      ) : (
        <div className="bg-appBlack-strong rounded-md text-appWhite-weak p-4 overflow-x-scroll">
          <code className={`${props.className ?? ''}`}>{props.children}</code>
        </div>
      )}
    </>
  )
}

export default SyntaxCode

【react-syntax-highlighter】シンタックスハイライト表示用コンポーネント【react-syntax-highlighter】シンタックスハイライト表示用コンポーネント

【react-syntax-highlighter】シンタックスハイライト表示用コンポーネント
【react-syntax-highlighter】シンタックスハイライト表示用コンポーネント