headings - html tags

¿Cómo puedo envolver mi descuento en un div HTML?

Question

Estoy usando MarkEd que implementa el descuento de GitHub con sabor .

Tengo algunas rebajas de trabajo:

## Test heading
a paragraph.
## second heading
another paragraph

Lo que crea:

<h2 id="test-heading">Test heading</h2>
<p>a paragraph.</p>
<h2 id="second-heading">second heading</h2>
<p>another paragraph</p>

Me gustaría envolver esa sección de rebajas en un div, por ejemplo:

<div class="blog-post">
## Test heading
a paragraph.
## second heading
another paragraph
</div>

Sin embargo, esto devuelve el siguiente HTML:

<div class="blog-post">
## Test heading
a paragraph.
## second heading
another paragraph
</div>

Por ejemplo, sin rebajas, literalmente aparece ''## Encabezado de prueba'' en el HTML.

¿Cómo puedo envolver correctamente mi markdown en un div?

He encontrado la siguiente solución, sin embargo, es fea y no es una solución real:

<div class="blog-post">
<div></div>

## Test heading
a paragraph.
## second heading
another paragraph

</div>

Answer 1

Reducción

Para Markdown, esto es por diseño. Desde la sección HTML en línea de la referencia de Markdown:

Tenga en cuenta que la sintaxis de formato Markdown no se procesa dentro de las etiquetas HTML a nivel de bloque. Por ejemplo, no puede usar el énfasis de estilo Markdown dentro de un bloque HTML.

Pero está explícitamente permitido para etiquetas de nivel de extensión:

A diferencia de las etiquetas HTML de nivel de bloque, la sintaxis de Markdown se procesa dentro de las etiquetas de nivel de intervalo.

Entonces, dependiendo de su caso de uso, puede salirse con la suya usando un span lugar de un div .

CommonMark

Si la biblioteca que usa implementa CommonMark , tiene suerte. Los ejemplos 108 y 109 de la especificación muestran que si mantiene una línea vacía entre el bloque HTML y el código de reducción, el contenido se analizará como Reducción:

<div>

*Emphasized* text.

</div>

debería funcionar, mientras que lo siguiente no debería:

<div>
*Emphasized* text.
</div>

Y, de nuevo de acuerdo con la misma sección en la referencia, algunas implementaciones reconocen un atributo adicional markdown=1 en la etiqueta HTML para permitir el análisis de Markdown en su interior.

Aunque todavía no parece funcionar en :

Prueba ** Markdown ** dentro de un div de fondo rojo.

Answer 2

Al mirar los documentos para Ampliar Marcado y modificar el método de representación html , puede hacer algo como esto para reemplazar las partes entre etiquetas con marcado analizado. No he hecho pruebas exhaustivas, pero funcionó con mis primeros intentos.

const marked = require(''marked'');
const renderer = new marked.Renderer();
renderer.html = (mixedContent) => mixedContent.replace(/[^<>]+?(?=<)/g, (match) => {
    const tokens = marked.lexer(match);
    return marked.parser(tokens);
});

Editar

Esta nueva expresión regular asegurará que solo se analice el marcado con líneas entre él y las etiquetas html.

const marked = require(''marked'');
const renderer = new marked.Renderer();
renderer.html = (mixedContent) => mixedContent.replace(//n/n[^<>]+?/n/n(?=<)/g, (match) => {
    const tokens = marked.lexer(match);
    return marked.parser(tokens);
});

Answer 3

Las páginas de GitHub admiten el atributo markdown="1" para analizar la rebaja dentro de los elementos HTML, p. Ej.

<div class="tip" markdown="1">Have **fun!**</div>

Nota: A partir de 2019/03, esto no funciona en github.com, solo en las páginas de GitHub.

Nota: las comillas, como en markdown="1" , no son necesarias para HTML5, pero si no usa comillas ( markdown=1 ), GitHub no lo reconoce como HTML. Además, el soporte es defectuoso en este momento. Es probable que obtenga un resultado incorrecto si su elemento HTML es más grande que un solo párrafo. Por ejemplo, debido a errores, no pude insertar una lista de Markdown dentro de un div.

Si se encuentra en un entorno en el que markdown="1" no funciona pero span sí, otra opción es usar <span style="display:block"> para que las clases de nivel de bloque sean compatibles con él, por ejemplo

<span style="display:block" class="note">It **works!**</span>

Consejo: <span class="note"></span> es más corto que <div class="note" markdown="1"></div> , por lo que si controla el CSS puede preferir usar <span> y agregar display: block; a tu CSS.

Answer 4

Markdown Extra es necesario para que el formato de Markdown funcione dentro de un bloque HTML, consulte la documentación que se indica aquí -> https://michelf.ca/projects/php-markdown/extra/

Markdown Extra le brinda una forma de colocar texto con formato Markdown dentro de cualquier etiqueta de nivel de bloque. Para ello, agregue un atributo de descuento a la etiqueta con el valor 1, lo que da a Markdown = "1"

Answer 5

Opción de último recurso:

Algunas bibliotecas pueden ser sensibles a mayúsculas y minúsculas.

Pruebe <DIV> lugar de <div> y vea qué sucede.

Markdownsharp tiene esta característica, aunque en eliminan todos los DIV de todos modos, así que no esperes que funcione aquí.