如何在Vue.js中渲染Firebase Firestore存储的格式化文本？

HTML默认会合并空白字符（包括换行、制表符、多个空格），所以直接插入\n不会生效，给你几个实用的解决办法：

• 使用CSS white-space: pre-wrap样式（推荐）
  给存放博客内容的HTML元素添加这个CSS属性，它会保留文本里的换行、空格和制表符，同时还能让文本自动换行（避免横向滚动）。
  示例代码：

  .blog-content {
    white-space: pre-wrap;
    /* 可选：调整制表符宽度，默认是8个空格 */
    tab-size: 4;
  }
  

  JavaScript插入文本时，记得转义HTML特殊字符（比如<、>、&），防止XSS和格式错乱：

  function escapeHtml(text) {
    return text
      .replace(/&/g, '&')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#039;');
  }
  
  // 从Firestore获取文本后插入
  const blogText = await getBlogTextFromFirestore();
  document.querySelector('.blog-content').textContent = escapeHtml(blogText);
  

• 使用HTML <pre>标签
  <pre>标签会严格保留原始文本格式，但默认不会自动换行，内容过长时会出现横向滚动条。如果需要自动换行，可以结合CSS的white-space: pre-wrap一起用：

  <pre class="blog-pre"></pre>
  

  .blog-pre {
    white-space: pre-wrap;
    tab-size: 4;
  }
  

  JavaScript插入方式和上面一致，记得转义特殊字符。

• 如果是Markdown文本
  如果你存储的是Markdown格式的博客内容，可以用Markdown解析库（比如marked.js）将文本转换为HTML，这样既能保留格式，还能支持标题、列表等Markdown语法。示例：

  const blogMarkdown = await getBlogMarkdownFromFirestore();
  const htmlContent = marked.parse(blogMarkdown);
  document.querySelector('.blog-content').innerHTML = htmlContent;
  

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