如何在网页中正确渲染Markdown数据？渲染效果异常求助

嘿，我懂你的困扰——把支持Markdown的问题存到数据库后，直接渲染出来就是一堆干巴巴的字符串，完全没有StackOverflow那种清爽的排版和代码高亮效果对吧？别慌，咱们一步步来搞定这个事儿：

用户提交的内容里可能包含HTML、JS代码，直接渲染会有XSS攻击风险（比如恶意脚本窃取用户信息）。所以第一步必须先做安全过滤，再解析Markdown。
推荐用DOMPurify这个库，它能自动过滤掉危险的HTML/JS代码，保证渲染内容的安全性。

选一个成熟的Markdown解析库，把用户提交的原始Markdown字符串转换成可渲染的HTML。常用的有Marked.js或者Showdown，这里以Marked.js为例：

示例代码（前端渲染部分） #

<!-- 先引入需要的库 -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js"></script>

<!-- 用来展示问题的容器 -->
<div id="question-display"></div>

<script>
  // 假设从数据库取出的原始问题内容存在这个变量里
  const rawQuestion = `# 我的测试问题
  这是一段普通文本，*这里是强调内容*，**这里是加粗内容**。

  > 这是引用的内容，就像StackOverflow的引用块一样

  下面是代码示例：
  \`\`\`javascript
  function calculateSum(a, b) {
    return a + b;
  }
  console.log(calculateSum(2, 3));
  \`\`\`
  `;

  // 先解析Markdown为HTML，再用DOMPurify过滤危险代码
  const safeHtml = DOMPurify.sanitize(marked.parse(rawQuestion));
  // 把处理后的HTML插入到页面容器里
  document.getElementById('question-display').innerHTML = safeHtml;
</script>

光转成HTML还不够，代码块需要语法高亮才够专业。推荐用Prism.js或者Highlight.js，这里以Prism.js为例：

补充代码（添加高亮） #

<!-- 引入Prism的样式文件（选一个你喜欢的主题） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.css">
<!-- 引入Prism核心JS -->
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
<!-- 引入你需要支持的语言包，比如JavaScript、HTML等 -->
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-javascript.min.js"></script>

<script>
  // 前面的解析代码...
  document.getElementById('question-display').innerHTML = safeHtml;
  // 对页面中的代码块进行高亮处理
  Prism.highlightAll();
</script>

你可以自己写CSS调整排版，比如标题的下划线、引用块的左侧竖线、代码块的背景色等，示例片段：

#question-display {
  max-width: 800px;
  margin: 20px auto;
  padding: 0 20px;
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

#question-display h1 {
  font-size: 2em;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

#question-display blockquote {
  border-left: 4px solid #0077cc;
  padding-left: 15px;
  background-color: #f7f7f7;
  margin: 15px 0;
}

#question-display pre[class*="language-"] {
  background-color: #2d2d2d;
  border-radius: 4px;
  padding: 15px;
  overflow-x: auto;
}

最后提醒一句：数据库里就存用户提交的原始Markdown字符串就行，不要提前解析成HTML。这样以后如果要更换解析库或者调整渲染规则，都能灵活修改，不用动数据库里的内容。

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