在 Markdown 中,链接到页面片段(即#some_id)的最佳方式是什么?

发布于 2024-09-11 00:30:12 字数 260 浏览 4 评论 0原文

我试图弄清楚如何使用 Markdown 引用页面的另一个区域。 添加一个 and ,我就可以让它工作

<div id="mylink" /> 

如果我为链接

[My link](#mylink)

:但我的猜测是,还有其他一些方法可以在 Markdown 中创建页内链接,而不涉及直接的 div 标签。

有什么想法吗?

I'm trying to figure out how to reference another area of a page with Markdown. I can get it working if I add a

<div id="mylink" /> 

and for the link do:

[My link](#mylink)

But my guess is that there's some other way to do an in-page link in Markdown that doesn't involve the straight up div tag.

Any ideas?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(6

失与倦" 2024-09-18 00:30:12

请参阅此答案

总之,

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

在 Markdown 标记中的任何位置插入一个目标(例如在标题中:

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

并使用 Markdown 链接链接到它:

[This is the link text](#headin)

[some text](#sometext)

不要使用

——这会搞砸许多渲染器的布局

(我已将上面的 id= 更改为 name=。请参阅

See this answer.

In summary make a destination with

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

inserted anywhere in your markdown markup (for example in a header:

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

and link to it using the markdown linkage:

[This is the link text](#headin)

or

[some text](#sometext)

Don't use <div> -- this will mess up the layout for many renderers.

(I have changed id= to name= above. See this answer for the tedious explanation.)

笑脸一如从前 2024-09-18 00:30:12

我想这取决于你用来从 markdown 生成 html 的内容。我注意到,jekyll(默认情况下由 gihub.io 页面使用)会自动将 id="" 属性添加到它生成的 html 中的标题中。

例如,如果你的 markdown 是

My header
---------

生成的 html 将如下所示:

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

因此你可以通过 [My link](#my-header) 链接到它

I guess this depends on what you're using to generate html from your markdown. I noticed, that jekyll (it's used by gihub.io pages by default) automatically adds the id="" attribute to headings in the html it generates.

For example if you're markdown is

My header
---------

The resulting html will look like this:

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

So you can link to it simply by [My link](#my-header)

弄潮 2024-09-18 00:30:12

通过 PHP 版本的 Markdown,您还可以使用类似于以下任一语法,如此处所述

Header 1            {#header1}
========

## Header 2 ##      {#header2}

,然后

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

不幸的是这个目前仅支持标题语法,但至少它对于构建目录很有用。

With the PHP version of Markdown, you can also link headers to fragment identifiers within the page using a syntax like either of the following, as documented here

Header 1            {#header1}
========

## Header 2 ##      {#header2}

and then

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

Unfortunately this syntax is currently only supported for headers, but at least it could be useful for building a table of contents.

╰ゝ天使的微笑 2024-09-18 00:30:12

HTML 页面中链接的目标锚点可以是具有 id 属性的任何元素。请参阅 W3C 网站上的链接。这是相关部分的引用:

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

Markdown 将 HTML 视为 HTML(请参阅 内联 HTML),因此您可以创建片段标识符来自任何你喜欢的元素。例如,如果您想链接到一个段落,只需将该段落包装在段落标记中,并包含一个 id:

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

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

The destination anchor for a link in an HTML page may be any element with an id attribute. See Links on the W3C site. Here's a quote from the relevant section:

Destination anchors in HTML documents
may be specified either by the A
element (naming it with the name
attribute), or by any other element
(naming with the id attribute).

Markdown treats HTML as HTML (see Inline HTML), so you can create your fragment identifiers from any element you like. If, for example, you want to link to a paragraph, just wrap the paragraph in a paragraph tag, and include an id:

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

Then use your standard Markdown [My link](#mylink) to create a link to fragment anchor. This will help to keep your HTML clean, as there's no need for extra markup.

〆一缕阳光ご 2024-09-18 00:30:12

对于任何使用 Visual Studio Team Foundation Server (TFS) 2015 的人来说,它确实不喜欢嵌入

元素,至少在标头中是如此。它也不喜欢标题中的表情符号:

### 

For anyone use Visual Studio Team Foundation Server (TFS) 2015, it really does not like embedded <a> or <div> elements, at least in headers. It also doesn't like emoji in headers either:

### ???? Configuration ????

Lorem ipsum problem fixem.

Gets translated to:

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

And so links should either use that id (which breaks this and other preview extensions in Visual Studio), or remove the emoji:

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

Where the latter version works both online in TFS and in the markdown preview of Visual Studio.

一场春暖 2024-09-18 00:30:12

在 Pandoc Markdown 中,您可以使用语法 [span]{#a​​nchor} 在段落内的任意跨度上设置锚点,例如:

Paragraph, containing [arbitrary text]{#mylink}.

然后照常引用它:[My link](#mylink)

如果您想引用整个段落,那么最直接的方法是在段落开头添加一个跨度:

[]{#mylink}
Paragraph text.

In Pandoc Markdown you can set anchors on arbitrary spans inside a paragraph using syntax [span]{#anchor}, e.g.:

Paragraph, containing [arbitrary text]{#mylink}.

And then reference it as usual: [My link](#mylink).

If you want to reference a whole paragraph then the most straightforward way is to add an empty span right in the beginning of the paragraph:

[]{#mylink}
Paragraph text.
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文