No Markdown, qual é a melhor maneira de vincular a um fragmento de uma página, por exemplo, #some_id?

127

Estou tentando descobrir como referenciar outra área de uma página com o Markdown. Posso fazê-lo funcionar se adicionar um

<div id="mylink" />

e para o link faça:

[My link](#mylink)

Mas meu palpite é que existe outra maneira de criar um link in-page no Markdown que não envolva a divtag direta .

Alguma ideia?

html markdown Chris
fonte
Eu sempre as fiz do jeito que você fez aqui.
21810 Joe Martinez
1
<div/>pode perturbar o formatador pelo resto da página. Use <a id="ident"/>. Veja minha resposta.
21411 Steve
Possível duplicata da referência cruzada (âncora denominada) na remarcação
Ulysse BN 27/11
Considere usar o MultiMarkdown. Ele fornece a [anchor][]sintaxe para fazer isso. github.com/fletcher/MultiMarkdown/wiki/…
jwpfox

Respostas:

165

Veja esta resposta .

Em resumo, faça um destino com

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

inserido em qualquer lugar na sua marcação de redução (por exemplo, em um cabeçalho:

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

e vincule a ele usando o link de remarcação:

[This is the link text](#headin)

ou

[some text](#sometext)

Não use <div>- isso atrapalha o layout de muitos renderizadores.

(Alterei id=para name=acima. Veja esta resposta para uma explicação tediosa.)

Steve Powell
fonte
7
+1, obrigado. É triste que isso não seja feito automaticamente. IMHO muito molhado.
Marc-André Lafortune
É feio quando você tem que lê-lo em um editor de texto, mas, ele faz o trabalho. Não sei por que essa não é a resposta aceita.
kayleeFrye_onDeck
Definir âncoras de estilo antigo <a name="..." />é obsoleto, mas está em conformidade com as especificações HTML posteriores. Se <div>pode ser processado como um bloco perturbador (talvez por razões não reveladas, o CSS esteja dando um tamanho), talvez <span>(um elemento inline) possa fazer o truque?
Javier
25

Eu acho que isso depende do que você está usando para gerar html a partir da sua remarcação. Notei que o jekyll (que é usado pelas páginas gihub.io por padrão) adiciona automaticamente o atributo id = "" aos títulos no html gerado.

Por exemplo, se você estiver remarcado,

My header
---------

O html resultante terá a seguinte aparência:

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

Então você pode vincular a ele simplesmente [My link](#my-header)

bodgix
fonte
Esta é a melhor e limpa resposta. Markdown é muito legal. realmente ajuda a criar blogs rapidamente. ^ _ ^
Ashok MA
16

Com a versão PHP do Markdown , você também pode vincular cabeçalhos a identificadores de fragmentos dentro da página usando uma sintaxe como uma das seguintes, conforme documentado aqui

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

## Header 2 ##      {#header2}

e depois

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

Infelizmente, atualmente esta sintaxe é suportada apenas por cabeçalhos, mas pelo menos pode ser útil para criar um sumário.

Klokie
fonte
3

A âncora de destino para um link em uma página HTML pode ser qualquer elemento com um idatributo. Veja os links no site do W3C. Aqui está uma citação da seção relevante:

As âncoras de destino nos documentos HTML podem ser especificadas pelo elemento A (nomeando-o com o atributo name) ou por qualquer outro elemento (nomeando com o atributo id).

O Markdown trata o HTML como HTML (consulte HTML embutido ), para que você possa criar seus identificadores de fragmentos a partir de qualquer elemento que desejar. Se, por exemplo, você deseja vincular a um parágrafo, basta agrupar o parágrafo em uma tag de parágrafo e incluir um ID:

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

Em seguida, use seu Markdown padrão [My link](#mylink)para criar um link para fragmentar a âncora. Isso ajudará a manter seu HTML limpo, pois não há necessidade de marcação extra.

Mike
fonte
Na minha experiência, usar a <p>tag no Markdown pode remover o CSS de um parágrafo regular. Eu diria que use com cautela, sou novo no Markdown, mas ele tem algumas peculiaridades.
2rs2ts
@ user691859 Não sei ao certo o que você quer dizer com "usar a <p>tag no Markdown pode retirar o CSS de um parágrafo regular". A remarcação agrupa parágrafos em <p>tags e ignora aqueles que já possuem <p>tags. Eu não posso ver como isso afetaria CSS ...
Mike
O comportamento é irregular para mim. No tumblr, usar <p> pode (nem sempre) eliminar todo o comportamento, além do comportamento específico que eu especifiquei. Eu não sei porque. <div> SEMPRE faz o mesmo.
2rs2ts
3

Para qualquer pessoa que use o Visual Studio Team Foundation Server (TFS) 2015, ele realmente não gosta de elementos incorporados <a>ou <div>, pelo menos em cabeçalhos. Também não gosta de emoji nos cabeçalhos:

### 🔧 Configuration 🔧

Lorem ipsum problem fixem.

É traduzido para:

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

Portanto, os links devem usar isso id(que quebra essa e outras extensões de visualização no Visual Studio) ou remover o emoji:

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

Onde a última versão funciona on-line no TFS e na visualização de descontos do Visual Studio.

usuario
fonte