如何在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
相关产品推荐
相关产品推荐

