主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ノ
書いてあるコードは自己責任でご自由にどうぞ。記事本文の無断転載は禁止です。
2022/01/29
このブログでは 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>
);
};
スタイルは自由にすれば良いと思います。
ということで、今日のブログでした。ではでは~。