markdown 如何锚定 link 像 ä ö ü 这样的特殊字符

markdown how to anchor link special characters like ä ö ü

描述

我想 link Markdown 中的一些标题。它运作良好,除非我 link 一个德语单词,如“Systemüberwachung”或“ähnliches”。我认为这不起作用,因为“ü”和“ä”。

我已经尝试过 link 像这样:#system-berwachung#systemberwachung#systemuberwachung 和许多其他人。

但是我如何 link 单词中包含字符 ä ö 和 ü?

我使用 VSCode 1.63.2 和 Markdown 预览

测试代码片段

- [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

.

看起来 Visual Studio 代码采用标题字符串,lower-cases 和 URL-encodes。这是有道理的,因为这些本质上是 URL 个片段。

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

您可以在 JavaScript 中复制它,例如像这样:

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

(这个逻辑可能还有更多内容,例如替换标点符号,但出于这个问题的目的,我认为这是相关部分。)

不幸的是,这些链接似乎实际上不起作用,即使它们链接到正确的元素。我不确定为什么会这样。

背景

由于 Visual Studio 代码是基于 Webview 构建的,我通过命令面板使用“开发人员:打开 Webview 开发人员工具”命令打开其开发工具发现了这一点。

然后我使用了“select 一个元素”功能(也可以通过 Ctrl+Shift+C 当开发工具打开并聚焦时):

点击呈现的标题会在 devtools 面板中显示底层 HTML:

然后显示生成的 ID:

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

我们可以在 devtools 控制台中验证我们使用的是正确的 ID,例如

document.getElementById("system%C3%BCberwachung")