Search code examples
cssswagger-ui

Use custom styles in Swagger UI for your html tags

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

enter image description here

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?

Solution

  • 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.