Skip to content

Conversation

@tbries
Copy link

@tbries tbries commented Nov 26, 2025

This PR tweaks the website CSS config to avoid rendering backticks () used in the .mdx content files to denote which words should be rendered as code`, markdown style.

Current version of https://badger.github.io/hack/badge-custom-username/ with the extra backticks (`):
Current website version with the extra backticks

Locally running version of this branch showing the backticks are gone but the code formatting remains:
Locally running version of this branch showing the backticks are gone but the code formatting remains

Copilot AI review requested due to automatic review settings November 26, 2025 13:36
Copilot finished reviewing on behalf of tbries November 26, 2025 13:37
Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR removes the visual backticks from inline code elements in MDX content while preserving the code formatting. The backticks were previously rendered via CSS pseudo-elements, which resulted in redundant visual markers since the code styling itself already distinguishes inline code from regular text.

Key Changes:

  • Removed CSS rule that added backtick characters before and after inline code via pseudo-elements
  • Replaced with explicit content: none declaration to prevent pseudo-element rendering
Comments suppressed due to low confidence (1)

src/styles/globals.css:499

  • [nitpick] The gradient background and glow effects on inline code elements may be too prominent for frequent inline code usage. Consider whether this level of visual emphasis is appropriate for inline code (as opposed to code blocks), which typically appears multiple times in technical documentation. The dark hacker aesthetic guidelines suggest using accent green sparingly and avoiding unnecessary visual effects.
.dark .prose :not(pre) > code {
  background: linear-gradient(
    135deg,
    hsla(139, 96%, 65%, 0.08) 0%,
    hsla(140, 6%, 58%, 0.08) 100%
  );
  box-shadow: 
    0 0 15px rgba(95, 237, 131, 0.1),
    inset 0 0 10px rgba(95, 237, 131, 0.05);

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