Tailwind/排版如何在 React 项目中与 markdown-it 良好配合？

Question

我试图为我的博客开发一个新功能，即用于撰写文章的 Markdown 编辑器。

我选择了@tailwindcss/typographymarkdown -it来做到这一点，所以这是我的全部依赖项：

包.json

{
 "dependencies": {
    "firebase": "^9.0.0-beta.7",
    "markdown-it": "^12.2.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "@babel/preset-react": "^7.14.5",
    "@tailwindcss/typography": "^0.4.1",
    "autoprefixer": "^10.3.2",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.2.0",
    "dotenv-webpack": "^7.0.3",
    "html-webpack-plugin": "^5.3.2",
    "postcss": "^8.3.6",
    "postcss-cli": "^8.3.1",
    "postcss-loader": "^6.1.1",
    "style-loader": "^3.2.1",
    "tailwindcss": "^2.2.7",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.0.0"
  }
}

下面的代码是该功能的组件，包括编辑区域和预览区域。然而，这并没有奏效。

当我运行此代码时，它会像这样呈现，而无需印刷<h1>标签。

但是，如果我md.render(markdown)用<h1>hello</h1>（降价-它的渲染结果）替换，它似乎“有效”，看起来像这样。

编辑器.jsx

{
 "dependencies": {
    "firebase": "^9.0.0-beta.7",
    "markdown-it": "^12.2.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "@babel/preset-react": "^7.14.5",
    "@tailwindcss/typography": "^0.4.1",
    "autoprefixer": "^10.3.2",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.2.0",
    "dotenv-webpack": "^7.0.3",
    "html-webpack-plugin": "^5.3.2",
    "postcss": "^8.3.6",
    "postcss-cli": "^8.3.1",
    "postcss-loader": "^6.1.1",
    "style-loader": "^3.2.1",
    "tailwindcss": "^2.2.7",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.0.0"
  }
}

为什么会发生这些事情？我怎样才能让它按预期运行？

Answer 1

使用react-markdown代替markdown-it

这是一个例子：

import ReactMarkdown from "react-markdown";

<div className="prose">
    <ReactMarkdown>{markdown}</ReactMarkdown>
</div>

它将在页面中将提供的内容呈现为 DOM，并Tailwind/typography完美地设置这些元素的样式。