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.