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