Skip to content

Fix Markdown rendering for sidebar sections with href#14521

Open
cliffckerr wants to merge 1 commit into
quarto-dev:mainfrom
starsimhub:fix/issue14520-section-sidebar-formatting
Open

Fix Markdown rendering for sidebar sections with href#14521
cliffckerr wants to merge 1 commit into
quarto-dev:mainfrom
starsimhub:fix/issue14520-section-sidebar-formatting

Conversation

@cliffckerr
Copy link
Copy Markdown

@cliffckerr cliffckerr commented May 17, 2026

Summary

Markdown in sidebar section titles (e.g. **More info**) render correctly when the section has no href, but is left as raw Markdown when the section has an href. HTML in the same title (e.g. <b>More info</b>) renders bold in both cases. This PR fixes the Markdown case.

Closes #14520.

Cause

Sidebar item text is emitted by sidebaritem.ejs via lodash <%= item.text %>, which is unescaped interpolation — so any raw HTML in the title passes through to the browser as-is. Markdown, however, requires a separate post-render pass to be converted to HTML. That pass lives in sidebarContentsHandler in src/project/types/website/website-navigation-md.ts:

  1. getUnrendered() collects each section's text and hands it to pandoc, keyed by sectionId.
  2. processRendered() walks the rendered DOM, identifies each section by reading data-bs-target off .sidebar-item-text, and swaps the pandoc-rendered HTML back in.

The two branches of sidebaritem.ejs produce different markup for the .sidebar-item-text element:

  • No href: <a ... data-bs-toggle="collapse" data-bs-target="#<sectionId>"> — has data-bs-target.
  • With href: <a href="..." class="sidebar-item-text sidebar-link"> — no data-bs-target.

So when a section has an href, processRendered can't recover the sectionId, falls through silently, and the raw markdown (**More info**) is left in the DOM.

Fix

The sibling .sidebar-item-toggle element (the chevron button) always carries data-bs-target="#<sectionId>", regardless of whether the section has an href. When .sidebar-item-text lacks the attribute, fall back to the sibling toggle.

Test plan

  • Build a website with a sidebar section that uses both href: and a markdown-formatted section name, e.g.:

    - section: "**More info**"
      href: more-info.qmd
      contents:
        - href: about.qmd
        - href: contact.qmd
  • Verify the rendered sidebar shows More info in bold (not literal **More info**).

  • Verify sections without href still render markdown correctly (regression check).

  • Verify sections with href but plain-text titles still work.

  • Verify HTML in section titles (<b>...</b>) continues to render in both href and no-href cases.

I confirmed locally that this PR fixes the bug, but no tests were added.

(NB: PR written with the help of Claude)

When a sidebar section has an href, the `.sidebar-item-text` element is a
plain link without `data-bs-target`, so the post-render markdown
substitution in `sidebarContentsHandler` couldn't recover the `sectionId`
and left raw markdown (e.g. `**More info**`) in the DOM. Fall back to the
sibling `.sidebar-item-toggle` element, which always carries
`data-bs-target` regardless of whether the section has an href.
@posit-snyk-bot
Copy link
Copy Markdown
Collaborator

posit-snyk-bot commented May 17, 2026

Snyk checks have passed. No issues have been found so far.

Status Scan Engine Critical High Medium Low Total (0)
Open Source Security 0 0 0 0 0 issues
Licenses 0 0 0 0 0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

@cliffckerr cliffckerr changed the title Fix markdown rendering in sidebar section titles with href Fix Markdown rendering for sidebar sections with href May 17, 2026
@mcanouil
Copy link
Copy Markdown
Collaborator

Thanks.
Some tests to ensure the behaviour and avoid future regression is needed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Adding href to a sidebar section breaks Markdown formatting

3 participants