En Markdown, ¿cuál es la mejor manera de vincular a un fragmento de una página, es decir, #some_id?

127

Estoy tratando de descubrir cómo hacer referencia a otra área de una página con Markdown. Puedo hacerlo funcionar si agrego un

<div id="mylink" />

y para el enlace hacer:

[My link](#mylink)

Pero supongo que hay otra forma de hacer un enlace in-page en Markdown que no implique la divetiqueta directa .

¿Algunas ideas?

html markdown Chris
fuente
Siempre los he hecho tal como lo has hecho aquí.
Joe Martinez
1
<div/>puede alterar el formateador para el resto de la página. Uso <a id="ident"/>. Mira mi respuesta.
Steve Powell
Posible duplicado de referencia cruzada (ancla con nombre) en la rebaja
Ulysse BN
Considere usar MultiMarkdown en su lugar. Proporciona la [anchor][]sintaxis para hacer esto. github.com/fletcher/MultiMarkdown/wiki/…
jwpfox

Respuestas:

165

Mira esta respuesta .

En resumen, haga un destino con

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

insertado en cualquier parte de su marcado de descuento (por ejemplo, en un encabezado:

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

y vincularlo usando el enlace de descuento:

[This is the link text](#headin)

o

[some text](#sometext)

No lo use <div>: esto dañará el diseño para muchos renderizadores.

(He cambiado id=a lo name=anterior. Vea esta respuesta para la tediosa explicación).

Steve Powell
fuente
77
+1, gracias. Es triste que no haga esto automáticamente. Muy mojado en mi humilde opinión.
Marc-André Lafortune
Es feo cuando se tiene que leer en un editor de texto, pero, que hace el trabajo. No estoy seguro de por qué esta no es la respuesta aceptada.
kayleeFrye_onDeck
La definición de anclajes de estilo antiguo <a name="..." />es obsoleta pero se ajusta a las especificaciones HTML posteriores. Si <div>podría representarse como un bloque disruptivo (tal vez si por razones no reveladas el CSS está dando un tamaño) ¿tal vez <span>(un elemento en línea) podría hacer el truco?
Javier
25

Supongo que esto depende de lo que esté usando para generar html a partir de su descuento. Me di cuenta de que jekyll (se usa por defecto en las páginas gihub.io) agrega automáticamente el atributo id = "" a los encabezados en el html que genera.

Por ejemplo, si eres Markdown es

My header
---------

El html resultante se verá así:

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

Para que pueda vincularlo simplemente por [My link](#my-header)

bodgix
fuente
Esta es la mejor y limpia respuesta. Markdown es realmente genial. Realmente ayuda hacer blogs rápidos. ^ _ ^
Ashok MA
16

Con la versión PHP de Markdown , también puede vincular encabezados a identificadores de fragmentos dentro de la página utilizando una sintaxis como cualquiera de las siguientes, como se documenta aquí

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

## Header 2 ##      {#header2}

y entonces

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

Desafortunadamente, esta sintaxis actualmente solo es compatible con encabezados, pero al menos podría ser útil para crear una tabla de contenido.

Klokie
fuente
3

El ancla de destino para un enlace en una página HTML puede ser cualquier elemento con un idatributo. Ver enlaces en el sitio W3C. Aquí hay una cita de la sección correspondiente:

Las anclas de destino en los documentos HTML pueden especificarse ya sea por el elemento A (nombrándolo con el atributo de nombre) o por cualquier otro elemento (nombrando con el atributo id).

Markdown trata HTML como HTML (consulte HTML en línea ), por lo que puede crear sus identificadores de fragmentos a partir de cualquier elemento que desee. Si, por ejemplo, desea vincular a un párrafo, simplemente envuelva el párrafo en una etiqueta de párrafo e incluya una identificación:

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

Luego use su Markdown estándar [My link](#mylink)para crear un enlace para fragmentar el ancla. Esto ayudará a mantener su HTML limpio, ya que no hay necesidad de un marcado adicional.

Miguel
fuente
En mi experiencia, usar la <p>etiqueta en Markdown puede quitar el CSS de un párrafo normal. Diría que use con precaución, soy nuevo en Markdown pero tiene algunas peculiaridades.
2rs2ts
@ user691859 No estoy seguro de lo que quieres decir con "usar la <p>etiqueta en Markdown puede quitar el CSS de un párrafo normal". Markdown envuelve los párrafos en las <p>etiquetas e ignora los que ya tienen <p>etiquetas. No puedo ver cómo esto afectaría CSS ...
Mike
El comportamiento es errático para mí. En tumblr, usar <p> puede (no siempre) eliminar todo el comportamiento además del comportamiento específico que especifiqué. No se por que. <div> SIEMPRE hace lo mismo sin embargo.
2rs2ts
3

Como del uso que Visual Studio Team Foundation Server (TFS) 2015, lo que realmente no le gusta incrustado <a>o <div>elementos, por lo menos en las cabeceras. Tampoco le gustan los emoji en los encabezados:

### 🔧 Configuration 🔧

Lorem ipsum problem fixem.

Se traduce a:

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

Entonces, los enlaces deberían usar eso id(que rompe esta y otras extensiones de vista previa en Visual Studio) o eliminar el emoji:

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

Donde la última versión funciona tanto en línea en TFS como en la vista previa de descuento de Visual Studio.

Mella
fuente