Style filename labels on code blocks

[cwickham]

#128 added structural markup for code blocks with filename labels. The HTML is in place with well-named classes — just needs CSS.

Markup structure

Every code block is now wrapped in a .code-block div. When a filename is present, it gets additional classes and an accessible label:

<div class="code-block code-with-filename" role="group" aria-labelledby="code-filename-0">
  <div class="code-with-filename-label" id="code-filename-0">
    <span class="font-mono text-sm">app.py</span>
  </div>
  <div class="highlight">
    <!-- syntax-highlighted code -->
  </div>
</div>

What needs styling

• .code-with-filename-label — the filename label (background, padding, border, positioning relative to the code block)
• .code-block — optional: consistent border-radius, spacing
• Gap/border between label and code block
• Consider how the label interacts with the existing .highlight rounded corners

Reference

• Test page: https://opensource.posit.co/test-filename/
• Example posts: shiny-r-1.12, shiny-python-1.2
• Render hook: layouts/_default/_markup/render-codeblock.html

[cpsievert]

+1, this would be nice to have.