У Markdown, який найкращий спосіб зв’язати фрагмент сторінки, тобто #some_id?


127

Я намагаюся з'ясувати, як посилатися на іншу область сторінки з Markdown. Я можу змусити його працювати, якщо додам

<div id="mylink" /> 

а для посилання робіть:

[My link](#mylink)

Але я здогадуюсь, що існує інший спосіб зробити внутрішнє посилання в Markdown, яке не передбачає прямого divтегу.

Будь-які ідеї?


Я завжди робив їх так, як ти робив тут.
Джо Мартінес

1
<div/>може порушити формат для іншої сторінки. Використовуйте <a id="ident"/>. Дивіться мою відповідь.
Стів Пауелл


Поміркуйте замість цього використовувати 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, спасибі Сумно, що це не робиться автоматично. Дуже мокрий ІМХО.
Марк-Андре Лафортун

Це негарно , коли ви повинні прочитати його в текстовому редакторі, але це робить роботу. Не впевнений, чому це не прийнята відповідь.
kayleeFrye_onDeck

Визначення якорів старого стилю <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)


Це найкраща і чітка відповідь. Відмітка справді класна. це дійсно допомагає робити швидкий ведення блогів. ^ _ ^
Ашок М. А.

16

За допомогою версії PHP Markdown ви також можете зв’язати заголовки до ідентифікаторів фрагментів на сторінці, використовуючи синтаксис, як будь-який із наведених нижче, як це задокументовано тут

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

## Header 2 ##      {#header2}

і потім

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

На жаль, цей синтаксис наразі підтримується лише для заголовків, але, принаймні, він може бути корисним для створення змісту.


3

Прив’язкою до посилання на HTML-сторінці може бути будь-який елемент з idатрибутом. Дивіться посилання на сайті W3C. Ось цитата з відповідного розділу:

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

Розмітка розглядає HTML як HTML (див. Вбудований HTML ), тому ви можете створювати свої ідентифікатори фрагментів з будь-якого елемента, який вам подобається. Якщо, наприклад, ви хочете зв’язатись з абзацом, просто загортайте абзац у тег абзацу та додайте ідентифікатор:

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

Потім використовуйте стандартний Markdown, [My link](#mylink)щоб створити посилання на якір фрагмента. Це допоможе зберегти чистий HTML, оскільки немає необхідності в додатковій розмітці.


З мого досвіду використання <p>тегу в Markdown може позбавити CSS звичайного абзацу. Я б сказав, використовуйте з обережністю, я новачок у Markdown, але він має деякі химерності.
2rs2ts

@ user691859 Я не впевнений, що ви маєте на увазі під " <p>тегом у Markdown можна зняти CSS звичайного абзацу". Розмітка загортає абзаци в <p>теги та ігнорує ті, у яких уже є <p>теги. Я не бачу, як це вплине на CSS ...
Майк

Поведінка для мене хаотична. У tumblr, використовуючи <p>, можна (не завжди) знімати всю поведінку, окрім конкретної поведінки, яку я вказав. Я не знаю чому. <div> ЗАВЖДИ робить те саме.
2rs2ts

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.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.