React项目使用showdown渲染Markdown描述内容格式异常如何解决

解决步骤 #

你遇到的问题是三个原因共同导致的：循环逻辑错误、React默认转义HTML字符串、嵌套列表样式需要CSS自定义，按下面步骤修改即可：

1. 修正转换逻辑，保留所有条目的转换结果

你当前的for循环每次都会覆盖html变量，循环结束后只能拿到最后一条数据的转换结果，修改为批量转换所有条目：

import showdown from "showdown";

// 可根据需求开启showdown的语法支持配置
const converter = new showdown.Converter({
  simplifiedAutoLink: true,
  excludeTrailingPunctuationFromURLs: true
});

// 批量转换所有条目的description字段
const processedData = result.data.map(item => ({
  ...item,
  descriptionHtml: converter.makeHtml(item.description)
}));

2. 确保输入的description内容符合Markdown有序列表语法

showdown只有识别到标准的Markdown列表语法才会生成<ol>/<li>嵌套结构，你输入的内容需要是下面的格式才会生成嵌套列表：

1. abc:
   1. abc,
   2. abc,
   3. abc,
   4. abc

如果输入的内容没有列表标记，showdown只会生成纯文本的<p>标签。

3. React中正确插入转换后的HTML

React默认会转义HTML内容，需要用dangerouslySetInnerHTML属性插入转换结果，如果内容是用户公开输入的，建议先使用DOMPurify过滤HTML避免XSS风险：

// 列表渲染代码示例
function ContentList() {
  return (
    <ul className="content-list">
      {processedData.map((item, idx) => (
        <li key={idx} className="content-item">
          <h4>{item.name}</h4>
          <div 
            className="md-description"
            dangerouslySetInnerHTML={{ __html: item.descriptionHtml }}
          />
        </li>
      ))}
    </ul>
  )
}

4. 用CSS自定义列表样式

你需要的a. / i) / ii)格式是通过CSS控制列表样式实现的，增加以下样式即可：

/* 第一层有序列表用小写字母序号 */
.md-description ol {
  list-style-type: lower-alpha;
  padding-left: 20px;
}
/* 第二层嵌套有序列表用小写罗马数字序号 */
.md-description ol ol {
  list-style-type: lower-roman;
  padding-left: 24px;
  margin: 4px 0;
}

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