You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在Swagger UI中为HTML标签实现自定义样式?求更优方案

在Swagger UI中实现自定义样式的更优方案?

我可以在以下C#代码的OpenApiInfo的Description中添加自定义HTML内容:

c.SwaggerDoc("v1", new OpenApiInfo { Description = "... 此处 ..." });

这里支持HTML标签,但不直接支持样式。要实现自定义样式(比如彩色文本、非默认蓝色的链接等),需要在项目根目录的/wwwroot下添加自定义swagger.css(可修改名称或放到更深层级的目录),将其设为嵌入资源后,在Configure方法中注入:

app.UseSwaggerUI(options =>
{
  options.SwaggerEndpoint("./swagger/v1/swagger.json", "v1"); 
  options.RoutePrefix = string.Empty;
  options.DocExpansion(DocExpansion.List);
  options.InjectStylesheet("/swagger.css");  // <<<< 注入自定义CSS
});

但这种方法存在局限,传统的类选择器写法不生效,例如:

// swagger.css
.rcolor {color:red !important;}
// OpenApiInfo/Description中的HTML内容
<a class='rcolor' href='...'>此链接应为红色</a>

上述代码无法改变链接的颜色。

需要借助Swagger UI的标签层级来应用样式——给元素设置独特的HTML标签嵌套结构,比如用<a><span>...</span></a>替代简单的<a>...</a>,再结合Swagger预定义的.swagger-ui、.info样式(可通过浏览器开发者工具查看,OpenApiInfo/Description处于.info样式范围内)编写CSS:

.info a span {
    color: red !important;
}

.info span a {
    color: green !important;
}

此时使用以下HTML内容:

"<pre>彩色示例 <span><a id='111'>span / a</a></span> , <a id='111'><span>a / span</span></a> " 

呈现效果为:span / a显示为绿色,a / span显示为红色。

需要注意的是,.info a span会同时影响Swagger UI自带的API文档链接(通过浏览器检查可见其为<a>...<span>...结构),可以通过设置更独特的标签嵌套来规避这个问题。

请问有没有在Swagger UI中实现自定义样式的更优方案?


内容的提问来源于stack exchange,提问作者Sasha Bond

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.19 00:22:38