Come collegarsi a parte dello stesso documento in Markdown?


541

Sto scrivendo un documento Markdown di grandi dimensioni e vorrei mettere all'inizio una sorta di sommario che fornirà collegamenti a varie posizioni nel documento. Come posso fare questo?

Ho provato a usare

[a link](# MyTitle)

dove si MyTitletrova un titolo all'interno del documento e questo non ha funzionato.



1
L'unico problema che hai riscontrato è che MyTitle non dovrebbe essere un titolo, ma il nome di un'ancora in quel documento (come <a name="MyTitle"> </a>). Quindi sarai in grado di utilizzare il tuo collegamento originale, ovunque nel documento.
userfuser

7
La risposta accettata non è in realtà rilevante per la maggior parte delle persone. Vedi invece la seconda risposta verso il basso: stackoverflow.com/a/16426829/398630
BrainSlugs83

Risposte:


37

In pandoc , se si utilizza l'opzione --tocnella produzione di html, verrà prodotto un sommario con collegamenti alle sezioni e di nuovo al sommario dalle intestazioni delle sezioni. È simile con gli altri formati che scrive pandoc, come LaTeX, rtf, rst, ecc. Quindi con il comando

pandoc --toc happiness.txt -o happiness.html

questo po 'di markdown:

% True Happiness

Introduction
------------

Many have posed the question of true happiness.  In this blog post we propose to
solve it.

First Attempts
--------------

The earliest attempts at attaining true happiness of course aimed at pleasure. 
Soon, though, the downside of pleasure was revealed.

produrrà questo come il corpo dell'html:

<h1 class="title">
    True Happiness
</h1>
<div id="TOC">
    <ul>
        <li>
            <a href="#introduction">Introduction</a>
        </li>
        <li>
            <a href="#first-attempts">First Attempts</a>
        </li>
    </ul>
</div>
<div id="introduction">
    <h2>
        <a href="#TOC">Introduction</a>
    </h2>
    <p>
        Many have posed the question of true happiness. In this blog post we propose to solve it.
    </p>
</div>
<div id="first-attempts">
    <h2>
        <a href="#TOC">First Attempts</a>
    </h2>
    <p>
        The earliest attempts at attaining true happiness of course aimed at pleasure. Soon, though, the downside of pleasure was revealed.
    </p>
</div>

1
Grazie, era esattamente quello di cui avevo bisogno. Stavo usando Textmate per convertire Markdown in HTML, passerò a pandoc.
recipriversesclusione

1
Potresti provare la demo Pandoc tmbundle su Github (c'è anche la modalità pandoc di emacs, ecc.) Il tmbundle riutilizza l'evidenziatore di sintassi specifico di MultiMarkdown, quindi ci sono (molto) poche stranezze. Inoltre, molti degli script associati sono altamente personalizzati - ad esempio Context, non LaTeX ecc. - ma l'idea è che gli utenti li modificheranno a loro piacimento, cosa che ho trovato piuttosto semplice. Probabilmente dovrebbe essere git cloneinserito nella directory tmbundle più bassa o più esterna, ~/Library/Application\ Support/TextMate/Bundlesper semplificare l'integrazione.
applicativo

2
Si aggiunge -1alla prima ripetizione dell'id, -2alla seconda, ecc.
applicativo

6
Ho scoperto che dovevo aggiungere l'opzione --standalone al comando pandoc per ottenere l'output del sommario stesso nell'output. Senza quell'interruttore, renderebbe le intestazioni in collegamenti all'ancora #toc denominata, ma in realtà non produrrebbe l'ancora nominata e l'elenco di simili.
Duncan Lock,

4
Questo potrebbe rispondere alla domanda del PO, ma per il resto di noi che vogliono sapere come farlo in ribasso , è piuttosto inutile. - La prossima risposta è molto più utile.
BrainSlugs83

936

Github analizza automaticamente i tag di ancoraggio dalle intestazioni. Quindi puoi fare quanto segue:

[Custom foo description](#foo)

# Foo

Nel caso precedente, l' Foointestazione ha generato un tag anchor con il nomefoo

Nota : solo uno #per tutte le dimensioni dell'intestazione, nessuno spazio tra #e nome dell'ancora , i nomi delle etichette di ancoraggio devono essere minuscoli e delimitati da trattini se composti da più parole .

[click on this link](#my-multi-word-header)

### My Multi Word Header

Aggiornare

Funziona anche fuori dagli schemi pandoc.


54
Se la tua intestazione contiene più parole, "Come questa", sostituisci gli spazi con i trattini nell'ancora [just](#like-this-one).
Mogsdad,

3
Funziona solo con le intestazioni H1? Se si collega a un'intestazione H2 (ad esempio ## Foo), devo anche inserire due segni numerici nel collegamento, ad esempio [Foo] (## foo)? Non riesco a far funzionare la tua sintassi o la mia (con il segno di numero aggiuntivo).
GrayedFox,

7
@GrayedFox, se vuoi creare un link per l'intestazione ab H2 ## Foo, prova [questo è il mio link a Foo] (# foo) ... cioè: singolo hash, nessuno spazio tra hash e minuscole-kebab-case-name- of-header
Abdull

4
Come suggerimento: controlla l'ancoraggio che viene visualizzato accanto alla tua intestazione su Github per ottenere il rispettivo link, ovvero se contiene caratteri speciali, vengono automaticamente rimossi e lì viene mostrato il link corretto.
Alexander Pacha,

2
E quando le intestazioni hanno un numero? # 3. Terzo punto [Terzo punto] (# 3.-terzo.punto) non funziona
Aditya

118

Sperimentando, ho trovato una soluzione usando <div…/>ma una soluzione ovvia è quella di posizionare il tuo punto di ancoraggio nella pagina dove preferisci, quindi:

<a name="abcde">

prima e

</a>

dopo la riga che si desidera "collegare" a. Quindi un link markdown come:

[link text](#abcde)

ovunque nel documento ti porta lì.

La <div…/>soluzione inserisce una divisione "fittizia" solo per aggiungere la idproprietà, e questo è potenzialmente dannoso per la struttura della pagina, ma la <a name="abcde"/>soluzione dovrebbe essere abbastanza innocua.

(PS: potrebbe essere OK inserire l'ancoraggio nella linea che si desidera collegare, come segue:

## <a name="head1">Heading One</a>

ma questo dipende da come Markdown lo tratta. Noto, ad esempio, che il formattatore di risposte Stack Overflow è contento di questo!)


2
Se lo fai, dovresti essere consapevole che il div elimina altre formattazioni di markdown, come ## headers.
2

@ user691859 Puoi elaborare? Forse possiamo aggiornare una risposta per farla funzionare meglio. Ho visto evidenziare l'eliminazione di TextMate fino a quando non ho indentato il div, ma nessun problema con il markdown elaborato visualizzato da un browser.
Steve Powell,

In WriteMonkey ho scoperto che se precedo qualsiasi testo con le <div/>diverse righe sottostanti sono interessati. Devo invece racchiudere il testo che sto collegando in una divclausola di tag completa e devo RISTRUTTURARE il comportamento da zero utilizzando HTML reale. Boo.
2

6
Funziona bene, grazie. Per chiunque si chieda, questo funziona anche con i file Markdown ospitati e visualizzati su GitHub.
Alex Dean,

2
Per essere compatibile con HTML5 , vorrei raccomandare di sostituirlo <a name="head1"/>con <a id="head1"/>.
binki,

74

Questo potrebbe essere un thread non aggiornato ma per creare collegamenti a documenti interni in markdown in Github usa ...
(NOTA: #title minuscolo)

    # Contents
     - [Specification](#specification) 
     - [Dependencies Title](#dependencies-title) 

    ## Specification
    Example text blah. Example text blah. Example text blah. Example text blah. 
Example text blah. Example text blah. Example text blah. Example text blah. 
Example text blah. Example text blah. Example text blah. Example text blah. 
Example text blah. Example text blah. 

    ## Dependencies Title
    Example text blah. Example text blah. Example text blah. Example text blah. 
Example text blah. Example text blah. Example text blah. Example text blah. 
Example text blah. Example text blah. Example text blah. Example text blah. 
Example text blah. Example text blah. 

È stata fatta una buona domanda, quindi ho modificato la mia risposta;

Un collegamento interno può essere fatto a qualsiasi dimensione titolo utilizzando - #, ##, ###, #### ho creato un esempio veloce sotto ... https://github.com/aogilvie/markdownLinkTest


Nel tuo esempio, i tag di collegamento hanno solo un #, ma le intestazioni che dovrebbero collegare hanno due ##; non dovrebbero essere uguali?
Karim Bahgat,

3
Buona domanda. La risposta è no. il # in (#dependencies-title)indica al markdown di Github che si tratta di un collegamento interno. Il testo che segue può avere qualsiasi dimensione del titolo. Ecco un esempio di test che ho fatto ... https://github.com/aogilvie/markdownLinkTest
Ally

1
Dipende dal sapore del markdown? Sembra che funzioni bene nell'editor di markdown, ma quando salvo in HTML o PDF gli ID non vengono aggiunti ai tag appropriati. Starei solo scaricando un'ancora lì dentro, ma sembra che il tuo metodo sia molto più pulito e veloce.
meteorainer

21

Sì, Markdown fa questo, ma è necessario specificare il nome anchor <a name='xyx'>.

un esempio completo,

questo crea il collegamento
[tasks](#tasks)

più avanti nel documento, si crea l'ancora con nome (come si chiama).

<a name="tasks">
   my tasks
</a>

nota che potresti anche avvolgerlo attorno all'intestazione.

<a name="tasks">
### Agile tasks (created by developer)
</a>

13

Il manuale pandoc spiega come collegarsi alle intestazioni, usando il loro identificatore. Non ho verificato il supporto di questo da altri parser, ma è stato riferito che non funziona su Github .

L'identificatore può essere specificato manualmente:

## my heading text {#mht}
Some normal text here,
including a [link to the header](#mht).

oppure puoi utilizzare l'identificatore generato automaticamente (in questo caso #my-heading-text). Entrambi sono spiegati in dettaglio nel manuale di Pandand .

NOTA : funziona solo quando si converte in HTML , LaTex , ConTeXt , Textile o AsciiDoc .


9

Alcune cose aggiuntive da tenere a mente se ti capita mai di immaginarti con simboli all'interno delle intestazioni che vuoi navigare verso ...

# What this is about


------


#### Table of Contents


- [About](#what-this-is-about)

- [&#9889; Sunopsis](#9889-tldr)

- [:gear: Grinders](#it-grinds-my-gears)

- [Attribution]


------


## &#9889; TLDR


Words for those short on time or attention.


___


## It Grinds my :gear:s


Here _`:gear:`_ is not something like &#9881; or &#9965;


___


## &#9956; Attribution


Probably to much time at a keyboard



[Attribution]: #9956-attribution

... cose come #, ;, &, e :della voce stringhe sono in genere vengono ignorate / strisce invece di sfuggita, e si può anche usare la citazione link di stile per rendere rapido utilizzo più facile.

Appunti

GitHub supporta la :word:sintassi in commit, file readme, ecc. Vedi gist (da rxaviers) se l'utilizzo di em è interessante lì.

E praticamente ovunque è possibile utilizzare decimali o esadecimali per i browser moderni; il cheat-sheet di w3schools è molto utile , soprattutto se usare CSS ::beforeo ::afterpseudo-elementi con simboli è più il tuo stile.

Punti bonus?

Nel caso in cui qualcuno si chiedesse come immagini e altri collegamenti all'interno di un'intestazione vengono analizzati in un id...

- [Imaged](#alt-textbadge__examplehttpsexamplecom-to-somewhere)


## [![Alt Text][badge__example]](https://example.com) To Somewhere


[badge__example]:
  https://img.shields.io/badge/Left-Right-success.svg?labelColor=brown&logo=stackexchange
  "Eeak a mouse!"

Avvertenze

Il rendering di MarkDown differisce da un luogo all'altro, quindi cose come ...

## methodName([options]) => <code>Promise</code>

... su GitHub avrà un elemento idcome ...

id="methodnameoptions--promise"

... dove come vaniglia servizi igienico-sanitari comporterebbe un iddi ...

id="methodnameoptions-codepromisecode"

... il che significa che scrivere o compilare file MarkDown dai modelli richiede sia il targeting di un modo di slugifeing , sia l'aggiunta di configurazioni e logica di script per i vari modi intelligenti che piacciono a come pulire il testo dell'intestazione.


9

Soluzioni universali

Questa domanda sembra avere una risposta diversa in base all'implementazione del markdown.
In effetti, la documentazione ufficiale di Markdown tace su questo argomento.
In tali casi, e se si desidera una soluzione portatile, è possibile utilizzare HTML.

Prima di qualsiasi intestazione o nella stessa riga di intestazione, definire un ID utilizzando un tag HTML.
Ad esempio: <a id="Chapter1"></a>
vedrai questo nel tuo codice ma non nel documento renderizzato.

Esempio completo:

Vedi un esempio completo (online e modificabile) qui .

## Content

* [Chapter 1](#Chapter1)
* [Chapter 2](#Chapter2)

<div id="Chapter1"></div>
## Chapter 1

Some text here.  
Some text here.
Some text here.

## Chapter 2 <span id="Chapter2"><span>

Some text here.  
Some text here.
Some text here.

Per provare questo esempio, è necessario aggiungere ulteriore spazio tra l'elenco dei contenuti e il primo capitolo o ridurre l'altezza della finestra.
Inoltre, non utilizzare spazi nel nome degli ID.


Uh ..., sembrava carino. Provato, due problemi: (1). ## Chapter 1ha bisogno di una linea aperta sopra di esso. (2). Il link non funziona ...
musicformellons

Ah, non funziona nel plugin markdown intellij che ho usato; ma FUNZIONA nell'editor di markup di Macdown.
musicformellons il

Tuttavia, testato su github: è richiesta la linea aperta sopra l'intestazione, ma funziona.
musicformellons il

@musicformellons puoi provare senza la linea di apertura ma chiudendo correttamente il tag span? <br><span id="Chapter1"><span>
ePi272314

sì, funziona!
musicformellons

7

Non esiste una direttiva di questo tipo nelle specifiche Markdown. Scusate.


Uh Oh! Sai se MultiMarkdown o Textile lo supportano? Stavo pensando di migrare a MD per tutta la mia documentazione, ma questo è un grosso problema. Grazie per l'aiuto!
recipriversesclusione

5
Cosa intendi con "direttiva"? Altre soluzioni per risolvere esattamente il problema sono state pubblicate qui.
Zelphir Kaltstahl,

4

Gitlab utilizza GitLab Flavored Markdown (GFM)

Qui "tutte le intestazioni renderizzate da Markdown ottengono automaticamente gli ID"

Si può usare il mouse per:

  • sposta il mouse sopra l'intestazione
  • sposta il mouse sopra il selettore al passaggio del mouse che diventa visibile a sinistra dall'intestazione
  • copia e salva il link usando il tasto destro del mouse

    Ad esempio nel file README.md ho l'intestazione:

## series expansion formula of the Boettcher function

che fornisce un collegamento:

https://gitlab.com/adammajewski/parameter_external_angle/blob/master/README.md#series-expansion-formula-of-the-boettcher-function

Il prefisso può essere rimosso, quindi il link qui è semplicemente

file#header

che qui significa:

README.md#series-expansion-formula-of-the-boettcher-function

Ora può essere usato come:

[series expansion formula of the Boettcher function](README.md#series-expansion-formula-of-the-boettcher-function)

Si può anche farlo manualmente: sostituire gli spazi con il segno meno.

L'esempio dal vivo è qui


1

Usando kramdown, sembra che funzioni bene:

[I want this to link to foo](#foo)
....
....
{: id="foo"}
### Foo are you?

Vedo che è stato menzionato quello

[foo][#foo]
....
#Foo

funziona in modo efficiente, ma il primo potrebbe essere una buona alternativa per elementi oltre alle intestazioni o alle intestazioni con più parole.


1

Poiché MultiMarkdown è stato menzionato come opzione nei commenti.

In MultiMarkdown la sintassi per un collegamento interno è semplice.

Per qualsiasi intestazione nel documento è sufficiente fornire il nome dell'intestazione in questo formato [heading][]per creare un collegamento interno.

Maggiori informazioni qui: Riferimenti incrociati MultiMarkdown-5 .

Riferimenti incrociati

Una caratteristica spesso richiesta era la possibilità che Markdown gestisse automaticamente i collegamenti all'interno dei documenti con la stessa facilità con cui gestiva i collegamenti esterni. A questo scopo, ho aggiunto la possibilità di interpretare [Some Text] [] come un collegamento incrociato, se esiste un'intestazione denominata "Some Text".

Ad esempio, [Metadata] [] ti porterà a # Metadata (o uno qualsiasi dei ## Metadata, ### Metadata, #### Metadata, ##### Metadata, ###### Metadata).

In alternativa, puoi includere un'etichetta facoltativa di tua scelta per aiutare a chiarire i casi in cui più intestazioni hanno lo stesso titolo:

### Panoramica [MultiMarkdownOverview] ##

Ciò consente di utilizzare [MultiMarkdownOverview] per fare riferimento in modo specifico a questa sezione e non a un'altra sezione denominata Panoramica. Funziona con intestazioni in stile atx o settext.

Se è già stata definita un'ancora utilizzando lo stesso ID utilizzato da un'intestazione, l'ancora definita ha la precedenza.

Oltre alle intestazioni all'interno del documento, è possibile fornire etichette per immagini e tabelle che possono essere utilizzate anche per riferimenti incrociati.


0

Alcuni altri giri sul <a name="">trucco:

<a id="a-link"></a> Title
------

#### <a id="a-link"></a> Title (when you wanna control the h{N} with #'s)

0

Oltre alle risposte di cui sopra,

Quando si imposta l'opzione number_sections: truenell'intestazione YAML:

number_sections: TRUE

RMarkdown numera automaticamente le sezioni.

Per fare riferimento a quelle sezioni autonumerate è sufficiente inserire quanto segue nel file R Markdown:

[My Section]

Dov'è My Sectionil nome della sezione

Questo sembra funzionare indipendentemente dal livello di sezione:

# My section

## My section

### My section

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.