TAKEO

TAKEO

コードブロックのファイル名を表示する next-mdx-remote

コードブロックのファイル名を表示したい

markdownのコードブロックでファイル名を下記のように記述しますよね。

Copied!!
```jsx:ファイル名.js
hogehoge = ()=>{}

next-mdx-remote ではファイル名を自動で表示してくれません。本記事ではファイル名を表示する方法について紹介します。完成形は下記の通りです。

ファイル名.js
Copied!!
hogehoge = ()=>{}

本記事はコードブロックへのシンタックスハイライトの追加で作成したものをベースとしています。

方法の概要

  • カスタムコンポーネントを使う
  • ファイル名を正規表現で抽出する
  • 見た目をcssを使ってカスタマイズする

方法

  1. 正規表現からファイル名を取り出す

    components/codeblock.js
    Copied!!
    const CodeBlock = ({ className, children = "" }) => {
    // コードブロックの各要素を設定
  const match = /language-(\w+)(:?.*)/.exec(className || "");
  const language = match && match[1] ? match[1] : "";
  const fileName = match && match[2] ? match[2].slice(1) : "";

  2. ファイル名を表示するための要素を追加する

    components/codeblock.js
    Copied!!
    const CodeBlock = ({ className, children = "" }) => {
...
  return (
    <>
      {fileName && <div className="code-block-title">{fileName}</div>}

  3. ファイル名のcssを記述する

    Copied!!
    .code-block-title {
  display: inline-block;
  border-radius: 0.3rem 0.3rem 0 0;
  background-color: #323e52;
  padding: 0.55rem 1rem;
  color: white;
  font-size: 0.8rem;
  font-family: Inconsolata, Monaco, Consolas, "Courier New", Courier,
    monospace;
}

  4. 完成形

    components/codeblock.js
    Copied!!
    import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { atomDark } from "react-syntax-highlighter/dist/cjs/styles/prism";

const CodeBlock = ({ className, children = "" }) => {
    // コードブロックの各要素を設定
  const match = /language-(\w+)(:?.*)/.exec(className || "");
  const language = match && match[1] ? match[1] : "";
  const fileName = match && match[2] ? match[2].slice(1) : "";
  const code = String(children).replace(/\n$/, "");
  return (
    <>
      {fileName && <div className="code-block-title">{fileName}</div>}
      <SyntaxHighlighter language={language} style={atomDark} className="code-block" >
        {code}
      </SyntaxHighlighter>
      <style jsx global>{`
          .code-block-title {
            display: inline-block;
            border-radius: 0.3rem 0.3rem 0 0;
            background-color: #323e52;
            padding: 0.55rem 1rem;
            color: white;
            font-size: 0.8rem;
            font-family: Inconsolata, Monaco, Consolas, "Courier New", Courier,
            monospace;
          }
          .code-block {
            border-radius: 0.3rem !important;
            padding: 1.5rem !important;
          }
      `}</style>
    </>
  );
};

export default CodeBlock

  5. MDXRemoteのコンポーネントに追加する

    pages/hoge.js
    Copied!!
    import CodeBlock from '../../components/codeblock';

const components = {
  code: (props) => (
    <CodeBlock {...props} />
  ),
};

export default function HogePage({ source }){
  return (
    <MDXRemote {...source} components={components}>
  )
}

終わりに

コードブロックのファイル名を表示する方法について紹介しました。cssで自在に変化させることができるのでカスタマイザビリティが高いですね。オリジナルなものを作ってみましょう！

関連記事

ホームへ