Add icons for Markdown headers

[FireController1847]

Description

A long-standing issue with Markdown not displaying correctly in the outline view (includes '#' in headers and uses generic "String" symbols for icons). This PR and the associated PRs resolve this issue in its entirety.

I originally designed an extension to do this, but realized the only language with this issue is Markdown. So I figured I'd dip my toes into the codebase and see what I could do. This is my first PR, so I'm obviously expecting to have made some mistakes and to receive feedback on changes. I will try to be prompt as necessary with those changes :)

Requires: microsoft/vscode-markdown-languageservice#228
Requires: microsoft/vscode-codicons#442

Resolves #53992

Changes

• Modified the "vscode-markdown-languageservice" to not include "#" in the symbol output
• Added four new "-symbol" icons representing H1-H6
  • "symbol-header-one"
  • "symbol-header-two"
  • "symbol-header-three"
  • "symbol-header-four"
  • "symbol-header-five"
  • "symbol-header-six"
• Added associated theme variables for customizing the colors of the headers via themes
  • "symbolIcon-headerOneForeground"
  • "symbolIcon-headerTwoForeground"
  • "symbolIcon-headerThreeForeground"
  • "symbolIcon-headerFourForeground"
  • "symbolIcon-headerFiveForeground"
  • "symbolIcon-headerSixForeground"

How to Test

Make sure you have "vscode (my PR)", "vscode-codicons (my PR)", "vscode-markdown-languageservice (my PR)", and "vscode-markdown-languageserver" cloned in the same directory.

1. Codeicons

Run npm run build, npm run export-to-ts, and npm run fonts. Don't close this workspace.

2. Language Service

Run npm run compile then npm run prepublishOnly.

3. Language Server

Modify package.json and change the language service dependency to be local (e.g., "vscode-markdown-languageservice": "file://../vscode-markdown-languageservice",). Reinstall your node dependencies. Then run npm run compile and npm run prepublishOnly.

4. VS Code

Go to extensions/markdown-language-features, modify its package.json and change the language server dependency to be local (e.g., "vscode-markdown-languageserver": "file://../../../vscode-markdown-languageserver/"). Reinstall your node dependencies.

Go back to top level and run npm run watch. Return to the codeicons workspace and run npm run replace-in-vscode.

Examples

[Copilot]

Pull request overview

This PR improves the Outline view’s iconography for Markdown headers by introducing dedicated “header level” icons (H1–H6) and wiring Outline rendering to select them for Markdown documents.

Changes:

• Add Markdown-specific header icon selection logic to the document symbols outline renderer.
• Introduce new theme colors + CSS rules for header-level symbol icon foregrounds.
• Add new codicon glyph registrations for symbol-header-one … symbol-header-six.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/vs/workbench/contrib/codeEditor/browser/outline/documentSymbolsTree.ts	Updates outline element rendering to compute a “leveled” icon id and apply Markdown-specific header icons.
src/vs/workbench/contrib/codeEditor/browser/outline/documentSymbolsOutline.ts	Passes the editor model language id into the outline element renderer.
src/vs/editor/contrib/symbolIcons/browser/symbolIcons.ts	Registers new theme colors for header-level symbol icons.
src/vs/editor/contrib/symbolIcons/browser/symbolIcons.css	Adds CSS color rules for the new codicon-symbol-header-* icons.
src/vs/base/common/codiconsLibrary.ts	Registers new codicons for symbol-header-one through symbol-header-six.

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

[mjbvz]

Thanks for the PR. Instead of having to build these into vscode-codicons (which has a higher bar to merging) I wonder if the markdown extension itself could contribute these icons: https://code.visualstudio.com/api/references/contribution-points#contributes.icons

Then we'd need to also update DocumentSymbol in vscode.d.ts to allow setting a custom themeIcon

That would be much cleaner and avoid having to have markdown specific workarounds in core vscode

[FireController1847]

Thanks for the PR. Instead of having to build these into vscode-codicons (which has a higher bar to merging) I wonder if the markdown extension itself could contribute these icons: https://code.visualstudio.com/api/references/contribution-points#contributes.icons

Then we'd need to also update DocumentSymbol in vscode.d.ts to allow setting a custom themeIcon

That would be much cleaner and avoid having to have markdown specific workarounds in core vscode

Man, GitHub has been terrible with these notifications lately. Sorry I missed this!

I generally agree with what you’re saying, and I actually considered something similar earlier, as I mentioned in the PR:

I originally designed an extension to do this, but realized the only language with this issue is Markdown.

I may have misread part of your suggestion at first, though. I see now that you’re suggesting the Markdown extension could contribute the icons itself, rather than adding them directly to vscode-codicons.

My main concern with that approach is consistency. As far as I understand it, the other language-related icons are included in the main codicons repo. If Markdown’s heading icons live inside the Markdown extension instead, that feels like a slight architectural inconsistency. One could also argue that, by that same logic, other language-specific icons should eventually move into their respective extensions as well.

That said, I do understand why Markdown is a special case here. The only reason this issue exists is that Markdown headings include the leading # characters in the parsed symbol names, while other languages generally do not have this problem. So I agree that avoiding Markdown-specific workarounds in core VS Code would be cleaner.

The approach in these PRs was my attempt at a middle ground: avoid a larger rewrite of the icon/theme system while still allowing level-based symbol icons in a way that could potentially benefit more than just Markdown later. I also realize there is a higher bar for merging changes into vscode-codicons, so I’m open to adjusting the direction.

At this point, I’m not completely sure which path is preferred. If you think contributing the icons from the Markdown extension is the better architectural direction, I’m happy to look into that and update the PR accordingly.