Dans Markdown, quelle est la meilleure façon de créer un lien vers un fragment d'une page, c'est-à-dire #some_id?


127

J'essaie de comprendre comment référencer une autre zone d'une page avec Markdown. Je peux le faire fonctionner si j'ajoute un

<div id="mylink" /> 

et pour le lien faire:

[My link](#mylink)

Mais je suppose qu'il existe un autre moyen de créer un lien sur la page dans Markdown qui n'implique pas la divbalise directe .

Des idées?


Je les ai toujours faites comme vous l'avez fait ici.
Joe Martinez

1
<div/>peut perturber le formateur pour le reste de la page. Utilisez <a id="ident"/>. Voyez ma réponse.
Steve Powell


Pensez à utiliser MultiMarkdown à la place. Il fournit la [anchor][]syntaxe pour ce faire. github.com/fletcher/MultiMarkdown/wiki/…
jwpfox

Réponses:


165

Voyez cette réponse .

En résumé faites une destination avec

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

inséré n'importe où dans votre balisage de démarque (par exemple dans un en-tête:

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

et un lien vers celui-ci en utilisant le lien markdown:

[This is the link text](#headin)

ou

[some text](#sometext)

Ne pas utiliser <div>- cela gâcherait la mise en page de nombreux moteurs de rendu.

(J'ai changé id=pour name=ci-dessus. Voir cette réponse pour l'explication fastidieuse.)


7
+1, merci. C'est triste qu'il ne le fasse pas automatiquement. IMHO très humide.
Marc-André Lafortune

Il est laid quand vous devez le lire dans un éditeur de texte, mais il fait le travail. Je ne sais pas pourquoi ce n'est pas la réponse acceptée.
kayleeFrye_onDeck

La définition d'ancres de style ancien <a name="..." />est obsolète mais conforme aux spécifications HTML ultérieures. Si cela <div>peut être rendu comme un bloc perturbateur (peut-être si, pour des raisons non divulguées, le CSS donne une taille) peut-être <span>(un élément en ligne) pourrait-il faire l'affaire?
Javier

25

Je suppose que cela dépend de ce que vous utilisez pour générer du HTML à partir de votre markdown. J'ai remarqué que jekyll (il est utilisé par défaut par les pages gihub.io) ajoute automatiquement l'attribut id = "" aux titres du html qu'il génère.

Par exemple, si votre démarque est

My header
---------

Le HTML résultant ressemblera à ceci:

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

Vous pouvez donc créer un lien vers celui-ci simplement en [My link](#my-header)


C'est la réponse la meilleure et la plus claire. Markdown est vraiment cool. cela aide vraiment à faire des blogs rapides. ^ _ ^
Ashok MA

16

Avec la version PHP de Markdown , vous pouvez également lier des en-têtes à des identificateurs de fragment dans la page en utilisant une syntaxe comme l'une des suivantes, comme documenté ici

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

## Header 2 ##      {#header2}

puis

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

Malheureusement, cette syntaxe n'est actuellement prise en charge que pour les en-têtes, mais au moins elle pourrait être utile pour construire une table des matières.


3

L'ancre de destination pour un lien dans une page HTML peut être n'importe quel élément avec un idattribut. Voir Liens sur le site du W3C. Voici une citation de la section pertinente:

Les ancres de destination dans les documents HTML peuvent être spécifiées soit par l'élément A (en le nommant avec l'attribut name), soit par tout autre élément (en nommant avec l'attribut id).

Markdown traite le HTML comme du HTML (voir HTML en ligne ), vous pouvez donc créer vos identificateurs de fragment à partir de n'importe quel élément de votre choix. Si, par exemple, vous souhaitez créer un lien vers un paragraphe, enveloppez simplement le paragraphe dans une balise de paragraphe et ajoutez un identifiant:

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

Utilisez ensuite votre Markdown standard [My link](#mylink)pour créer un lien vers l'ancre de fragment. Cela aidera à garder votre HTML propre, car aucun balisage supplémentaire n'est nécessaire.


D'après mon expérience, l'utilisation de la <p>balise dans Markdown peut supprimer le CSS d'un paragraphe normal. Je dirais à utiliser avec prudence, je suis nouveau sur Markdown mais il a quelques bizarreries.
2rs2ts

@ user691859 Je ne suis pas sûr de ce que vous entendez par "l'utilisation de la <p>balise dans Markdown peut dépouiller le CSS d'un paragraphe normal". Markdown enveloppe les paragraphes dans les <p>balises et ignore ceux qui ont déjà des <p>balises. Je ne peux pas voir comment cela affecterait CSS ...
Mike

Le comportement est erratique pour moi. Sur tumblr, utiliser <p> peut (pas toujours) supprimer tout le comportement en plus du comportement spécifique que j'ai spécifié. Je ne sais pas pourquoi. <div> fait TOUJOURS la même chose.
2rs2ts

3

Pour quiconque utilise Visual Studio Team Foundation Server (TFS) 2015, il n'aime vraiment pas incorporé <a>ou <div>éléments, du moins dans les en-têtes. Il n'aime pas non plus les emoji dans les en-têtes:

### 🔧 Configuration 🔧

Lorem ipsum problem fixem.

Obtient traduit en:

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

Et donc les liens doivent soit utiliser cela id(ce qui rompt ceci et d'autres extensions d'aperçu dans Visual Studio), soit supprimer l'emoji:

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

Où cette dernière version fonctionne à la fois en ligne dans TFS et dans l'aperçu de démarque de Visual Studio.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.