Markdown中的交叉引用(命名锚)


Answers:


689
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>,请按照上述建议使用明确关闭标签。

最后,该属性name=在XHTML中已弃用,因此我最初使用id=,每个人都可以识别。但是,HTML5现在在使用时会在JavaScript中创建一个全局变量id=,而这不一定是您想要的。因此,使用name=现在可能会更友好。

(感谢Slipp Douglas向我解释了XHTML,以及nailer指出了HTML5的副作用- 有关更多详细信息,请参见注释和nailer答案name=尽管XHTML中已弃用了该方法,但它似乎无处不在。)


1
在StackOverflow渲染HTML之后,您看不到如何链接到标题演示,因为渲染的HTML去除了<a>标签。也就是说,您不能使用StackOverflow Markdown。
Slipp D. Thompson

2
但是,这将在其他更自由的Markdown渲染器中起作用,但是您需要一个结束<a>标记;在<A>标签不允许自闭。另外,我发现我的浏览器会跳过标题,除非<a>标记位于标题的内容之前。对您的示例所做的更正。
Slipp D. Thompson

2
牛仔,站在那里。仅仅因为<a>没有href的样式没有任何样式,并不意味着它就自动关闭。除非我完全发疯,否则这两个:test-xhtml11和[ sln.6bitt.com/public/test-html5.html](test-html5)会在<a>标记内呈现页面的其余部分。继续并与您选择的网络检查器一起检查。
普·汤普森

4
@Slipp:好的,我想我明白了。您编码了<a id="hi"/> rest of doc,但是被当作<a id="hi"> rest of doc</a>。(页面的元素分析也显示了这一点。)我的错误:我查看的是显示的元素,而不是原始数据。根据这种观察,您认为答案应该修改吗?
史蒂夫·鲍威尔

3
name属性还会创建全局变量(请参见stackoverflow.com/questions/3434278/…),因此您也可以id按预期使用该属性作为片段标识符URL的目标。
鲍比·杰克

92

在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文件的来源,并查看锚的制作方式)。


1
这也可以。根据此内容:confluence.atlassian.com/bitbucket/…,bitbucket支持目录扩展,该扩展可以基于文档标题自动生成链接锚点。此处记录了TOC扩展名:pythonhosted.org/Markdown/extensions/toc.html 将文本[[TOC]]添加到文档的开头以生成它。
Binary Phile

8
在Github中,## My paragraph title将产生以下锚点user-content-my-paragraph-title,因此您可以使用[Some text](#user-content-my-paragraph-title)进行引用。但是,我还没有找到官方文档。
toto_tico 2016年

这也帮助我在Bitbucket上工作-像魅力一样。
Scott Byers

1
这是有用的信息;谢谢。但是,没有扩展名的markdown渲染器将不会为您生成这些锚,并且标题名称冲突将导致锚id冲突(或一些无用的区分技巧,例如数字就足够了)。明确的锚点ID更好,更可控,不会因文本更新而发生随机更改(请参见上面的技巧),并且对锚点(不仅仅是标头)有用。通常都需要两种技术。
史蒂夫·鲍威尔,

stackit.io上 [linky](#header)已经足够了,并且在发布给Gist时也起作用。
费利佩·阿尔瓦雷斯

66

使用nameid在HTML 5中不必使用,而是会在JavaScript中创建全局变量

请参阅HTML 5规范5.9.8导航至片段标识符 - idname都使用。

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

使用名称的示例:

Take me to [pookie](#pookie)

和目标锚点:

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

5
投票失败。全局变量参数很弱,因为您无论如何都不应该(直接)在JS中定义全局变量,因此不会发生冲突。而且,语义nameid是不同的。
Marnen Laibow-Koser 2014年

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

14
@ MarnenLaibow-Koser许多库(即不是您自己的JS,而是其他人的库)都使用单个全局变量,例如fineuploader。如果创建ID为的元素fineuploader,则将无法使用该fineuploader模块。避免创建不必要的全局变量有助于避免这些冲突。
mikemaccana 2014年

5
我很想对这种情况进行一些测试,以找出哪个优先。我很欣赏理论上的问题,但是在多年的客户端开发中,我从来没有遇到过破坏任何客户端JS的ID(只要HTML否则有效)的情况。当它们在语义上合适时,我将继续使用它们,直到遇到实际问题为止。
Marnen Laibow-Koser'3

2
@ MarnenLaibow-Koser我(和许多其他人)的HTML ID破坏了真实的JavaScript-您要回复的评论中有一个非常实用的示例!有很多样式指南和公司总是使用类,即使是单例也是如此,这就是原因。
mikemaccana

17

Markdown Anchor支持井号,因此指向页面中锚点的链接就是[Pookie](#pookie)

Gruber Markdown实际上并不支持生成锚,但其他实现(例如Markdown Extra)则支持生成锚。

在Markdown Extra中,锚ID通过附加到标头或子标头{#pookie}

Git储存库页面中的Github Flavored Markdown(而不是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)

16

最初的Markdown语法中没有现成的语法可以执行此操作,但是Markdown Extra提供了一种至少将ID分配给标头的方法,然后可以轻松地链接到标头。还要注意,您可以在Markdown和Markdown Extra中都使用常规HTML,并且该name属性已被id最新版本的HTML 中的属性所取代。


8

对于正在GitBook中寻求此问题解决方案的任何人。这就是我使其工作的方式(在GitBook中)。您需要显式标记标头,如下所示:

# My Anchored Heading {#my-anchor}

然后像这样链接到该锚点

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

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


谢谢!这可行!这应该被赞成!
德克斯特

7

晚会晚了,但我认为此添加可能对与之合作的人有用rmarkdown。在rmarkdown有内置在你的文档中引用头支持。

由...定义的任何标头

# 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).


3

适用于大多数常见的降价生成器。您在每个标头中都有一个简单的自行生成的锚。例如,使用pandoc时,生成的锚点将是标题的烤肉串。

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

根据您使用的降价解析器,锚点可以更改(以symbolrush和La muerte Peluda的答案为例,它们是不同的!)。请参阅此babelmark,在此可以根据markdown的实现查看生成的锚。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.