Saltar al contenido

Tener dos columnas en Markdown

Intenta comprender el código correctamente previamente a utilizarlo a tu trabajo y si tquieres aportar algo puedes dejarlo en la sección de comentarios.

Solución:

No puede, al menos no con Markdown puro, ya que no tiene ningún concepto de columnas. Como se explica en las reglas:

La idea de Markdown es facilitar la lectura, escritura y edición de prosa. HTML es un formato de publicación; Markdown es un formato de escritura. Por lo tanto, la sintaxis de formato de Markdown solo aborda problemas que se pueden transmitir en texto sin formato.

Para cualquier marcado que no esté cubierto por la sintaxis de Markdown, simplemente use HTML.

De hecho, la mejor manera sería tener cada bloque de código envuelto en un

con la clase apropiada asignada a cada div. Sin embargo, la mayoría de los analizadores de Markdown no analizan Markdown dentro de un bloque HTML sin formato. Por lo tanto, es posible que también deba definir el bloque de código en HTML sin formato. Consulte la lista de características de su analizador para averiguarlo. En el caso de que no pueda definir su propio CSS para usarlo por separado del Markdown (para diseñar el HTML), también deberá definir los estilos en línea en el HTML. Esta pregunta incluye una buena muestra de cómo podría verse eso. Simplemente reemplace los comentarios con los bloques de código apropiados. Si tiene que definir sus bloques de código en HTML sin procesar, se verían así:

int foo (void) 

    int i;

Entonces, el documento final que seguramente funcionará en todos (¿la mayoría?) de los analizadores de Markdown se vería así:

# Rule 1
Description for rule 1.

Good

int foo (void) 

    int i;

Malo

int foo (void) 
    int i;

Tenga en cuenta que eso usa una de las muchas formas diferentes de definir columnas en CSS. Diferentes métodos pueden o no funcionar en diferentes navegadores. YMMV.

Si bien esto no funciona para todas las rebajas, conseguí que funcionara con GitLab, Github y mdBook. Pensé en compartir esta respuesta.

Básicamente, creas la tabla a través de HTML. Markdown y HTML no combinan bien, pero si rodear el markdown con espacios en blancoa veces se puede reconocer la rebaja.

https://docs.gitlab.com/ee/user/markdown.html#inline-html

Good Bad
```c++ int foo() int result = 4; return result; ``` ```c++ int foo() int x = 4; return x; ```

Esta es una vieja pregunta, pero en caso de que la gente venga aquí desde Google, la respuesta anterior es correcta para el simple true Markdown, pero si está buscando hacer esto con o a través de algo que implementa kramdown, kramdown hace apoyo mixed Sintaxis HTML y Markdown por su uso de PHP Markdown Extra como se indica en los documentos de kramdown aquí. kramdown solo requiere que en su página de descuento donde pretende usar dicho HTML, agregue un attribute al elemento HTML envolvente de markdown="1".

Como ejemplo (y solución directa a la rebaja de dos columnas), esto da como resultado dos columnas para el contenido. Hice esto usando Bootstrap para manejar tanto el ancho de la columna como el centrado de la imagen, pero podría adoptar cualquier enfoque para esos temas.

Some text.

Tenga cuidado con las sangrías. Específicamente, no sangré más de un nivel en el código anterior. Creo que kramdown por defecto interpretará el código con doble sangría como un bloque de comillas (y si no recuerdo mal, eso es estándar para Markdown en general).

También tenga en cuenta que elegí usar el html img etiqueta en lugar del enlace de la imagen de rebajas. Puede elegir hacer lo mismo ya que obtiene un poco de control adicional.

Y, si es nuevo o no está familiarizado con Bootstrap, puede cambiar los anchos de columna relativos cambiando el 8 y/o 4 que se muestra en el código anterior, solo asegúrese de que la suma de esos dos números sea siempre 12.

Como se mencionó anteriormente, esto solo funciona para los consumidores de descuento que implementan el motor kramdown (y eso es excelente para los usuarios de Jekyll).

Aquí tienes las reseñas y valoraciones

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *