用C#给Markdown加个"思考气泡"！深度解析自定义<think>标签渲染实战
场景痛点
当你的AI助手在输出答案前需要"认真思考"时，如何让这个过程在Markdown中优雅呈现？DeepSeek和qwen3采用<think>标签包裹思考内容，但常规渲染器会直接忽略这个自定义标签。今天教大家用C#+Markdig打造专属渲染效果！
技术选型
选用Markdig这个高性能Markdown处理库，它支持：
o 灵活的解析器扩展
o 多格式渲染输出
o 丰富的内置扩展
o 媲美CommonMark的兼容性
四步实现核心功能
1. 自定义区块解析器
public class ThinkBlockParser : BlockParser
{
// 智能定位<think>标签
public override BlockState TryOpen(BlockProcessor processor)
{
var lineStr = processor.Line.ToString();
int startIdx = lineStr.IndexOf("<think>", StringComparison.Ordinal);
if (startIdx == -1) return BlockState.None;
// 创建区块并跳过开始标签
processor.NewBlocks.Push(new ThinkBlock(this));
processor.GoToColumn(startIdx + "<think>".Length);
return BlockState.Continue;
}
// 精准捕获</think>结束标签
public override BlockState TryContinue(...)
{
int endIdx = lineStr.IndexOf("</think>",...);
// 处理跨行内容与标签闭合
}
}2. 定义语义化区块
public class ThinkBlock : ContainerBlock
{
// 继承容器特性，支持嵌套Markdown语法
public int StartColumn { get; set; }
public SourceSpan CustomSpan { get; set; }
}3. 定制HTML渲染器
protected override void Write(HtmlRenderer renderer, ThinkBlock obj)
{
renderer.Write(""<div class="think-container">"");
// 添加思考气泡样式
renderer.Write(""<div class="think-icon"></div>"");
// 递归渲染子元素
base.WriteChildren(renderer, obj);
}4. 集成到处理管道
public class ThinkExtension : IMarkdownExtension
{
public void Setup(MarkdownPipelineBuilder pipeline)
{
// 在HTML解析器前插入自定义解析器
pipeline.BlockParsers.InsertBefore<HtmlBlockParser>(new ThinkBlockParser());
}
}专属样式设计
.think-container {
background: #f3f9fe; /* 浅蓝思考底色 */
border-left: 4px solid #2196F3; /* 左侧强调线 */
margin: 1rem 0;
padding: 1rem 1.5rem;
position: relative;
box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* 柔和投影 */
}
.think-icon {
position: absolute;
left: -32px;
top: 50%;
transform: translateY(-50%);
background: url('think-bubble.png') no-repeat; /* 定制图标 */
width: 28px;
height: 28px;
}快速集成
var pipeline = new MarkdownPipelineBuilder()
.UseAdvancedExtensions()
.Use<ThinkExtension>() // 启用思考标签扩展
.Build();
var html = Markdown.ToHtml(markdownContent, pipeline); 效果对比
原始Markdown
<think>
1. 分析用户需求
2. 检索知识库
3. 生成回答框架
</think>
最终答案是...扩展思考
o 支持多级嵌套思考过程
o 添加展开/折叠交互
o 结合AI生成动画效果
o 不同思考状态图标切换（//）
实践小贴士
1. 使用TrySetLineStart确保跨行解析准确性
2. 通过SourceSpan记录源码位置便于调试
3. 处理转义字符时注意HTML编码
4. 性能优化：重用解析器实例
现在就动手给你的AI助手加上这个酷炫的"思考气泡"吧！遇到问题欢迎在评论区交流