1

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

.
ChrisGPT was on strike
  • 127,765
  • 105
  • 273
  • 257
chraebsli
  • 184
  • 12
  • 1
    I feel like any problem you are having is specific to your Markdown renderer, but as the primary purpose of Markdown is to produce HTML, you might try using explicit HTML entities. – chepner Jan 26 '22 at 13:19
  • Plain Markdown doesn't generate header anchors at all. We'd need to know what tool you're using for rendering. But whatever it is, I suggest you mouse over one of the generated links to see what it's doing. Then you can link to that. – ChrisGPT was on strike Jan 26 '22 at 13:39
  • @Chris I use VSCode v1.63.2 and VSCodes inbuilt Markdown Preview – chraebsli Jan 26 '22 at 13:52

2 Answers2

1

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.

Heading Link fragment
Systemüberwachung system%C3%BCberwachung
ähnliches %C3%A4hnliches

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

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

(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):

Screenshot of "select an element" in devtools

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

Screenshot of hovering on the rendered title

Which then reveals the generated ID:

<h1 data-line="0" class="code-line" id="system%C3%BCberwachung">Systemüberwachung</h1>

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

document.getElementById("system%C3%BCberwachung")
ChrisGPT was on strike
  • 127,765
  • 105
  • 273
  • 257
0
# German umlaut characters

## Table of Content

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

<div id="systemuberwachung">
<h2>Systemüberwachung</h2>
</div>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, ...

## something

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, ...

<div id="ahnliches">
<h2>ähnliches<h2>
</div>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, ...

.
Pekka Ylönen
  • 1
  • 1
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 18 '22 at 01:10