なつねこメモ

主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ﾉ

2022/01/29

react-syntax-highlighter でファイル名を表示したい

カテゴリー：

このブログでは react-syntax-highlighter を使っているのですが、下のような形式の場合

```javascript:next.config.js
module.exports = { }
```

つまりは、言語名の後に :filename という形で指定された場合、ファイル名として表示する実装をしています。
今回はその実装方法について。

といってもやり方は簡単で、次のようにしてあげればおーけー。
サンプルコードでは remark で Markdown パースをしていることとして、言語名パース部分はこんな感じ。

const code: CodeComponent = ({ inline, className, children }) => {
  const match = /language-(\w+)/.exec(className || "language-plaintext");
  const filename = match ? className?.split(":")[1] ?? undefined : undefined;
  return !inline && match ? (
    <SyntaxHighlighter
      language={match[1]}
      filename={filename}
      contents={children}
    />
  ) : (
    <code>{children}</code>
  );
};
 
return <ReactMarkdown components={{ code }}>{markdown}</ReactMarkdown>;

コンポーネント側もこのような感じで表示できます。

const SyntaxHighlighter: React.VFC<Props> = ({
  language,
  filename,
  content,
}) => {
  return (
    <div className="my-4">
      {filename && (
        <p
          style={{
            background: "rgb(30, 30, 30)",
            color: "rgb(212, 212, 212)",
            fontSize: "13px",
            padding: ".25em 1em",
            borderBottom: "1px solid rgb(106, 106, 106)",
            borderTopLeftRadius: "4px",
            borderTopRightRadius: "4px",
            width: "fit-content",
          }}
        >
          {filename}
        </p>
      )}
      <ReactSyntaxHighlighter language={language}>
        {content}
      </ReactSyntaxHighlighter>
    </div>
  );
};

スタイルは自由にすれば良いと思います。
ということで、今日のブログでした。ではでは～。