本文讲解如何在 Hugo 的自定义 HTML 短代码中，安全、原生地嵌入用户提供的多行 Markdown 内容（如人物简介），并通过 markdownify 或 renderString 函数实现语法高亮、列表、粗体等标准 Markdown 渲染效果。

本文讲解如何在 hugo 的自定义 html 短代码中，安全、原生地嵌入用户提供的多行 markdown 内容（如人物简介），并通过 `markdownify` 或 `renderstring` 函数实现语法高亮、列表、粗体等标准 markdown 渲染效果。

在 Hugo 中，直接将含换行符和 Markdown 语法的字符串（如 bio="Here are some achievements\n- First thing\n- and this is **really** important"）传入 .Get "bio" 后，HTML 短代码默认仅作纯文本输出——换行被忽略，**bold** 不转义为 <strong></strong>，列表项也丢失语义。根本原因在于：Hugo 短代码接收的参数是原始字符串，不会自动解析 Markdown。

✅ 正确做法分两步：

1. 前端：使用 YAML 多行语法定义变量（推荐）
在内容文件（如 person.md）中，避免用双引号包裹多行文本，改用 YAML 管道符（|）语法，确保换行与格式完整保留：

---
name: "Alice Chen"
title: "Senior Researcher"
img: "/images/alice.jpg"
bio: |
  Here are some achievements:
  - First thing
  - List item
  - and this is **really** important
---

⚠️ 注意：| 后需换行，且缩进必须统一（建议 2 空格），否则 YAML 解析失败。

2. 短代码：用 markdownify 渲染变量
修改你的 layouts/shortcodes/person-table.html（或对应名称），将 {{ .Get "bio" }} 替换为 {{ .Get "bio" | markdownify }}：

<table>
  <tr>
    <td valign="top" rowspan="2" width="170">
      <img src="{{ .Get "img" }}"    style="max-width:90%" alt="{{ .Get "name" }}">
    </td>
    <td width="600" height="30">
      <b>{{ .Get "name" }}</b>, <i>{{ .Get "title" }}</i>
    </td>
  </tr>
  <tr> 
    <td valign="top">{{ .Get "bio" | markdownify }}</td>      
  </tr>   
</table>
<br>

✅ 效果：bio 中的 **really** → <strong>really</strong>，- List item → <ul><li>List item</li></ul>，换行自动转为 <p></p> 和 <br>，完全符合预期。

立即学习“前端免费学习笔记（深入）”；

OpenClaw Skill: Obsidian Markdown to Cloudflare Pages

将选定的 Obsidian 笔记发布为静态站点并部署到 Cloudflare Pages。

下载

? 进阶选项：若需更精细控制（如启用脚注、数学公式或自定义渲染器），可使用 renderString（Hugo ≥ 0.115）：

{{ .Page.RenderString (printf "%s" (.Get "bio")) }}

它会调用当前页面的渲染管道，继承 markup 配置（如 goldmark 扩展），比 markdownify 更灵活。

? 总结：

• ❌ 不要用 "..." 包裹多行 Markdown；✅ 改用 YAML | 语法；
• ❌ 不要直接输出 .Get "bio"；✅ 必须通过 | markdownify 或 | $page.RenderString 转义；
• ✅ 确保 Hugo 版本 ≥ 0.89（markdownify 稳定支持），并检查 config.toml 中 markup.goldmark.extensions 是否启用所需扩展（如 definitionList, footnote）。

如此，你就能在表格内安全、优雅地呈现富格式人物简介，兼顾编辑友好性与前端表现力。