👅 Sabores de Markdown

:mag: Resumen

Este componente de tema te permite seleccionar un “sabor” para el estilo de markdown que deseas que se genere al crear publicaciones. Cada “sabor” de markdown se inspira en un formato de markdown comúnmente utilizado en la web.

:question: ¿Por qué querrías esto?

Esto se puede instalar puramente por motivos estilísticos o para resolver problemas como los mencionados aquí.

:memo: Ejemplos

:link: Enlaces Rápidos

|||
|—|—|—|
|:octopus: Obtener el código||
|:question: Guía de Instalación||
|:mag: Vista Previa|
|:newspaper_roll: Documentación|

Instalar Componente de Tema

29 Me gusta

¡Hola, gracias por este componente!

Lo probé en Windows 11 con tema oscuro. Discourse con tema claro predeterminado.

Todo funciona como se describe, pero:

  1. flavor=GitHub hace que la tabla sea completamente negra
  2. flavor=Gitlab hace que la cabecera sea negra
  3. flavor=Bitbucket funciona bien

GitHub:

Gitlab:

1 me gusta

Hola @Ivan_Rapekas,

Gracias por informarme sobre este problema. Tenía algunas variables de color personalizadas que cambian automáticamente según la preferencia del modo oscuro/claro del sistema del usuario. Sin embargo, si no tienes el cambio automático de modo oscuro en tu Discourse, ocurre este problema. Especialmente si tienes un tema claro en Discourse pero tu sistema está configurado en modo oscuro.

Como solución rápida para esto, he agregado una configuración que activa el cambio automático de tema oscuro. Si desmarcas esto en la configuración de tu tema, este problema debería resolverse para ti.

4 Me gusta

Hola @keegan!

¡Gracias por la respuesta y la rápida solución! Me ha ayudado.

Lamentablemente, tengo que señalar que este componente cambia la fuente:

a) componente deshabilitado:

b) componente habilitado:

También cambia <kbd> </kbd> en una celda de la tabla (la escala es la misma):
a) original:
Screenshot_4

b) con componente:
Screenshot_3

Esto es solo un aviso, no es necesario solucionarlo, creo :slight_smile: .

@Ivan_Rapekas Sí, eso es correcto. Intenté imitar las opciones de fuente utilizadas en markdown por cada sabor respectivo (es decir, la fuente de markdown de GitHub.com se usa cuando seleccionas el sabor de GitHub).

2 Me gusta

Ah, entendido. Realmente, las fuentes son similares a Gitlab/GitHub. ¡Gracias por la explicación! Brillante idea, esto es más de lo esperado de “solo un componente temático” :clap:

1 me gusta

Finalmente apliqué el formato de bloque de código original sobre el diseño de Gitlab :slight_smile: (funciona en el tema predeterminado):

/admin/customize/themes/1/common/scss/edit

// Original <code> sobre el componente de tema de Gitlab

.cooked kbd {
    align-items: center;
    border: 1px solid var(--primary-low-mid);
    background: var(--primary-very-low);
    border-bottom-width: 2px;
    border-radius: 3px;
    box-sizing: border-box;
    color: var(--primary);
    display: inline-flex;
    font-size: var(--font-down-1);
    justify-content: center;
    line-height: var(--line-height-large);
    margin: 0 0.15em;
    min-width: 24px;
    padding: 0.15em 0.6em;
}

Esto hace: Screenshot_4

Hola, me preguntaba si este componente se actualizará para usar esquemas de color? Es decir, primario, secundario, etc.

2 Me gusta

No he tenido tiempo de actualizar esto, pero intentaré dedicarle tiempo pronto.

Mientras tanto, ¿quizás este componente official se adapte a tus necesidades?

1 me gusta

Sí, ese es genial, sin duda. Me estaba fijando más en las tablas. Su componente aquí mejora la legibilidad de las tablas en comparación con el núcleo. Al usar un diseño de tabla más tradicional con separadores de líneas verticales.

Aprecio lo grandes que deben ser las cargas de trabajo del equipo. Sin prisa, solo pensé en preguntar, ya que acabo de descubrir su TC. :wink:

1 me gusta