在 Markdown 中，链接到页面片段的最佳方式是啥，即#some_id？

Posted 2023-03-05

【中文标题】在 Markdown 中，链接到页面片段的最佳方式是啥，即#some_id？

【英文标题】：In Markdown, what is the best way to link to a fragment of a page, i.e. #some_id?在 Markdown 中，链接到页面片段的最佳方式是什么，即#some_id？

【发布时间】：2011-03-18 14:23:33

【问题描述】：

我试图弄清楚如何使用 Markdown 引用页面的另一个区域。如果我添加一个

，我可以让它工作

<div id="mylink" /> 

对于链接做：

[My link](#mylink)

但我的猜测是，在 Markdown 中还有其他方法可以在不涉及直接向上的 div 标记中创建页内链接。

有什么想法吗？

【问题讨论】：

我一直按照你在这里所做的方式来完成它们。

<div/> 可以扰乱页面其余部分的格式化程序。使用<a id="ident"/>。看我的回答。

Cross-reference (named anchor) in markdown的可能重复

考虑改用 MultiMarkdown。它提供了[anchor][] 语法来执行此操作。 github.com/fletcher/MultiMarkdown/wiki/…

【参考方案1】：

html 页面中链接的目标锚点可以是任何具有id 属性的元素。请参阅 W3C 网站上的Links。以下是相关部分的引述：

HTML 文档中的目标锚点 可以由 A 指定 元素（用名称命名它 属性），或任何其他元素 （以 id 属性命名）。

Markdown 将 HTML 视为 HTML（请参阅Inline HTML），因此您可以从您喜欢的任何元素创建片段标识符。例如，如果您想链接到一个段落，只需将该段落包装在一个段落标签中，并包含一个 id：

<p id="mylink">Lorem ipsum dolor sit amet...</p>

然后使用您的标准 Markdown [My link](#mylink) 创建片段锚的链接。这将有助于保持您的 HTML 干净，因为不需要额外的标记。

【讨论】：

根据我在 Markdown 中使用 <p> 标签的经验，可以去除常规段落的 CSS。我会说谨慎使用，我是 Markdown 的新手，但它有一些怪癖。

@user691859 我不确定您所说的“在 Markdown 中使用 <p> 标记可以剥离常规段落的 CSS”是什么意思。 Markdown 将段落包装在 <p> 标签中，并忽略那些已经有 <p> 标签的段落。我看不出这会如何影响 CSS...

这种行为对我来说是不稳定的。在 tumblr 上，使用

【参考方案2】：

使用php version of Markdown，您还可以使用如下任一语法将标题链接到页面内的片段标识符，如here所记录的那样

Header 1            #header1
========

## Header 2 ##      #header2

然后

[Link back to header 1](#header1)
[Link back to header 2](#header2)

不幸的是，这种语法目前仅支持标题，但至少它可以用于构建目录。

【参考方案3】：

见this answer。

总之做一个目的地

<a name="sometext"></a>

插入到您的降价标记中的任何位置（例如在标题中：

## heading<a name="headin"></a>

并使用降价链接链接到它：

[This is the link text](#headin)

或

[some text](#sometext)

不要使用<div>——这会弄乱许多渲染器的布局。

（我已将上面的id= 更改为name=。有关繁琐的解释，请参阅this answer。）

【讨论】：

+1，谢谢。很遗憾它不会自动执行此操作。非常潮湿恕我直言。

当您必须在文本编辑器中阅读它时，它很难看，但是，它确实有效。不知道为什么这不是公认的答案。

在以后的 HTML 规范中定义旧式锚点 <a name="..." /> 是 obsolete but conforming。如果<div> 可能被呈现为一个破坏性块（也许如果由于未公开的原因，CSS 给出了一个大小）也许<span>（一个内联元素）可能会起作用？

【参考方案4】：

我想这取决于您使用什么从降价中生成 html。我注意到，jekyll（它被 gihub.io 页面默认使用）自动将 id="" 属性添加到它生成的 html 中的标题中。

例如如果你的降价是

My header
---------

生成的 html 将如下所示：

<h2 id="my-header">My header</h2>

所以你可以简单地通过[My link](#my-header)链接到它

【讨论】：

这是最好的和干净的答案。 Markdown 真的很酷。快速写博客真的很有帮助。 ^_^

我可以确认这也适用于 ruby​​gems.org 上托管的 ruby​​ gem。 .md 文件中标题中的所有文档都将包含这些 id 条目。我需要找出原因，因为我必须记录 ruby​​-gtk 内容，并允许快速跳转到上游类（用 C、GTK 或 GTK+ 编写）。

【参考方案5】：

对于任何使用 Visual Studio Team Foundation Server (TFS) 2015 的人来说，它确实不喜欢嵌入 <a> 或 <div> 元素，至少在标题中是这样。它也不喜欢标题中的表情符号：

### ? Configuration ?

Lorem ipsum problem fixem.

翻译成：

<h3 id="-configuration-">? Configuration ?</h3>
<p>Lorem ipsum problem fixem.</p>

因此链接应该使用 id（这会破坏 this 和 Visual Studio 中的其他预览扩展），或者删除表情符号：

Here's [how to setup](#-configuration-) //? Configuration ?
Here's [how to setup](#configuration) //Configuration

后一个版本在 TFS 中在线工作和在 Visual Studio 的 Markdown 预览中。