Skip to content

Update codeblock styles

What does this MR do and why?

As part of Redesign 2025 this MR updates codeblock style (#365 (closed)).

It does the following:

  • Updates the codeblock header (clipboard_copy.vue)
  • Updates codeblock header tests
  • Moves codeblock styles to their own file and scopes styles under parent class .codeblock-wrapper

It does NOT:

  • Update Hugo's code syntax highlighting styles
  • Implement dark mode styles

Screenshots, screen recordings, or links to review app

Screenshot_2025-06-06_at_12.29.00_PM

Links with examples in the review app:

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

  1. Configure a local GitLab Docs environment.
  2. Check out this branch.
  3. View codeblocks through the docs site

Merge request acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Closes #365 (closed)

Edited by Pearl Latteier

Merge request reports

Loading