Added inline code background color #992
Open
+26
−5
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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
CodeVoicecomponent) 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-backgroundthat allows documentation authors to customize the background color of inline code elements displayed in content nodes.Key changes:
inline-codeclass toCodeVoicecomponent when rendered in content (viaContentNode.vue)CodeVoice.vuethat applies the new theme variable with padding and border-radius--color-inline-code-background: transparent;CSS variable to both light and dark color schemes in the themetheme-settings.jsonfor local testingNote: The
inline-codeclass is only applied whenCodeVoiceis rendered throughContentNode.vuefor inline content. The component is also used in other contexts (like symbol declarations viaReferenceInternalSymbolandReferenceExternalSymbol) 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
ThemeSettingsJSON schema to document the new--color-inline-code-backgroundtheme variable.Testing
Setup
Create a
theme-settings.jsonfile in thedocsdirectory with custom inline code styling (see example below)Test Steps
npm run serveExample theme-settings.json
{ "theme": { "color": { "inline-code-background": "var(--color-fill-gray-tertiary)" } } }Checklist
Make sure you check off the following items. If they cannot be completed, provide a reason.
npm test, and it succeeded