使用Flask加载YAML内容到HTML时换行不显示怎么解决？

问题的核心原因有两个：

• Jinja2模板默认开启了HTML内容转义，你在YAML里写的<br>标签会被转义成纯文本显示，不会被识别为换行标签
• HTML默认会将普通文本里的\n换行符、连续空格都合并为单个空格，不会直接渲染为换行

以下是两个可直接使用的解决方案，按需选择即可： #

方案1：利用YAML块换行 + CSS控制换行（最安全，推荐） #

YAML的|块标量本身就会保留你手动输入的换行，不需要额外加\n或者转义符，直接按你要的换行格式写YAML即可：

profile:
  first_name: |
    I would like to have a break here.
    And then I would also to have a break here
    But it does not work whatever I try.

然后修改HTML模板，给展示文本的标签添加white-space: pre-line样式，让HTML识别\n作为换行符：

<!DOCTYPE html>
<html>
<body>
    <h1>My homepage</h1>
    <p style="white-space: pre-line;">{{ data.profile.first_name }} </p>
    <p>This is a test website again</p>
  </body>
</html>

这个方案不需要关闭Jinja的转义，没有XSS安全风险，适合所有场景。 #

方案2：用
标签 + Jinja safe过滤器 #

如果确实需要在YAML里用HTML标签控制格式，可以用Jinja的safe过滤器关闭对应变量的转义，让标签可以被正常解析。
首先修改YAML，在需要换行的位置加<br>：

profile:
  first_name: I would like to have a break here.<br>And then I would also to have a break here<br>But it does not work whatever I try.

然后修改HTML模板，给变量加safe过滤器：

<!DOCTYPE html>
<html>
<body>
    <h1>My homepage</h1>
    <p>{{ data.profile.first_name|safe }} </p>
    <p>This is a test website again</p>
  </body>
</html>

注意：这个方案会让变量里的所有HTML标签都生效，如果你的YAML内容包含不可信的用户输入，会有XSS注入风险，仅适合内容完全可控的场景。 #

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