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

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions