Markdown中的交叉引用（命名锚点）

Question

Markdown中的交叉引用（命名锚点）

702

是否有等价于以下语法的Markdown语法：

Take me to <a href="#pookie">pookie</a>

... 

<a name="pookie">this is pookie</a>

- Synesso

15个回答

147

在 bitbucket.org 上，被投票选为解决方案的方法行不通。相反，当使用标题（使用##）时，可以通过在标题前加上#markdown-header-my-header-name的方式将它们作为锚点引用，其中#markdown-header-是渲染器生成的隐式前缀，其余部分是小写的标题名称，用短横线代替空格。

示例：

## My paragraph title

将会生成一个隐式锚点，如下所示

#markdown-header-my-paragraph-title

每个锚点引用之前的完整URL是可选的，即

[Some text](#markdown-header-my-paragraph-title)

等同于

[Some text](https://bitbucket.org/some_project/some_page#markdown-header-my-paragraph-title)

假设它们在同一页中。

来源：https://bitbucket.org/tutorials/markdowndemo/overview（编辑此.md文件的源代码并查看如何创建锚点）。

- La Muerte Peluda

1

根据此链接：https://confluence.atlassian.com/bitbucket/mark-up-comments-305037452.html，Bitbucket支持目录扩展，可以基于文档标题自动生成链接和锚点。TOC扩展的文档在这里：https://pythonhosted.org/Markdown/extensions/toc.html在文档开头添加文本“[TOC]”以生成目录。 - Binary Phile

13

在Github中，## 我的段落标题将产生以下锚点 user-content-my-paragraph-title，因此您可以使用 [某些文本](#user-content-my-paragraph-title) 引用它。但是，我没有找到官方文档来支持此功能。 - toto_tico

2

这是有用的信息，谢谢。然而，没有扩展功能的Markdown渲染器不会为您生成这些锚点，并且冲突的标题名称将导致冲突的锚点ID（或一些无用的区分技巧，如数字后缀）。显式锚点ID更好，更可控，不受文本更新随机更改的影响（参见上面的技巧），并且对于锚定不仅仅是标题更有用。通常需要使用这两种技术。 - Steve Powell

在 stackedit.io 上，[linky](#header) 是一个足够的锚点，并且发布到 Gist 时也可以正常工作。 - Felipe Alvarez

1

目前 Bitbucket 网站接受的答案是可行的，而这个不行。 - heez

显示剩余3条评论

76

使用name。在HTML 5中使用id是不必要的，它会在JavaScript中创建全局变量

请参阅HTML 5规范，5.9.8 跳转到片段标识符 - id和name都在使用。

重要的是要知道，大多数浏览器仍将ID转换为全局变量。这里有一个快速测试。使用name避免创建全局变量和由此可能导致的任何冲突。

使用名称的示例：

Take me to [pookie](#pookie)

并且目标锚点为：

### <a name="pookie"></a>Some heading

- mikemaccana

6

贬值。全局变量参数是弱的，因为在JS中你不应该（直接）定义全局变量，所以不会发生冲突。此外，“name”和“id”的语义是不同的。 - Marnen Laibow-Koser

12

没有人在讨论如何在JS中定义全局变量。在HTML中创建一个ID会在大多数浏览器中创建一个全局的window.someid。 - mikemaccana

19

许多库（即不是您自己的JS，而是别人的）使用一个全局变量 - 例如fineuploader。如果您创建一个ID为fineuploader的元素，则无法使用fineuploader模块。避免创建不必要的全局变量有助于避免这些冲突。 - mikemaccana

6

我有兴趣进行一些测试，以确定哪个优先级更高。我理解这是一个理论问题，但在多年的客户端开发中，只要HTML有效，我从未遇到过ID破坏任何客户端JS的情况。在遇到实际问题之前，我会继续使用它们，只要它们在语义上是合适的。 - Marnen Laibow-Koser

3

“将此<script>插入”通常不会污染全局命名空间。但是，测试流行的库表明它们会-请参见window.Stripe``window.olark和window.twttr。了解更多信息，请访问http://www.2ality.com/2012/08/ids-are-global.html。 - mikemaccana

显示剩余12条评论

29

Markdown Anchor支持使用hash标记，因此页面中的锚点链接可以简单地用[Pookie](#pookie)表示。

在Gruber Markdown中实际上不支持生成锚点，但在其他实现中（例如Markdown Extra），是支持的。

在Markdown Extra中，锚点ID会附加到标题或子标题后面，格式为{#pookie}。

Github Flavored Markdown在Git仓库页面（但不包括Gists）上自动为所有标题（h1、h2、h3等）生成锚点，包括以下若干个标记：

id="user-content-HEADERTEXT"
class="anchor"
href="#HEADERTEXT"
aria-hidden="true"（这是一个SVG链接图标，在悬停时显示）

除了aria/svg图标之外，当输入以下内容时：

# Header Title

Github将生成：

<h1><a id="user-content-header-title" class="anchor" href="#header-title">Header Title</a></h1>

因此，您无需执行任何操作即可创建标题链接，并且始终可以使用[Header Title](#header-title)来链接它们。

- jeffmcneill

2

这是适合我的方法。[标题](#标题) - Max Cascone

这也适用于Azure DevOps。另外，### Header Title 标题可以使用大写字母，但 (#header-title) 的 markdown 必须全部小写。还有一个逗号被编码为 %2C，我在 markdown 中使用了这样的格式 (#header-title%2C-etc)。 - HappyGoLucky

这也适用于Azure Devops。另外，### Header Title标题可以使用大写字母，但(#header-title)的markdown全部是小写字母。还有一个逗号被编码为%2C，我在markdown中使用它，就像这样(#header-title%2C-etc)。 - undefined

26

对于任何在GitBook中寻求解决此问题的人。这是我如何使其工作（在GitBook中）。您需要明确标记您的标题，例如：

# My Anchored Heading {#my-anchor}

那么像这样链接到此锚点

[link to my anchored heading](#my-anchor)

解决方案和其他示例可以在这里找到：https://seadude.gitbooks.io/learn-gitbook/

- keyoxy

运行得很好，但我刚发现锚点应该只使用小写字母，否则它将无法工作。 - j_elfering

17

在原始的Markdown语法中，没有现成的语法可以实现这一点，但是Markdown Extra提供了一种至少可以将ID分配给标题的方法，然后您可以轻松地链接到它们。请注意，您可以在Markdown和Markdown Extra中使用常规HTML，并且在更高版本的HTML中，name属性已被id属性取代。

- You

12

晚来了，但我认为这个补充对于使用的人可能会有用。在中，内置了对文档标题引用的支持。

任何由

# Header

可以通过引用

get me back to that [header](#header)

以下是一个最小化的独立的.rmd文件，展示了这种行为。它可以被编织成.pdf和.html。

---
title: "references in rmarkdown"
output:
  html_document: default
  pdf_document: default
---

# Header

Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. 

Go back to that [header](#header).

- symbolrush

9

从答案中我们可以看出，这方面没有标准的方式，不同的Markdown处理器在提供此类可能性的Markdown扩展方面也会有所不同。

使用Pandoc，您可以像这样获取您所要求的内容：

Take me to [pookie](#pookie)

...

[this is pookie]{#pookie}

这是使用 pandoc-2.9.2.1 得到的结果：

<p>Take me to <a href="#pookie">pookie</a></p>
<p>…</p>
<p><span id="pookie">this is pookie</span></p>

你也可以用一个带有锚点id的空span：

Take me to [pookie](#pookie)

...

this is pookie []{#pookie}

这将产生：

<p>Take me to <a href="#pookie">pookie</a></p>
<p>…</p>
<p>this is pookie <span id="pookie"></span></p>

除此之外，对于 pandoc 和大多数常见的 markdown 生成器，每个标题都有一个简单的自动生成锚点。（在这里查看其他答案以获取方便的方法来（自动）生成和引用这样的锚点。）

- imz -- Ivan Zakharyaschev

7

对于大多数常见的Markdown生成器，在每个标题中都有一个简单的自动生成的锚点。例如，使用pandoc，生成的锚点将是您的标题的kebab case slug。

 echo "# Hello, world\!" | pandoc
 # => <h1 id="hello-world">Hello, world!</h1>

根据使用的markdown解析器不同，锚点可能会有所变化（例如，symbolrush和La muerte Peluda的回答是不同的！）。请参阅此babelmark，您可以查看根据您的Markdown实现生成的锚点。

- Ulysse BN

@imz -- Ivan Zakharyaschev，我已经撤销了您的编辑。它的写作方式与我的理解点不同。这个答案的目标主要是链接到babelmark，并提示有很多解决方案和答案不应该专注于特定的实现...也许评论您的观点是一个好主意 :) - Ulysse BN

1

没问题，也许我会单独写下来。 - imz -- Ivan Zakharyaschev

7

使用最新的Markdown，您应该能够使用以下语法：

[](){:name='anchorName'}

这应该会创建以下HTML：

<a name="anchorName"></a>

如果您想要锚点带有文本，只需在方括号内添加锚点文本：

[一些文本](){:name='anchorName'}

- Ryan McGuinness

4

似乎只有 Maruku 知道这种语法。请查看 babelmark。 - Ulysse BN

1

在 VS Code 无法工作。 - Eric Hepperle - CodeSlayer2010

3

不存在所谓的“最新的Markdown”。它有各种实现/方言。 - oligofren

受到这个和https://michelf.ca/projects/php-markdown/extra/#spe-attr的启发，我在VSCode中通过在我想要创建锚点的行的行尾添加{#anchor_name}，然后用[链接名称](#anchor_name)来引用它，使其正常工作。请注意，我安装了Markdown扩展等其他扩展。 - undefined

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Steve Powell · Accepted Answer

Take me to [pookie](#pookie)

应该使用正确的Markdown语法来跳转到名为pookie的锚点。

要插入这个名称的锚点，请使用HTML：

<a name="pookie"></a>

Markdown似乎并不在意您放置锚点的位置。放置锚点的一个有用位置是标题中，例如：

### <a name="tith"></a>This is the Heading

非常好用。（我将在此展示，但SO的渲染器会去掉锚点。）

关于自闭合标签和`id=`与`name=`的注意事项

此前版本的发布建议使用<a id='tith' />，使用XHTML的自闭合语法，并使用id属性而不是name。

XHTML允许任何标签为空和自闭合。也就是说，<tag />是<tag></tag>的简写形式，一个空主体匹配对的标签。大多数浏览器将接受XHTML，但有些不支持。为避免跨浏览器问题，请明确地使用<tag></tag>关闭标签，如上所建议。

最后，XHTML中的name=属性已被弃用，因此我最初使用了id=，这是每个人都熟知的。然而，HTML5在使用id=时会创建JavaScript中的全局变量，这可能不是您想要的。因此，现在使用name=可能更友好。

（感谢Slipp Douglas向我解释XHTML，nailer指出了HTML5的副作用——请参见评论和nailer的答案以获取更多详细信息。name=似乎在任何地方都可用，尽管已被弃用在XHTML中）。

Markdown中的交叉引用（命名锚点）

关于自闭合标签和id=与name=的注意事项

关于自闭合标签和`id=`与`name=`的注意事项