Content Code blocks

The <pre><code> blocks are Prism-compatible and support captions via data-caption="..." attribute:

./css/
├── blades.core.css     # reusable class-light utilities, unthemed
├── blades.theme.css    # minimal opinionated theme
└── blades.css          # above two together

How it works

/anyblades/blades/refs/heads/main/src/standalone/content/_code.css :

pre {
  @media (width < 768px) {
    border-radius: 0;
  }
}

code {
  /* Code block caption via data-attr (to display filename, etc.) */
  &[data-caption] {
    &::before {
      content: attr(data-caption);
      display: block;
      margin-bottom: 1rem;
      opacity: 50%;
      font-style: italic;
    }
  }
}