Bulma CSS tag class conflicts with Prettier CSS

[sukima]

Prettier adds the class tag to HTML tags when doing syntax highlighting but it seems this is the same name Bulma CSS uses for something else causing a poorly rendered output:

This is reproduced at https://softwarebrothers.github.io/example-design-system/components_ProgressBar.vue.html

[sukima]

Work around

Use this custom CSS: (styles/custom.css)

pre code .tag {
  background-color: inherit;
  border-radius: 0;
  color: #c66;
  display: inline;
  font-size: inherit;
  height: inherit;
  line-height: inherit;
  padding-left: 0;
  padding-right: 0;
  white-space: nowrap;
}

You can include this via the static files:

{
  "templates": {
    "default": {
      "staticFiles": {
        "include": ["./styles"]
      }
    },
    "better-docs": {
      "css": "custom.css"
    }
  }
}