web-dev-qa-db-fra.com

Référence croisée (ancre nommée) dans le démarquage

Existe-t-il une syntaxe de démarquage pour l’équivalent de:

Take me to <a href="#pookie">pookie</a>

... 

<a name="pookie">this is pookie</a>
htmlanchormarkdowncross-reference
425
Synesso
Take me to [pookie](#pookie)

devrait être la syntaxe de démarquage correcte pour accéder au point d'ancrage nommé pookie.

Pour insérer un point d'ancrage de ce nom, utilisez HTML:

<a name="pookie"></a>

Markdown ne semble pas se soucier de l'endroit où vous placez le point d'ancrage. Un endroit utile pour le mettre est dans un en-tête. Par exemple:

### <a name="tith"></a>This is the Heading

fonctionne très bien. (Je démontrerais ici mais le moteur de rendu de SO enlève l'ancre.)

Note sur les balises à fermeture automatique et id= versus name=

Une version antérieure de cet article suggérait d'utiliser <a id='tith' />, en utilisant la syntaxe à fermeture automatique pour XHTML et en utilisant l'attribut id au lieu de name.

XHTML permet à n'importe quelle balise d'être "vide" et "auto-fermée". C'est-à-dire que <tag /> est un raccourci pour <tag></tag>, une paire d'étiquettes appariées avec un corps vide. La plupart des navigateurs acceptent le XHTML, mais pas tous. Pour éviter les problèmes inter-navigateurs, fermez explicitement la balise en utilisant <tag></tag>, comme recommandé ci-dessus.

Enfin, l'attribut name= étant obsolète en XHTML, j'ai utilisé à l'origine id=, que tout le monde reconnaît. Cependant, HTML5 crée désormais une variable globale en JavaScript lors de l'utilisation de id=, mais ce n'est peut-être pas ce que vous voulez. Donc, utiliser name= est maintenant susceptible d’être plus convivial.

(Merci à Slipp Douglas de m'avoir expliqué XHTML et à cloueur d'avoir souligné l'effet secondaire HTML5 - voir les commentaires et les commentaires de cloueur _ ​​ réponse pour plus de détails. name= semble fonctionner partout, bien qu'il soit déconseillé en XHTML.)

572
Steve Powell

Sur bitbucket.org, la solution votée ne fonctionnerait pas. Lors de l'utilisation d'en-têtes (avec ##), il est possible de les référencer en tant qu'ancres en les préfixant ainsi: # markdown-header-my-header-name, où # markdown-header-est un préfixe implicite généré par le rendu, et le reste correspond au titre de l'en-tête avec des tirets remplaçant les espaces.

Exemple

## My paragraph title

va produire une ancre implicite comme celle-ci

#markdown-header-my-paragraph-title

L’URL complète devant chaque référence d’ancre est facultative, c.-à-d. 

[Some text](#markdown-header-my-paragraph-title)

est équivalent à 

[Some text](https://bitbucket.org/some_project/some_page#markdown-header-my-paragraph-title)

à condition qu'ils soient dans la même page.

Source: https://bitbucket.org/tutorials/markdowndemo/overview (modifiez la source de ce fichier .md et regardez comment les ancres sont créées). 

60
La Muerte Peluda

Utilisez une name. L'utilisation de id n'est pas nécessaire en HTML 5 et créera des variables globales dans votre JavaScript

Voir la spécification HTML 5, 5.9.8 Navigation vers un identificateur de fragment - id et name sont utilisés.

Il est important de savoir que la plupart des navigateurs convertissent encore les identifiants en variables globales . Voici un test rapide . L'utilisation de name évite la création de globales et tout conflit pouvant en résulter.

Exemple utilisant un nom:

Take me to [pookie](#pookie)

Et l'ancre de destination:

### <a name="pookie"></a>Some heading
58
mikemaccana

Il n'existe pas de syntaxe facilement disponible pour ce faire dans la syntaxe Markdown d'origine, mais Markdown Extra fournit un moyen d'attribuer au moins des ID aux en-têtes, auxquels vous pouvez facilement accéder. Notez également que vous pouvez utiliser du code HTML normal dans Markdown et Markdown Extra et que l'attribut name a été remplacé par l'attribut id dans les versions plus récentes de HTML.

16
You

Markdown Anchor prend en charge le signe de hachage. Un lien vers une ancre de la page serait simplement [Pookie](#pookie)

La génération de l'ancre n'est pas réellement prise en charge dans Gruber Markdown, mais dans d'autres implémentations, telles que Markdown Extra .

Dans Markdown Extra, l'ID d'ancrage est ajouté à un en-tête ou à un sous-en-tête avec {#pookie}.

Github Flavored Markdown dans les pages du référentiel Git (mais pas dans Gists) génère automatiquement des ancres avec plusieurs balises sur tous les en-têtes (h1, h2, h3, etc.), notamment:

  • id="user-content-HEADERTEXT"
  • class="anchor"
  • href="#HEADERTEXT"
  • aria-hidden="true" (il s’agit d’une icône de lien svg qui apparaît au passage de la souris)

En excluant l'icône aria/svg, quand on écrit:

  • # Header Title

Github génère:

  • <h1><a id="user-content-header-title" class="anchor" href="#header-title">Header Title</a></h1>

Par conséquent, il est inutile de créer des liens d’en-tête et vous pouvez toujours les relier avec:

  • Lien vers le [Header Title](#header-title)
8
jeffmcneill

En retard pour la fête, mais je pense que cet ajout pourrait être utile pour les personnes qui travaillent avec rmarkdown. Dans rmarkdown, il existe un support intégré pour les références aux en-têtes de votre document.

Tout en-tête défini par

# Header

peut être référencé par 

get me back to that header(#header)

Ce qui suit est un fichier autonome minimal .rmd qui montre ce comportement. Il peut être tricoté en .pdf et .html.

---
title: "references in rmarkdown"
output:
  html_document: default
  pdf_document: default
---

# Header

Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. 

Go back to that [header](#header).
4
symbolrush

Pour les générateurs de démarques les plus courants. Vous avez une simple ancre auto-générée dans chaque en-tête. Par exemple, avec pandoc , l’ancre générée sera une casse de cas de kebab de votre en-tête.

 echo "# Hello, world\!" | pandoc
 # => <h1 id="hello-world">Hello, world!</h1>

Selon l'analyseur de démarques que vous utilisez, l'ancre peut changer (prenons l'exemple des réponses symbolrush et La muerte Peluda, elles sont différentes!). Voir ceci babelmark où vous pouvez voir les ancres générées en fonction de votre implémentation de démarquage.

2
Ulysse BN

Pour tous ceux qui recherchent une solution à ce problème dans GitBook. Voici comment je l'ai fait fonctionner (dans GitBook). Vous devez baliser explicitement votre en-tête, comme ceci:

# My Anchored Heading {#my-anchor}

Puis liez-vous à cette ancre comme ceci

[link to my anchored heading](#my-anchor)

La solution et des exemples supplémentaires sont disponibles ici: https://seadude.gitbooks.io/learn-gitbook/

0
keyoxy