标题在 nextjs 中无法正确呈现

Question

我正在创建一个安全博客，我在其中上传我解决的黑客机器的文章。我使用 GraphQL 作为 cms 和 NextJS。我将条目的内容设置为架构中的 Markdown 文件，然后使用

react-markdown

来呈现该 Markdown。它确实得到了正确的渲染，但是标题的大小都是相同的。我该如何制作才能使标题大小正确。

这是我的 [slug].js 文件

import { GraphQLClient, gql } from "graphql-request";
import {MarkdownRenderer} from '../../components/MarkdownRenderer';

const graphcms = new GraphQLClient(<endpoint>);

const QUERY = gql`
query MyQuery($slug: String!) {
    entry(where: {slug: $slug}) {
      slug
      title
      description
      content
      coverImage {
        url
      }
    }
  }
  
`;

const SLUGLIST = gql`
{
    entries {
        slug
    }
}`

export async function getStaticPaths(){
    const {entries} = await graphcms.request(SLUGLIST);
    return {
        paths: entries.map((entry) => ({params: {slug: entry.slug}})),
        fallback: false,
    };
}

export async function getStaticProps( {params}) {
    const slug = params.slug;
    const data = await graphcms.request(QUERY, {slug});
    const entry = data.entry;
    return {
        props: {
            entry,
        },
    };  
}

export default function BlogPost({entry}){
    return (
        <main className=" w-1/2">
            <div className="mx-auto">
                <h1>{entry.title}</h1>
                <img src={entry.coverImage.url} className="w-1/5"/>
                <h4>{entry.description}</h4>
                <MarkdownRenderer markdownText={entry.content} />
            </div>
            
        </main>
    )
}

这是我的 Markdown 渲染器组件

import ReactMarkdown from 'react-markdown';
export const MarkdownRenderer = ({ markdownText }) => {
  return (
    <div>
      <ReactMarkdown>{markdownText}</ReactMarkdown>
    </div>
  );
};

Answer 1

要在使用 react-markdown 渲染 markdown 时控制标题大小，请自定义 MarkdownRenderer 组件

const renderers = {
  heading: (props) => {
    const { level } = props;
    switch (level) {
      case 1: return <h1>{props.children}</h1>;
      case 2: return <h2>{props.children}</h2>;
      case 3: return <h3>{props.children}</h3>;
      default: return <h4>{props.children}</h4>;
    }
  },
};

export const MarkdownRenderer = ({ markdownText }) => {
  return (
    <div>
      <ReactMarkdown renderers={renderers}>{markdownText}</ReactMarkdown>
    </div>
  );
};