html - Referencia cruzada(ancla nombrada) en rebaja
anchor markdown (8)
En bitbucket.org la solución votada no funcionaría. En cambio, cuando se usan encabezados (con ##), es posible hacer referencia a ellos como anclas prefijándolos como # markdown-header-my-header-name, donde # markdown-header- es un prefijo implícito generado por el renderizador, y el resto es el título del encabezado de caja inferior con guiones que reemplazan los espacios.
Ejemplo
## My paragraph title
producirá un ancla implícita como esta
#markdown-header-my-paragraph-title
La URL completa antes de cada referencia de anclaje es opcional, es decir
[Some text](#markdown-header-my-paragraph-title)
es equivalente a
[Some text](https://bitbucket.org/some_project/some_page#markdown-header-my-paragraph-title)
Siempre que estén en la misma página.
Fuente: https://bitbucket.org/tutorials/markdowndemo/overview (edite la fuente de este archivo .md y observe cómo se hacen los anclajes).
¿Hay sintaxis de reducción para el equivalente de:
Take me to <a href="#pookie">pookie</a>
...
<a name="pookie">this is pookie</a>
Luego de la fiesta, pero creo que esta adición podría ser útil para las personas que trabajan con rmarkdown . En rmarkdown hay soporte incorporado para referencias a encabezados en su documento.
Cualquier encabezado definido por
# Header
puede ser referenciado por
get me back to that header(#header)
El siguiente es un archivo .rmd independiente mínimo que muestra este comportamiento. Se puede tejer en .pdf y .html .
---
title: "references in rmarkdown"
output:
html_document: default
pdf_document: default
---
# Header
Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text.
Go back to that [header](#header).
No hay sintaxis disponible para hacer esto en la sintaxis de Markdown original, pero Markdown Extra proporciona un medio para al menos asignar ID a los encabezados, a los que puede vincularlos fácilmente. Tenga en cuenta también que puede usar HTML regular tanto en Markdown como en Markdown Extra, y que el atributo de name ha sido reemplazado por el atributo id en versiones más recientes de HTML.
Para la mayoría de los generadores de rebajas comunes. Tienes un simple anclaje autogenerado en cada encabezado. Por ejemplo, con pandoc , el ancla generada será un paquete de kebab de su encabezado.
echo "# Hello, world/!" | pandoc
# => <h1 id="hello-world">Hello, world!</h1>
Dependiendo del analizador de reducción de valor que use, el ancla puede cambiar (tome el ejemplo de symbolrush y las respuestas de La muerte Peluda, ¡son diferentes!). Vea este babelmark donde puede ver los anclajes generados en función de su implementación de rebaja .
Usando la última Markdown, debería poder usar la siguiente sintaxis:
[](){:name=''anchorName''}
Esto debería crear el siguiente HTML:
<a name="anchorName"></a>
Si desea que el ancla tenga texto, simplemente agregue la prueba entre corchetes:
`Some Text {: name = ''anchorName''}
Markdown Anchor admite el hashmark, por lo que un enlace a un ancla en la página sería simplemente [Pookie](#pookie)
La generación del ancla no es realmente compatible con Gruber Markdown, pero está en otras implementaciones, como Markdown Extra .
En Markdown Extra, la ID de ancla se adjunta a un encabezado o subtítulo con {#pookie} .
Github Flavored Markdown en las páginas del repositorio Git (pero no en Gists) genera automáticamente anclas con varias etiquetas de marca en todos los encabezados (h1, h2, h3, etc.), incluyendo:
-
id="user-content-HEADERTEXT" -
class="anchor" -
href="#HEADERTEXT" -
aria-hidden="true"(esto es para un ícono de enlace svg que se muestra con el mouseover)
Excluyendo el ícono aria / svg, cuando uno escribe:
-
# Header Title
Github genera:
-
<h1><a id="user-content-header-title" class="anchor" href="#header-title">Header Title</a></h1>
Por lo tanto, uno no necesita hacer nada para crear los enlaces de encabezado, y siempre puede vincularlos con:
- Enlace al
[Header Title](#header-title)
Usa un name . El uso de una id no es necesario en HTML 5 y creará variables globales en su JavaScript
Consulte la especificación HTML 5, 5.9.8 Navegando a un identificador de fragmento : se utilizan tanto id como name .
Es importante saber que la mayoría de los navegadores aún convierten las identificaciones en variables globales . Aquí hay una prueba rápida . El uso de un name evita la creación de globales y cualquier conflicto que pueda resultar.
Ejemplo usando un nombre:
Take me to [pookie](#pookie)
Y el ancla de destino:
### <a name="pookie"></a>Some heading
Take me to [pookie](#pookie)
debe ser la sintaxis de reducción correcta para saltar al punto de anclaje denominado pookie.
Para insertar un punto de anclaje de ese nombre use HTML:
<a name="pookie"></a>
A Markdown no parece importarle dónde pones el punto de anclaje. Un lugar útil para ponerlo es en un encabezado. Por ejemplo:
### <a name="tith"></a>This is the Heading
funciona muy bien (Lo demostraría aquí, pero el renderizador de SO elimina el ancla).
Nota sobre las etiquetas de cierre automático e id= versus name=
Una versión anterior de esta publicación sugirió usar <a id=''tith'' /> , usar la sintaxis de cierre automático para XHTML y usar el atributo id lugar del name .
XHTML permite que cualquier etiqueta esté ''vacía'' y ''auto-cerrada''. Es decir, <tag /> es una mano corta para <tag></tag> , un par de etiquetas coincidentes con un cuerpo vacío. La mayoría de los navegadores aceptan XHTML, pero algunos no. Para evitar problemas en varios navegadores, cierre la etiqueta explícitamente con <tag></tag> , como se recomienda anteriormente.
Finalmente, el atributo name= estaba en desuso en XHTML, así que originalmente usé id= , que todos reconocen. Sin embargo, HTML5 ahora crea una variable global en JavaScript cuando usa id= , y esto no necesariamente es lo que quieres. Entonces, usar name= ahora es probable que sea más amigable.
(Gracias a Slipp Douglas por explicarme XHTML, y a nailer por señalar el efecto secundario de HTML5; consulte los comentarios y la answer nailer para obtener más detalles. name= parece funcionar en todas partes, aunque está obsoleto en XHTML).