英文:
Use custom styles in Swagger UI for your html tags
问题
我可以在C#示例下面添加自定义的HTML信息
c.SwaggerDoc("v1", new OpenApiInfo { Description ="...在这里..."});
这里支持HTML标签，但不支持样式。
要使用自定义样式（着色的span、非默认蓝色的链接等），我必须添加自定义CSS swagger.css（可以更改名称并放在更深的文件夹结构中）
在项目根目录下的/wwwwroot/swagger.css下，将其作为嵌入资源，并在Configure方法中注入该自定义CSS
app.UseSwaggerUI(options =>
{
options.SwaggerEndpoint("./swagger/v1/swagger.json", "v1");
options.RoutePrefix = string.Empty;
options.DocExpansion(DocExpansion.List);
options.InjectStylesheet("/swagger.css"); // <<< inject css
});
其中一个限制是不支持传统的CSS，例如
//swagger.css
.rcolor {color:red !important;}
//OpenApiInfo/Description中的HTML
<a class='rcolor' href='...'>这应该是红色链接</a>
不能改变链接的颜色。
要应用颜色，应该使用Swagger UI标记导航：对您的元素应用唯一的HTML标记模式 - 而不是简单的<a>...</a>，请将<a><span>...</span></a>放置到<a>中，例如
并更改CSS（.swagger-ui、.info是与Swagger一起提供的预定义样式 - 您可以在浏览器的开发工具/检查中看到它，并且我们的OpenApiInfo/Description部分正好在这个样式.info之内）
.info a span {
color: red !important;
}
.info span a {
color: green !important;
}
现在这个
"<pre>colored samples <span><a id='111'>span / a</a></span> , <a id='111'><span>a / span</span></a> "
将会看起来像
请注意，.info a span不是一个好主意，因为它也为http://localhost/./swagger/v1/swagger.json链接着色 - 实际上在浏览器检查器中您可以看到它是<a>...<span>...。但您可以通过应用唯一的HTML标记嵌套来轻松修复它。
有没有更好的解决方案来自定义Swagger UI的样式？
英文:
I can add custom html info in (down below C# samples)
c.SwaggerDoc("v1", new OpenApiInfo { Description ="... here ..."
html tags are supported here, but styles are not.
To use custom style (colored span, link with not default blue color, etc.) I have to add custom css swagger.css (can change name and put in deeper folder structure)
in project root under /wwwwroot/swagger.css, make it embedded resource and inject that custom css in Configure method
app.UseSwaggerUI(options =>
{
options.SwaggerEndpoint("./swagger/v1/swagger.json", "v1");
options.RoutePrefix = string.Empty;
options.DocExpansion(DocExpansion.List);
options.InjectStylesheet("/swagger.css"); // <<< inject css
});
The caveat is that traditional css is not supported, for example,
//swagger.css
.rcolor {color:red !important;}
//html in OpenApiInfo/Description
<a class='rcolor' href='...'>this should be red link</a>
does not change color of the link.
To apply colors swagger ui tag navigation should be used: apply unique html tag pattern to your element - instead of simple <a>...</a> put <a><span>...</span></a> for example
and change css (.swagger-ui, .info are predefined styles which comes with swagger - you can see it in the browser dev tools/inspect and our OpenApiInfo/Description section is right inside this style .info) to
.info a span {
color: red !important;
}
.info span a {
color: green !important;
}
and now this
"<pre>colored samples <span><a id='111'>span / a</a></span> , <a id='111'><span>a / span</span></a> "
will look like
Note, that .info a span was not a good idea since it also colored http://localhost/./swagger/v1/swagger.json link - indeed in the browser inspector you can see that it is <a>...<span>.... But you can easily fix it by apply your unique html tag nesting.
Does anybody have better solution for custom styles in swagger ui?
答案1
得分: 1
Swagger UI出于安全原因在Markdown内容中忽略了HTML的style、class和data-*属性 详情请看此链接。有一个名为useUnsafeMarkdown的配置选项用于禁用此行为，但它已被弃用，您不应该依赖它。
你提出的解决方案似乎是内联颜色样式的可行解决方法。
英文:
Swagger UI ignores HTML style, class, and data-* attributes in Markdown content for security reasons. There's the useUnsafeMarkdown configuration option to disable this behavior, but it's deprecated and you should not rely on it.
The solution you came up with looks like a viable workaround for inline color styling.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论