Prism でシンタックスハイライト

このブログのソースコードが読みにくかったので rehype-prism を入れてシンタクッスハイライトされるようになりました。 あと画像がオリジナルサイズのまま埋め込まれていたのでページの横幅に調整、react-medium-image-zoom でクリック時に拡大するようにしました。 こういう感じの ZoomImage コンポーネントを作って、

// ZooomImage.tsx
import React from "react";
import "react-medium-image-zoom/dist/styles.css";
import Zoom from "react-medium-image-zoom";

export const ZoomImage = function ZoomImage(props) {
  return (
    <Zoom>
      <img {...props} width="100%" />
    </Zoom>
  );
};

MDX 変換時のコンポーネントリストに加えました。

// [slug].tsx
    :
import { ZoomImage } from '../../components/ZoomImage'
    :
const components = {
  a: Link,
  YouTube: dynamic(() => import('react-youtube')),
  Head,
  img: ZoomImage // ここに追加
}
    :
export default function PostPage({ source, frontMatter }) {
  const content = hydrate(source, { components })
  return (
    :
  )
}