Markdown在Go模板中的渲染方案

在网页中展示 Markdown 内容，主要有服务端渲染（Go解析）和客户端渲染（JS解析）两种方案。因为你的百科系统核心诉求是SEO（搜索引擎优化），强烈建议采用服务端渲染（Go解析）。若使用 JS 在浏览器端解析，爬虫抓取到的将是未解析的原始文本甚至空白容器，严重影响收录。

方案一：Go服务端解析（推荐，SEO完美支持）

通过Go后端将 Markdown 文本转换为 HTML，然后作为不转义的 template.HTML 传递给 HTML 模板输出。

1. Go 后端解析逻辑

首先安装 Go 的标准 Markdown 解析库（推荐使用 goldmark，符合 CommonMark 标准且性能优异）：

go get github.com/yuin/goldmark

在你的 ai 包或工具类中定义解析函数：

package ai

import (
	"bytes"
	"html/template"
	"github.com/yuin/goldmark"
)

// ConvertMarkdown 将 Markdown 字符串转为安全的 template.HTML
func ConvertMarkdown(mdContent string) template.HTML {
	var buf bytes.Buffer
	if err := goldmark.Convert([]byte(mdContent), &buf); err != nil {
		return template.HTML(mdContent) // 如果解析失败，回退返回原始文本
	}
	return template.HTML(buf.String())
}

在 Go 控制器中，读取数据库后直接转换：

// 定义传递给页面的结构体
type ArticleViewData struct {
	ID          int
	Title       string
	HTMLContent template.HTML // 注意这里是 template.HTML 类型
}

// 核心逻辑
htmlContent := ai.ConvertMarkdown(dbArticle.Content)
data := ArticleViewData{
	ID:          dbArticle.ID,
	Title:       dbArticle.Title,
	HTMLContent: htmlContent,
}
// 执行模板渲染 mb.Execute(w, data)

2. HTML 模板结合 Tailwind Typography 美化

在前端 HTML 中，你不需要自己写复杂的 CSS 去适配 <h1>、<p>、<ul> 等标签。直接引入 Tailwind CSS 的 Typography 插件（提供 prose 类），它会自动接管并优雅地排版所有的原生 HTML 标签：

<!-- 引入 Tailwind CSS 及其排版插件 -->
<link href="https://cdn.jsdelivr.net/npm/@tailwindcss/typography@0.5.10/dist/typography.min.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com?plugins=typography"></script>

<article class="max-w-4xl mx-auto px-4 py-8">
    <!-- 用 prose 类包裹，Go渲染出来的 HTML 会自动获得精美的排版样式 -->
    <div class="prose prose-slate lg:prose-lg max-w-none dark:prose-invert">
        {{.HTMLContent}}
    </div>
</article>

提示：因为 Go 模板中 .HTMLContent 是 template.HTML 类型，Go 引擎在编译时不会对其转义，会直接吐出原生 HTML 供浏览器渲染，完美兼顾 SEO 和加载速度。

方案二：前端 JS 渲染（备选，SEO较弱）

如果你某些交互页面不需要搜索引擎收录，只是想图省事快速用客户端渲染，可以使用前端 marked.js 库：

<!-- 准备一个隐藏的文本容器存放原始 Markdown -->
<div id="raw-markdown" style="display:none;">{{.Content}}</div>

<!-- 渲染目标容器 -->
<div id="article-view" class="prose max-w-none"></div>

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
    // 1. 获取 Go 模板输出的原始 Markdown 字符串
    const rawMd = document.getElementById('raw-markdown').textContent;
    // 2. JS 解析并注入到显示容器中
    document.getElementById('article-view').innerHTML = marked.parse(rawMd);
</script>

总结建议

对于你的 AI百科系统，务必使用 方案一（服务端解析）。在 Go 里面用 goldmark 转好 HTML 后丢给模板，前端再用 Tailwind 的 prose 控制样式，这是目前生成式 AI 百科站群/内容站最成熟、收录最好的技术闭环。