TAKEO

TAKEO

コードブロックへのシンタックスハイライトの追加 next-mdx-remote

シンタックスハイライトを追加したい

next-mdx-remoteで作成したページではコードブロックのシンタックスハイライトが機能しません。本記事ではシンタックスハイライトを有効にするための方法について紹介します。

方法概要

方法

  1. react-syntax-highlighterをインストール

    Copied!!
    npm install react-syntax-highlighter --save

  2. カスタムコンポーネントを実装する

    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 code = String(children).replace(/\n$/, "");
  return (
    <>
      <SyntaxHighlighter language={language} style={atomDark} className="code-block" >
        {code}
      </SyntaxHighlighter>
      <style jsx global>{`
          .code-block {
            border-radius: 0.3rem !important;
            padding: 1.5rem !important;
          }
      `}</style>
    </>
  );
};

export default CodeBlock

  3. 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}>
  )
}

関連記事

ホームへ