Блог

Привет, надеюсь, у тебя будет отличный день!

Я нахожусь в середине изучения кое-чего о уценке в react, я уже успешно использую редактор уценки react, но теперь, когда я хочу его отобразить, я застрял, я использую react-markdown и NEXTJS , и вот в чем проблема:

импорт library :

 const ReactMarkdown = dynamic(
  () => import("react-markdown").then((mod) => mod.default),
  { ssr: false }
);
const rehypeRaw = dynamic(
  () => import("rehype-raw").then((mod) => mod.default),
  { ssr: false }
);
const remarkGfm = dynamic(
  () => import("remark-gfm").then((mod) => mod.default),
  { ssr: false }
);
 

у меня уценка выглядит так:

 const [value, setValue] = useState("# A demo of `react-markdown`");
 

и это мой div

 <div className="container mx-auto px-0 lg:px-40 pt-6 pb-8 sm:pt-14 sm:pb-16 md:pt-14 md:pb-16 min-h-screen">
        <ReactMarkdown
          children={value}
          remarkPlugins={[remarkGfm]}
        />
</div>
 

и когда я обновляю свою страницу, я получаю это:

это не H1 так , и code tag , похоже, не сработало, НО когда я использую жирный шрифт:

 const [value, setValue] = useState("# A **demo** of `react-markdown`");
 

полужирный шрифт отображается..

и в этот момент, я понимаю, почему это произошло, может ли кто-нибудь мне помочь?

Похоже, вы используете TailwindCSS, стили по умолчанию для элементов сброшены, поэтому h1 текст будет выглядеть как любой другой текст.

Вы можете использовать @tailwindcss/typography это для противодействия.

Просто добавьте плагин в свой tailwindcss.config.js файл

 // tailwindcss.config.js
module.exports = {
  plugins: [require('@tailwindcss/typography'), (...)],
  ...
}
 

И используйте prose классы для элементов HTML

 <div className="prose ...">(...)</div>
 

Кроме того, при использовании Next.js динамического импорта вам не нужно использовать then синтаксис, чтобы получить модуль по умолчанию.

 const ReactMarkdown = dynamic(() => import("react-markdown"), { ssr: false });
 

Этот фрагмент кода должен дать вам то же самое, что и при импорте default модуля. Используйте только then тогда, когда вы хотите импортировать определенный экспорт