description

I want to link some titles in Markdown. It works good except when I link a German word like "Systemüberwachung" or "ähnliches". I think this is not working because of the "ü" and "ä".

I already tried to link like this: #system-berwachung, #systemberwachung, #systemuberwachung and many others.

But how can I link word with the characters ä ö and ü?

I use VSCode 1.63.2 and Markdown Preview

test code snippet

- [Systemüberwachung](#systemüberwachung)
- [something](#something)
- [ähnliches](#ähnliches)

## Systemüberwachung

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet

## something

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet

## ähnliches

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet

.

CodePudding user response：

It looks like Visual Studio Code takes the title string, lower-cases it, and URL-encodes it. That makes sense, as these are essentially URL fragments.

You can reproduce this in JavaScript, e.g. like so:

encodeURIComponent("Systemüberwachung".toLowerCase())
//=> "systemüberwachung"

(There's probably more to this logic, e.g. to replace punctuation, but for the purposes of this question I think this is the relevant part.)

Unfortunately, these links don't seem to actually work, even though they are linking to the correct elements. I'm not sure why that is.

Background

Since Visual Studio Code is built on Webview, I discovered this by opening up its dev tools with the "Developer: Open Webview Developer Tools" command via the command palette.

Then I used the "select an element" feature (also available via Ctrl Shift C when the dev tools are open and focused):

Clicking on the rendered title brings up the underlying HTML in the devtools panel:

Which then reveals the generated ID:

<h1 data-line="0"  id="systemüberwachung">Systemüberwachung</h1>

We can verify that we are using the correct ID in the devtools console, e.g.

document.getElementById("systemüberwachung")