このブログでは 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> ); };
スタイルは自由にすれば良いと思います。
ということで、今日のブログでした。ではでは~。