React项目中@tailwindcss/typography如何与markdown-it正常配合使用

异常原因 #

React默认会对JSX中插入的字符串内容做HTML转义处理，以此规避XSS安全风险。你调用md.render(markdown)得到的是纯HTML字符串，直接放在JSX的大括号内时，React不会将其解析为真实DOM节点，而是会把标签符号转义后作为普通文本渲染，实际页面里并没有生成对应的<h1>元素，@tailwindcss/typography的prose样式自然无法匹配生效。
而你直接在JSX中写<h1>hello</h1>属于JSX原生节点语法，会被React直接解析为DOM节点，所以样式可以正常应用。

修复方案 #

使用React提供的dangerouslySetInnerHTML属性，将markdown-it生成的HTML字符串注入到预览容器中即可，修改后的组件代码如下：

import React, { useState } from "react";
const md = require("markdown-it")('commonmark');

const Editor = () => {
  const [markdown, setMarkdown] = useState("# hello");
  const onTextChange = (e) => {
    setMarkdown(e.target.value);
  }

  return (
    <div>
      <form>
        {/* 受控组件建议用value属性绑定，避免textarea内容出现多余空白 */}
        <textarea value={markdown} onChange={onTextChange} />
      </form>

      <div 
        id="preview" 
        className="prose"
        dangerouslySetInnerHTML={{ __html: md.render(markdown) }}
      />
    </div>
  )
}

export default Editor;

额外安全提示 #

dangerouslySetInnerHTML存在XSS注入风险，如果你的编辑器后续会开放给其他用户提交内容，建议在注入前对HTML内容做安全过滤，比如使用DOMPurify库处理渲染结果：

1. 安装依赖：npm install dompurify
2. 代码调整：

import DOMPurify from 'dompurify';
// 注入时修改为
dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(md.render(markdown)) }}

内容的提问来源于stack exchange，提问作者Macro