feat(theme): render labels as inline markdown - #5390
Open
dev-itsheng wants to merge 1 commit into
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Description
Default theme label fields such as sidebar and nav item
textare currently rendered withv-html. This is intentional and useful because it lets users write labels such as<code>foo</code>, but it also makes common technical labels easy to get wrong.For example, a sidebar label like this looks like plain text in config:
text: 'Vue <script setup>'However, it is rendered into the SSR HTML as raw HTML:
The browser parses
<script setup>as a real script tag before the client runtime can hydrate the page. This can break the rest of the HTML and the injected site data script, causing follow-up errors such asCannot read properties of undefined (reading 'locales')orCannot read properties of undefined (reading 'cleanUrls').This PR keeps the existing raw HTML capability and adds inline Markdown rendering for default theme label fields on the Node side, before the theme receives site data.
With this change, users can write technical labels in the natural Markdown form:
text: 'Vue `<script setup>`'and VitePress resolves it to safe HTML:
The new resolver currently covers the default theme fields that are rendered as labels:
themeConfig.nav[*].text, including nested nav itemsthemeConfig.sidebar[*].text, including multi-sidebar configs and nested sidebar itemsthemeConfig.sidebar[*].docFooterTextthemeConfig.docFooter.prevthemeConfig.docFooter.nextthemeConfigadditionalConfig[*].themeConfigand functionaladditionalConfigThe transformation is done in
resolveSiteData, so SSR, dev, and client navigation share the same resolved site data. This also avoids bringing Markdown rendering into the client bundle or changing multiple default theme Vue components.Existing HTML labels continue to work. For example:
text: '<code>foo</code>'still resolves to:
This PR does not escape raw HTML. A label like
Vue <script setup>is still treated as raw HTML by design. When users want to display literal angle brackets, they should wrap the syntax in inline code:text: 'Vue `<script setup>`'or write explicit HTML entities:
text: 'Vue <script setup>'The main behavior change is that Markdown inline syntax in these labels is now rendered. For example,
**Guide**becomes<strong>Guide</strong>. Since these fields already support raw HTML and VitePress 2 is currently in alpha, this seems like a reasonable time to complete the Markdown part of the original request.Tests added for:
docFooterText, anddocFooterthemeConfigadditionalConfiginnerHTMLLocally verified with:
Linked Issues
Related to #1486.
Builds on #1489.
Additional Context
#1486 requested two related capabilities for sidebar item labels:
SidebarItem.textSidebarItem.text#1489 closed that issue by switching sidebar group headings and sidebar item text from Vue text interpolation to
v-html, which made raw HTML labels work. That behavior is still useful and this PR intentionally keeps it.The remaining gap is the Markdown part of the original request. Today, a user can write:
text: '<code>foo</code>'but cannot write the more natural Markdown equivalent:
text: '`foo`'This PR completes that missing piece while preserving the HTML support introduced by #1489.
This also avoids changing the public
textfield name. A rename would be a larger API migration and would not fully solve the ambiguity by itself. The smaller compatibility-preserving change is to keeptext, keep HTML support, and render inline Markdown before the default theme consumes the label strings.Tip
The author can publish a preview release by commenting
/publishafter creating the PR.