Add .code-with-filename CSS styles

[elnelson575]

Summary

Extracts the CSS changes from #244 as a standalone PR so they can merge independently (thanks @cpsievert!)

Adds styles for Quarto's code-with-filename feature — code blocks that display a filename label above the code:

• Rounded border with blue accent
• Filename label with blue background
• Removes inner border-radius so the code block fits flush inside the container
• Adjusts copy-button position for the nested layout

Line numbers are enabled on the test page via code-line-numbers: true in frontmatter, keeping to the convention of specifying this at the page level rather than per block.

Test plan

• Code blocks with filename= attribute render with a labeled header and bordered container
• Copy button is correctly positioned inside code-with-filename blocks

[netlify]

✅ Deploy Preview for posit-open-source canceled.

Name	Link
🔨 Latest commit	74a9db2
🔍 Latest deploy log	https://app.netlify.com/projects/posit-open-source/deploys/6a15c8a047ee530007ad06e2

[github-actions]

🚀 Deployed on https://6a15c9a719d7f15c3b7d1cc0--posit-open-source.netlify.app

[elnelson575]

Not sure who is best to review this. This takes @cpsievert's changes and makes some updates.
@cwickham and @gregswinehart you're both mentioned in the original issue, so tagging you here!

[Copilot]

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Adds standalone CSS support for Quarto’s code-with-filename blocks and updates the test page to exercise filename labels and line numbers.

Changes:

• Add .code-with-filename container/label styling and copy-button positioning.
• Enable code line numbers on the test page.
• Add additional filename examples (path, long filename, R) to the index.qmd test content.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File	Description
content/test-filename/index.qmd	Enables line numbers and adds more filename= code-block examples for visual verification.
content/test-filename/index.md	Enables line numbers in frontmatter, but otherwise appears not regenerated to include new examples.
assets/css/main.css	Introduces styles for .code-with-filename blocks, label header, and copy-button positioning.

Comments suppressed due to low confidence (1)

content/test-filename/index.md:55

• The PR description and index.qmd add new test sections (path filename, long filename, R example), but content/test-filename/index.md is not updated to include them (it only adds code-line-numbers: true and a trailing blank line). If index.md is the source consumed by the site/build, the new test cases won’t actually render. Recommend regenerating index.md from the updated .qmd (or removing index.md from version control if it’s intended to be build output) so the test page content is consistent.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[cwickham]

Thanks so much @elnelson575 This looks fantastic!

[github-actions]

Preview links

• /test-filename/

Full site: https://6a15c9a719d7f15c3b7d1cc0--posit-open-source.netlify.app