用C#给Markdown加个“思考气泡”！深度解析自定义标签渲染实战

摘要：public class ThinkBlockParser : BlockParser{// 智能定位标签public override BlockState TryOpen(BlockProcessor processor){var lineS

🎨 用C#给markdown加个"思考气泡"！深度解析自定义

📌 场景痛点

当你的AI助手在输出答案前需要"认真思考"时，如何让这个过程在Markdown中优雅呈现？DeepSeek和qwen3采用标签包裹思考内容，但常规渲染器会直接忽略这个自定义标签。今天教大家用C#+Markdig打造专属渲染效果！

🛠️ 技术选型选用Markdig这个高性能Markdown处理库，它支持：

• 灵活的解析器扩展

• 多格式渲染输出

• 丰富的内置扩展

• 媲美CommonMark的兼容性

🔧 四步实现核心功能

1. 自定义区块解析器

public class ThinkBlockParser : BlockParser
{
// 智能定位标签
public override BlockState TryOpen(BlockProcessor processor)
{
var lineStr = processor.Line.ToString;
int startIdx = lineStr.IndexOf("", StringComparison.Ordinal);
if (startIdx == -1) return BlockState.None;

// 创建区块并跳过开始标签
processor.NewBlocks.Push(new ThinkBlock(this));
processor.GoToColumn(startIdx + "".Length);
return BlockState.Continue;
}

// 精准捕获结束标签
public override BlockState TryContinue(...)
{
int endIdx = lineStr.IndexOf("",...);
// 处理跨行内容与标签闭合
}
}

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("""");
// 添加思考气泡样式
renderer.Write(""🤔"");
// 递归渲染子元素
base.WriteChildren(renderer, obj);
}

4. 集成到处理管道

public class ThinkExtension : IMarkdownExtension
{
public void Setup(MarkdownPipelineBuilder pipeline)
{
// 在HTML解析器前插入自定义解析器
pipeline.BlockParsers.InsertBefore(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 // 启用思考标签扩展
.Build;

var html = Markdown.ToHtml(markdownContent, pipeline);

💡 效果对比

原始Markdown

1. 分析用户需求
2. 检索知识库
3. 生成回答框架

最终答案是...

渲染效果