Skip to content

Add .code-with-filename CSS styles#271

Closed
elnelson575 wants to merge 1 commit into
mainfrom
css-filter-ui-styles
Closed

Add .code-with-filename CSS styles#271
elnelson575 wants to merge 1 commit into
mainfrom
css-filter-ui-styles

Conversation

@elnelson575
Copy link
Copy Markdown
Contributor

@elnelson575 elnelson575 commented May 21, 2026

Summary

Thanks @cpsievert for doing the hard bit in #244 . This just extracts it into a standalone like we talked about.

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

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
Copy link
Copy Markdown

netlify Bot commented May 21, 2026

Deploy Preview for posit-open-source canceled.

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

@elnelson575 elnelson575 linked an issue May 21, 2026 that may be closed by this pull request
@github-actions
Copy link
Copy Markdown

@elnelson575 elnelson575 deleted the css-filter-ui-styles branch May 21, 2026 16:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Style filename labels on code blocks

1 participant