Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add syntax highlighting for markdown code blocks #3507

Open
wants to merge 7 commits into
base: main
Choose a base branch
from

Conversation

adamwhitlock1
Copy link
Contributor

@adamwhitlock1 adamwhitlock1 commented Nov 8, 2024

Summary:

  • Adds syntax highlighting to code blocks via rouge gem
  • Adds a copy button to easily copy code to clipboard. This is not something we have to include, but I thought it was a nice addition. It uses the VA button and only about 35 lines of JS to get the copy functionality working.
  • Syntax styling aka theme for code styling taken somewhat from some of the existing styles, but instead of using hardcoded color values was able to sass variables instead. I commented on what each class style is responsible for as far as syntax highlighting, but let me know if any of that looks incorrect or should be changed. The old styles weren't actually used at all since highlighting was not set up in the _config.yml.

Screenshots

I went through the site to look for any styling issues that this change could make and tried to address any of those issues where they occurred. There really weren't many layout problems introduced by this, but below are some screenshots of the main types of pages that have changed.

Before After
about using web components about-using-web-components-before about-using-web-components-after
flexbox grid flexbox-grid-before flexbox-grid-after
prefill pattern prefill-pattern-before prefill-pattern-after

Mobile
Screenshot 2024-11-12 at 1 26 54 PM

@adamwhitlock1 adamwhitlock1 marked this pull request as ready for review November 12, 2024 20:28
@adamwhitlock1 adamwhitlock1 requested a review from a team as a code owner November 12, 2024 20:28
@adamwhitlock1 adamwhitlock1 changed the title Add syntax highlighting for markdown code blocks [WIP] Add syntax highlighting for markdown code blocks Nov 12, 2024
@adamwhitlock1
Copy link
Contributor Author

adamwhitlock1 commented Nov 12, 2024

@humancompanion-usds I'd be curious to get your opinion on this syntax highlighting as far as the colors that I chose. I tried to align with the design system as much as possible and use the token colors throughout.

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.

1 participant