Skip to content

Conversation

@VictorPuga
Copy link

Bug/issue: #892

Summary

This PR implements support for customizing the background color of inline code elements in documentation. Previously, inline code (rendered via the CodeVoice component) had no visual distinction through background styling, making it difficult for documentation authors to create visually distinct code styling.

Implementation

The implementation adds a new CSS theme variable --color-inline-code-background that allows documentation authors to customize the background color of inline code elements displayed in content nodes.

Key changes:

  1. Added inline-code class to CodeVoice component when rendered in content (via ContentNode.vue)
  2. Added CSS styling in CodeVoice.vue that applies the new theme variable with padding and border-radius
  3. Added --color-inline-code-background: transparent; CSS variable to both light and dark color schemes in the theme
  4. Updated dev server configuration to proxy theme-settings.json for local testing

Note: The inline-code class is only applied when CodeVoice is rendered through ContentNode.vue for inline content. The component is also used in other contexts (like symbol declarations via ReferenceInternalSymbol and ReferenceExternalSymbol) where additional background styling would not be appropriate.

Dependencies

This PR should be merged before or alongside the corresponding PR in swift-docc that updates the ThemeSettings JSON schema to document the new --color-inline-code-background theme variable.

Testing

Setup

Create a theme-settings.json file in the docs directory with custom inline code styling (see example below)

Test Steps

  1. Start the dev server: npm run serve
  2. Navigate to a documentation page that contains inline code elements
  3. The inline code should display with the background color specified in your theme
  4. Verify that the styling is applied consistently across different inline code elements
  5. Test in both light and dark mode if your theme defines both

Example theme-settings.json

{
  "theme": {
    "color": {
      "inline-code-background": "var(--color-fill-gray-tertiary)"
    }
  }
}
inline-code

Checklist

Make sure you check off the following items. If they cannot be completed, provide a reason.

  • Added tests
  • Ran npm test, and it succeeded
  • Updated documentation if necessary

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