Summary
Allow sidebar titles to render segments with <code> styling, so titles like foobar(),
Foobar class, or mixed text like "The Config object" display with monospace/code formatting
in the sidebar.
Current state
Sidebar titles flow through the system as plain strings at every stage:
TitleConfig resolves to a string via resolveSectionTitle() / deriveText()
(packages/core/src/sync/resolve/text.ts:22–58)
- Stored as
ResolvedEntry.title: string (packages/core/src/sync/types.ts:116)
- Written to
_meta.json as MetaItem.label: string
(packages/core/src/sync/sidebar/meta.ts:34,44,52)
- Rspress renders
item.text as plain DOM text with no rich-text processing
There is no way to mark a title or title segment as code-styled.
Proposed scope
Add a mechanism to embed inline code spans in sidebar titles. Two possible approaches:
Option A: Markdown-style backticks in title strings
Titles like "`foobar()` function" are parsed at render time into
<code>foobar()</code> function. Requires a custom sidebar label renderer in the UI layer.
Option B: Structured title format
Extend TitleConfig to accept an array of segments:
title: [{ text: 'The ' }, { text: 'Config', code: true }, { text: ' object' }]
Affected areas
| Area |
File |
Change |
| Title type |
packages/config/src/types.ts:125–143 |
Extend TitleConfig to support code segments |
| Schema |
packages/config/src/schema.ts |
Validate new title format |
| Meta output |
packages/core/src/sync/sidebar/meta.ts:486–515 |
Pass code metadata through _meta.json or theme config |
| Sidebar render |
packages/ui/src/theme/components/sidebar/ |
Custom label renderer for code-styled segments |
| Sidebar links |
packages/ui/src/theme/components/sidebar/sidebar-links.tsx:90 |
Parse/render code in zp-sidebar-link-text spans |
Open questions
- Backtick parsing (simpler DX) vs structured segments (more explicit)?
- Should this apply to nav bar titles as well, or sidebar only?
- How to handle Rspress's built-in
<SidebarList> — override the label renderer or inject
pre-rendered HTML?
Summary
Allow sidebar titles to render segments with
<code>styling, so titles likefoobar(),Foobarclass, or mixed text like "TheConfigobject" display with monospace/code formattingin the sidebar.
Current state
Sidebar titles flow through the system as plain strings at every stage:
TitleConfigresolves to a string viaresolveSectionTitle()/deriveText()(
packages/core/src/sync/resolve/text.ts:22–58)ResolvedEntry.title: string(packages/core/src/sync/types.ts:116)_meta.jsonasMetaItem.label: string(
packages/core/src/sync/sidebar/meta.ts:34,44,52)item.textas plain DOM text with no rich-text processingThere is no way to mark a title or title segment as code-styled.
Proposed scope
Add a mechanism to embed inline code spans in sidebar titles. Two possible approaches:
Option A: Markdown-style backticks in title strings
Titles like
"`foobar()` function"are parsed at render time into<code>foobar()</code> function. Requires a custom sidebar label renderer in the UI layer.Option B: Structured title format
Extend
TitleConfigto accept an array of segments:Affected areas
packages/config/src/types.ts:125–143TitleConfigto support code segmentspackages/config/src/schema.tspackages/core/src/sync/sidebar/meta.ts:486–515_meta.jsonor theme configpackages/ui/src/theme/components/sidebar/packages/ui/src/theme/components/sidebar/sidebar-links.tsx:90zp-sidebar-link-textspansOpen questions
<SidebarList>— override the label renderer or injectpre-rendered HTML?