In Markdown, qual è il modo migliore per collegarsi a un frammento di una pagina, ad esempio #some_id?


127

Sto cercando di capire come fare riferimento a un'altra area di una pagina con Markdown. Posso farlo funzionare se aggiungo un

<div id="mylink" /> 

e per il collegamento fare:

[My link](#mylink)

Ma la mia ipotesi è che ci sia un altro modo per fare un link in-page in Markdown che non implichi il divtag straight up .

Qualche idea?


Li ho sempre fatti proprio come hai fatto qui.
Joe Martinez,

1
<div/>può sconvolgere il formattatore per il resto della pagina. Usa <a id="ident"/>. Vedi la mia risposta
Steve Powell,


Prendi invece in considerazione l'utilizzo di MultiMarkdown. Fornisce la [anchor][]sintassi per farlo. github.com/fletcher/MultiMarkdown/wiki/…
jwpfox

Risposte:


165

Vedere questa risposta .

In sintesi, effettuare una destinazione con

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

inserito ovunque nel markup del markdown (ad esempio in un'intestazione:

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

e collegalo usando il link markdown:

[This is the link text](#headin)

o

[some text](#sometext)

Non usare <div>: questo rovinerà il layout di molti renderer.

(Sono passato id=a name=sopra. Vedi questa risposta per la noiosa spiegazione.)


7
+1, grazie. È triste che non lo faccia automaticamente. IMHO molto umido.
Marc-André Lafortune,

E 'brutto quando si deve leggere in un editor di testo, ma, si fa il lavoro. Non sono sicuro del perché questa non sia la risposta accettata.
kayleeFrye_onDeck

La definizione delle ancore di vecchio stile <a name="..." />è obsoleta ma conforme alle specifiche HTML successive. Se <div>potrebbe essere reso come un blocco di disturbo (forse se per ragioni non divulgate il CSS sta dando una dimensione) forse <span>(un elemento inline) potrebbe fare il trucco?
Javier,

25

Immagino che questo dipenda da cosa stai usando per generare html dal tuo markdown. Ho notato che jekyll (è usato dalle pagine gihub.io per impostazione predefinita) aggiunge automaticamente l'attributo id = "" alle intestazioni nell'html che genera.

Ad esempio se sei markdown è

My header
---------

Il codice HTML risultante sarà simile al seguente:

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

Quindi puoi collegarti semplicemente a [My link](#my-header)


Questa è la risposta migliore e pulita. Markdown è davvero bello. aiuta davvero a fare blog velocemente. ^ _ ^
Ashok MA,

16

Con la versione PHP di Markdown , puoi anche collegare intestazioni a frammentari identificatori all'interno della pagina usando una sintassi come una delle seguenti, come documentato qui

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

## Header 2 ##      {#header2}

e poi

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

Sfortunatamente questa sintassi è attualmente supportata solo per le intestazioni, ma almeno potrebbe essere utile per costruire un sommario.


3

L'ancoraggio di destinazione per un collegamento in una pagina HTML può essere qualsiasi elemento con un idattributo. Vedi collegamenti sul sito W3C. Ecco un preventivo dalla sezione pertinente:

Le ancore di destinazione nei documenti HTML possono essere specificate dall'elemento A (denominandolo con l'attributo name) o da qualsiasi altro elemento (denominando con l'attributo id).

Markdown considera HTML come HTML (vedi HTML in linea ), quindi puoi creare i tuoi identificatori di frammento da qualsiasi elemento che ti piace. Se, ad esempio, vuoi collegare un paragrafo, inserisci il paragrafo in un tag di paragrafo e includi un ID:

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

Quindi utilizzare il Markdown standard [My link](#mylink)per creare un collegamento all'ancoraggio del frammento. Ciò contribuirà a mantenere pulito il tuo HTML, poiché non è necessario un markup aggiuntivo.


Nella mia esperienza, l'uso del <p>tag in Markdown può eliminare il CSS di un paragrafo normale. Direi di usare con cautela, sono nuovo di Markdown ma ha alcune stranezze.
2

@ user691859 Non sono sicuro di cosa intendi con "l'utilizzo del <p>tag in Markdown può eliminare il CSS di un paragrafo normale". Markdown avvolge i paragrafi nei <p>tag e ignora quelli che dispongono già di <p>tag. Non riesco a vedere in che modo ciò influirebbe sui CSS ...
Mike,

Il comportamento è irregolare per me. Su tumblr, l'uso di <p> ​​può (non sempre) eliminare tutto il comportamento oltre al comportamento specifico che ho specificato. Non so perché. <div> SEMPRE fa lo stesso però.
2

3

Per chiunque usi Visual Studio Team Foundation Server (TFS) 2015, in realtà non gli piacciono gli embedded <a>o gli <div>elementi, almeno nelle intestazioni. Inoltre, non piacciono le emoji nelle intestazioni:

### 🔧 Configuration 🔧

Lorem ipsum problem fixem.

Viene tradotto in:

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

Quindi i collegamenti dovrebbero usare quello id(che interrompe questa e altre estensioni di anteprima in Visual Studio) o rimuovere l'emoji:

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

Dove quest'ultima versione funziona sia online in TFS che nell'anteprima del markdown di Visual Studio.

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.