Riferimento incrociato (chiamato anchor) nel markdown


513

Esiste una sintassi di markdown per l'equivalente di:

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

... 

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

Risposte:


692
Take me to [pookie](#pookie)

dovrebbe essere la sintassi di markdown corretta per saltare al punto di ancoraggio chiamato pookie.

Per inserire un punto di ancoraggio con quel nome usa HTML:

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

A Markdown non sembra importare dove hai messo il punto di ancoraggio. Un posto utile per metterlo è in un'intestazione. Per esempio:

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

funziona molto bene. (Dimostrerei qui ma il renderer di SO elimina l'ancora.)

Nota sui tag a chiusura automatica e id=controname=

Una versione precedente di questo post suggeriva di usare <a id='tith' />, usando la sintassi a chiusura automatica per XHTML e usando l' idattributo invece di name.

XHTML consente che qualsiasi tag sia "vuoto" e "chiuso". Cioè, <tag />è <tag></tag>una scorciatoia per , una coppia di tag abbinata con un corpo vuoto. La maggior parte dei browser accetta XHTML, ma alcuni no. Per evitare problemi tra browser, chiudi esplicitamente il tag usando <tag></tag>, come raccomandato sopra.

Infine, l'attributo è name=stato deprecato in XHTML, quindi ho usato originariamente id=, cosa che tutti riconoscono. Tuttavia, HTML5 ora crea una variabile globale in JavaScript durante l'utilizzo id=e questo potrebbe non essere necessariamente quello che desideri. Quindi, l'utilizzo name=è ora probabilmente più amichevole.

(Grazie a Slipp Douglas per avermi spiegato XHTML, e inchiodato per aver sottolineato l'effetto collaterale HTML5 - vedi i commenti e la risposta del chiodatore per maggiori dettagli. Sembra funzionare ovunque, sebbene sia deprecato in XHTML.)name=


1
Non puoi vedere come collegarti alla demo della tua intestazione dopo che StackOverflow esegue il rendering dell'HTML perché il loro rendering rimuove il tag <a> . Cioè, non è possibile in StackOverflow Markdown.
Slipp D. Thompson,

2
Tuttavia, questo funzionerà con altri renderer Markdown più liberali, ma avrai bisogno di un tag <a> di chiusura ; il tag <a> non consente la chiusura automatica. Inoltre, ho trovato il mio browser per saltare l'intestazione a meno che il tag <a> non sia prima del contenuto dell'intestazione. Correzioni apportate ai tuoi esempi.
Slipp D. Thompson,

2
Tieni duro lì, cowboy. Solo perché non hai uno stile su un <a>senza un href non significa che si chiude da solo. A meno che non stia diventando completamente pazzo, entrambi: test-xhtml11 e [ sln.6bitt.com/public/test-html5.html lasting(test- html5) rendono il resto della pagina all'interno del tag <a>. Vai avanti e ispeziona con un ispettore web di tua scelta.
Slipp D. Thompson,

4
@Slipp: OK, penso di aver capito, ora. Hai codificato <a id="hi"/> rest of doc, ma è stato trattato come <a id="hi"> rest of doc</a>. (E anche l'analisi degli elementi della pagina mostra questo.) Il mio errore: ho osservato gli elementi visualizzati non la fonte non elaborata. Ritieni che la risposta debba essere modificata alla luce di questa osservazione?
Steve Powell,

3
L' nameattributo crea anche variabili globali (consultare stackoverflow.com/questions/3434278/… ), quindi è possibile utilizzare l' idattributo come destinazione degli URL identificatore di frammento, come previsto.
Bobby Jack,

93

Su bitbucket.org la soluzione votata non funzionerebbe. Invece, quando si usano le intestazioni (con ##), è possibile fare riferimento a loro come ancore prefissandole come # markdown-header-my-header-name, dove # markdown-header- è un prefisso implicito generato dal renderer e il resto è il titolo dell'intestazione inferiore con trattini che sostituiscono gli spazi.

Esempio

## My paragraph title

produrrà un'ancora implicita come questa

#markdown-header-my-paragraph-title

L'intero URL prima di ogni riferimento di ancoraggio è facoltativo, ad es

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

è equivalente a

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

purché si trovino nella stessa pagina.

Fonte: https://bitbucket.org/tutorials/markdowndemo/overview (modifica la fonte di questo file .md e guarda come vengono fatte le ancore).


1
Anche questo può fare. Secondo questo: confluence.atlassian.com/bitbucket/… , bitbucket supporta l'estensione del sommario che può generare automaticamente collegamenti e ancore in base alle intestazioni del documento. L'estensione TOC è documentata qui: pythonhosted.org/Markdown/extensions/toc.html Aggiungi il testo "[TOC]" all'inizio del documento per la sua generazione.
Binary Phile,

8
In Github, ## My paragraph titleprodurrà il seguente ancoraggio user-content-my-paragraph-title, quindi puoi fare riferimento con [Alcuni testi] (# user-content-my-paragraph-title). Tuttavia, non ho trovato documentazione ufficiale per questo.
toto_tico,

Questo mi ha aiutato anche su Bitbucket - funziona come un fascino.
Scott Byers,

1
Questa è un'informazione utile; grazie. Tuttavia, i renderer di markdown senza le estensioni non genereranno queste ancore per te e i nomi delle intestazioni in conflitto comporteranno id di ancoraggio in conflitto (o qualche trucco distintivo inutile, come i numeri sufficienti). Gli ID di ancoraggio espliciti sono migliori, più controllabili, non soggetti a modifiche casuali a causa di aggiornamenti di testo (vedi trucco sopra) e utili per ancorare più di semplici intestazioni. Entrambe le tecniche sono necessarie in generale.
Steve Powell,

Su stackedit.io è [linky](#header) stata un'ancora sufficiente e ha funzionato anche quando è stata pubblicata su Gist.
Felipe Alvarez,

67

Usa a name. L'uso di un idnon è necessario in HTML 5 e creerà variabili globali nel tuo JavaScript

Vedere la specifica HTML 5, 5.9.8 Navigazione verso un identificatore di frammento - entrambi ide namevengono utilizzati.

È importante sapere che la maggior parte dei browser trasforma ancora gli ID in variabili globali . Ecco un breve test . L'uso di a nameevita la creazione di globuli e qualsiasi conflitto che potrebbe derivarne.

Esempio usando un nome:

Take me to [pookie](#pookie)

E l'ancora di destinazione:

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

5
Downvoting. L'argomento della variabile globale è debole poiché non dovresti (direttamente) definire le variabili globali nel tuo JS, quindi non si verificherà alcun conflitto. Inoltre, la semantica di namee idsono diversi.
Marnen Laibow-Koser,

9
@ MarnenLaibow-Koser Nessuno sta discutendo sulla definizione di variabili globali in JS. Creare un ID in HTML crea un window.someid globale nella maggior parte dei browser.
mikemaccana,

14
@ MarnenLaibow-Koser Molte librerie (cioè non il tuo JS, ma quello di qualcun altro) usano un unico globale, ad esempio Fineuploader. Se si crea un elemento con un ID di fineuploader, non sarà possibile utilizzare il fineuploadermodulo. Evitare la creazione di globi non necessari aiuta a evitare tali conflitti.
mikemaccana,

5
Sarei interessato ad eseguire alcuni test di quel caso e scoprire quale ha la precedenza. Apprezzo il problema teorico, ma in anni di sviluppo sul lato client, non ho mai avuto un ID break su alcun JS sul lato client (purché il codice HTML fosse altrimenti valido). Continuerò a usarli quando saranno semanticamente appropriati finché non incontrerò problemi reali.
Marnen Laibow-Koser

2
@ MarnenLaibow-Koser I (e molti altri) hanno fatto in modo che gli ID HTML rompessero il vero JavaScript - c'è un esempio molto pratico nel commento a cui stai rispondendo! Ci sono molti stilisti e compagnie che usano sempre le lezioni, anche per i single, ed è per questo.
mikemaccana,

17

Markdown Anchor supporta l'hashmark, quindi sarebbe semplicemente un collegamento a un anchor nella pagina[Pookie](#pookie)

Generare l'ancora non è effettivamente supportato in Gruber Markdown, ma è in altre implementazioni, come Markdown Extra .

In Markdown Extra, l'ID di ancoraggio viene aggiunto a un'intestazione o sottotitolo con {#pookie}.

Github Flavored Markdown nelle pagine del repository Git (ma non in Gists) genera automaticamente ancore con diversi tag di markup su tutte le intestazioni (h1, h2, h3, ecc.), Tra cui:

  • id="user-content-HEADERTEXT"
  • class="anchor"
  • href="#HEADERTEXT"
  • aria-hidden="true" (questo è per un'icona di collegamento svg che viene visualizzata al passaggio del mouse)

Escludendo l'icona aria / svg, quando si scrive:

  • # Header Title

Github genera:

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

Pertanto, non è necessario fare nulla per creare i collegamenti di intestazione e si può sempre collegarli con:

  • Link al [Header Title](#header-title)

16

Non esiste una sintassi prontamente disponibile per farlo nella sintassi Markdown originale, ma Markdown Extra fornisce un mezzo per assegnare almeno gli ID alle intestazioni, a cui puoi quindi collegarti facilmente. Si noti inoltre che è possibile utilizzare HTML normale sia in Markdown che in Markdown Extra e che l' nameattributo è stato sostituito dall'attributo idnelle versioni più recenti di HTML.


9

Per chiunque cerchi una soluzione a questo problema in GitBook. È così che l'ho fatto funzionare (in GitBook). Devi taggare esplicitamente l'intestazione, in questo modo:

# My Anchored Heading {#my-anchor}

Quindi collegare a questo ancoraggio in questo modo

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

La soluzione e altri esempi sono disponibili qui: https://seadude.gitbooks.io/learn-gitbook/


Grazie! questo funziona! questo dovrebbe essere votato!
Dexter

Migliore risposta! Grazie
invis

7

In ritardo alla festa, ma penso che questa aggiunta possa essere utile per le persone che lavorano rmarkdown. In rmarkdownè integrato il supporto per i riferimenti alle intestazioni nel documento.

Qualsiasi intestazione definita da

# Header

può essere referenziato da

get me back to that [header](#header)

Di seguito è riportato un .rmdfile autonomo minimo che mostra questo comportamento. Può essere lavorato a maglia a .pdfe .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

Utilizzando l'ultimo Markdown, dovresti essere in grado di usare la sintassi seguente:

[](){:name='anchorName'}

Questo dovrebbe creare il seguente HTML:

<a name="anchorName"></a>

Se si desidera che l'ancoraggio contenga testo, è sufficiente aggiungere il testo di ancoraggio tra parentesi quadre:

[Some Text](){:name='anchorName'}


Sembra che Marukusappia solo di questa sintassi. Vedi il segno della bambina.
Ulysse BN,

3

Per i generatori di markdown più comuni. Hai un semplice ancoraggio auto-generato in ogni intestazione. Ad esempio con pandoc , l'ancora generata sarà una lumaca del caso kebab dell'intestazione.

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

A seconda del parser markdown che usi, l'ancora può cambiare (prendi l'esempio di symbolrush e La muerte Peluda risponde, sono diversi!). Vedi questo segno di spunta in cui puoi vedere gli ancoraggi generati in base all'implementazione del markdown .

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.