Skip to content

feat: support inline code styling in sidebar titles #95

@zrosenbauer

Description

@zrosenbauer

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:

  1. TitleConfig resolves to a string via resolveSectionTitle() / deriveText()
    (packages/core/src/sync/resolve/text.ts:22–58)
  2. Stored as ResolvedEntry.title: string (packages/core/src/sync/types.ts:116)
  3. Written to _meta.json as MetaItem.label: string
    (packages/core/src/sync/sidebar/meta.ts:34,44,52)
  4. 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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or improvement

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions