3

コンテキスト: Chakra UIを備えたNext.jsサイトがあります。実行時に外部ソース (レポの GitHub など) からフェッチされるユーザー提供のマークダウン コンテンツがいくつかあります。README.md

現在、react- markdown ( remarkjsに基づく) はデフォルトで、マークダウン画像 ( ) に HTML<img>タグを使用します![]()。ユーザー提供のマークダウンで、Next.js 10 でリリースされた新しい<Image />コンポーネントを使用したいと考えています。さらに、他のタグも対応する Chakra UI コンポーネントに置き換えたいと考えています。

どうすればこれを行うことができますか？

解決

// utils/parser.tsx

import Image from 'next/image';

export default function ImageRenderer({ src, alt }) {
  return <Image src={src} alt={alt} unsized />;
}

次に、必要なページで：

//pages/readme.tsx

import ReactMarkdown from 'react-markdown';
import imageRenderer from '../utils/parser';

// `readme` is sanitised markdown that comes from getServerSideProps
export default function Module({ readme }) {
  return <ReactMarkdown allowDangerousHtml={true} renderers={{ image: imageRenderer }} children={readme} />
}

他の要素も同じ...

4

1 に答える 1