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. I'm sorry I missed it!

I generally agree with you, and I even briefly considered that option as I mentioned in my PR:

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

The issue is that the only language affected is Markdown. It's a fundamental "flaw" (depending on how you look at it) in the way the markdown parser was written to include the hashes in the headers when no other language does this. Admittedly, I wasn't too pleased with the workaround I made here; however, as written, it would allow other languages to use level-based icons as well. I considered my options and determined these three PRs are a good middle ground between "extension patch" and "fundamental icon system rewrite to allow level-based headers."

I totally get that there's a higher bar for merging these three, but I think such a change would help with future expansion and fixes for issues like this, with minimal drawbacks and specialized code.

EDIT: Apparently, I misread a bit. I think my points still stand, but I see what you're saying. My only concern is inconsistency. All of the other languages have their icons included in the main codeicons repo. Would it not be appropriate to add them there? Otherwise, one could argue that we'd need to move all of the code icons to their individual language extensions. I understand your point, since this issue only affects Markdown.

I'm not sure how to proceed. I'd say, let me know what path you'd like me to take, and I'll see what I can do.