Как лучше всего указать в Markdown ссылку на фрагмент страницы, например #some_id?

127

Я пытаюсь понять, как ссылаться на другую область страницы с помощью Markdown. Я могу заставить его работать, если добавлю

<div id="mylink" />

а для ссылки сделайте:

[My link](#mylink)

Но я предполагаю, что есть другой способ сделать ссылку на странице в Markdown, который не включает прямой divтег.

Любые идеи?

html markdown Крис
источник
Я всегда делал их так же, как ты.
Joe Martinez
1
<div/>может нарушить работу форматтера для остальной части страницы. Используйте <a id="ident"/>. Смотрите мой ответ.
Стив Пауэлл,
Возможный дубликат перекрестной ссылки (названный якорь) в уценке
Ulysse BN
Вместо этого рассмотрите возможность использования MultiMarkdown. Он предоставляет для этого [anchor][]синтаксис. github.com/fletcher/MultiMarkdown/wiki/…
jwpfox

Ответы:

165

Смотрите этот ответ .

Таким образом, сделайте пункт назначения с

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

вставлен в любом месте вашей разметки (например, в заголовок:

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

и ссылку на него с помощью уценки:

[This is the link text](#headin)

или

[some text](#sometext)

Не используйте <div>- это испортит макет для многих рендереров.

(Я изменил id=на name=выше. См. Этот ответ для утомительного объяснения.)

Стив Пауэлл
источник
7
+1, спасибо. Жаль, что это не происходит автоматически. Очень влажно ИМХО.
Marc-André Lafortune
Это некрасиво , когда вы должны прочитать его в текстовом редакторе, но это делает работу. Не уверен, почему это не принятый ответ.
kayleeFrye_on, декабрь
Определение старых якорей стиля <a name="..." />является устаревшим , но в соответствии с более поздними спецификациями HTML. Если <div>может быть отображен как блокирующий (возможно, если по нераскрытым причинам CSS дает размер), возможно <span>(встроенный элемент) может помочь?
Хавьер
25

Я думаю, это зависит от того, что вы используете для создания HTML из вашей уценки. Я заметил, что jekyll (по умолчанию он используется страницами gihub.io) автоматически добавляет атрибут id = "" к заголовкам в создаваемом html.

Например, если у вас уценка

My header
---------

В результате html будет выглядеть так:

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

Так что вы можете ссылаться на него просто [My link](#my-header)

bodgix
источник
Это лучший и чистый ответ. Markdown действительно крутой. это действительно помогает вести быстрый блог. ^ _ ^
Ashok MA
16

В PHP-версии Markdown вы также можете связывать заголовки с идентификаторами фрагментов на странице, используя синтаксис, подобный любому из следующих, как описано здесь.

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

## Header 2 ##      {#header2}

а потом

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

К сожалению, этот синтаксис в настоящее время поддерживается только для заголовков, но, по крайней мере, он может быть полезен для построения оглавления.

Klokie
источник
3

Якорь назначения для ссылки на странице HTML может быть любым элементом с idатрибутом. См. Ссылки на сайте W3C. Вот цитата из соответствующего раздела:

Якоря назначения в HTML-документах могут быть указаны либо элементом A (присвоив ему имя с атрибутом name), либо любым другим элементом (назвав его атрибутом id).

Markdown обрабатывает HTML как HTML (см. Встроенный HTML ), поэтому вы можете создавать идентификаторы фрагментов из любого элемента, который вам нравится. Если, например, вы хотите создать ссылку на абзац, просто оберните абзац тегом абзаца и включите идентификатор:

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

Затем используйте свой стандартный Markdown, [My link](#mylink)чтобы создать ссылку на привязку фрагмента. Это поможет сохранить ваш HTML в чистоте, поскольку нет необходимости в дополнительной разметке.

Майк
источник
По моему опыту, использование <p>тега в Markdown может удалить CSS из обычного абзаца. Я бы сказал, используйте с осторожностью, я новичок в Markdown, но у него есть некоторые особенности.
2rs2ts 04
@ user691859 Я не совсем понимаю, что вы имеете в виду, говоря, что «использование <p>тега в Markdown может удалить CSS из обычного абзаца». Markdown помещает абзацы в <p>теги и игнорирует те, у которых уже есть <p>теги. Я не понимаю, как это повлияет на CSS ...
Майк
Для меня это странное поведение. В tumblr использование <p> может (не всегда) удалить все поведение, кроме указанного мной. Я не знаю, почему. <div> ВСЕГДА делает то же самое.
2rs2ts 06
3

Любой, кто использует 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(что нарушает это и другие расширения предварительного просмотра в Visual Studio), либо удалять эмодзи:

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

Где последняя версия работает как онлайн в TFS, так и в предварительной версии Visual Studio с уценкой.

Ник
источник