# Cambiar el estilo de los bloques de código en línea para que destaquen más
**URL:** https://meta.discourse.org/t/change-styling-of-inline-code-blocks-so-they-stand-out-more/217825
**Category:** UX
**Created:** [9 Febrero, 2022 16:44 UTC](https://meta.discourse.org/t/change-styling-of-inline-code-blocks-so-they-stand-out-more/217825 "2022-02-09T16:44:37Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [9 Febrero, 2022 16:44 UTC](https://meta.discourse.org/t/change-styling-of-inline-code-blocks-so-they-stand-out-more/217825/1 "2022-02-09T16:44:37Z")
Un cliente de Teams solicita `bloques de código` en línea que destaquen más. Actualmente, ya sea en modo oscuro o claro, el `bloque de código` no se diferencia mucho en color de otro texto. ¿Podríamos cambiar el color del texto por defecto en Discourse para que se utilice un color diferente que destaque más, por ejemplo, rojo?
Sé que para la mayoría de los clientes esto no es un gran problema porque pueden personalizar el tema para cambiar el CSS en su sitio, pero para Discourse for Teams este nivel de personalización no es posible. Mientras tanto, para los equipos que discuten código, es muy importante que destaque y sea muy diferente del resto del texto.
---
### Author:  [@Julienlavigne](https://meta.discourse.org/u/Julienlavigne)
#### Post date: [9 Febrero, 2022 17:14 UTC](https://meta.discourse.org/t/change-styling-of-inline-code-blocks-so-they-stand-out-more/217825/3 "2022-02-09T17:14:34Z")
Gracias Tobias. Para que conste, soy el cliente y quiero enfatizar que estoy hablando exclusivamente de `bloques en línea`. No tengo ninguna preocupación con las líneas múltiples.
---
### Author:  [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [9 Febrero, 2022 17:32 UTC](https://meta.discourse.org/t/change-styling-of-inline-code-blocks-so-they-stand-out-more/217825/4 "2022-02-09T17:32:23Z")
Sí, los bloques multilínea son geniales.
Hay otras formas de resaltar texto, pero obviamente las comillas invertidas son las más rápidas.
---
### Author:  [@Julienlavigne](https://meta.discourse.org/u/Julienlavigne)
#### Post date: [10 Febrero, 2022 06:19 UTC](https://meta.discourse.org/t/change-styling-of-inline-code-blocks-so-they-stand-out-more/217825/7 "2022-02-10T06:19:24Z")
Para que conste, si eres un novato en HTML como yo (tuve que buscarlo):
1. `¡Elegante!` está hecho con `¡Elegante!`
2. `¡Ohhhh!` está hecho con `¡Ohhhh!`
Es útil saberlo, gracias @tobiaseigen.
Todavía creo que tendría sentido ajustar el CSS para `esto` también. Tenemos algunas publicaciones técnicas que usan mucho las comillas invertidas, y usar las 2 alternativas definitivamente no es tan fácil de usar.
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [10 Febrero, 2022 07:05 UTC](https://meta.discourse.org/t/change-styling-of-inline-code-blocks-so-they-stand-out-more/217825/8 "2022-02-10T07:05:40Z")
> [@Julienlavigne](#):
>
> Tuve que buscarlo
Un consejo para la próxima vez: solo cita la publicación donde quieres saber cómo hacer eso, entonces podrás verlo.
---
### Author:  [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [10 Febrero, 2022 14:42 UTC](https://meta.discourse.org/t/change-styling-of-inline-code-blocks-so-they-stand-out-more/217825/9 "2022-02-10T14:42:20Z")
Lo siento por eso. Normalmente revelaría el truco, pero estaba en mi teléfono y tenía un poco de prisa.
Otro truco útil para ver cómo se creó una publicación es usar la URL sin procesar, por ejemplo: [https://meta.discourse.org/raw/57255/7](https://meta.discourse.org/raw/57255/7)
---
### Author:  [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [10 Febrero, 2022 22:29 UTC](https://meta.discourse.org/t/change-styling-of-inline-code-blocks-so-they-stand-out-more/217825/10 "2022-02-10T22:29:37Z")
Oh, hay una tercera forma de resaltar que también es agradable y que sigo olvidando. Se ve así y se hace usando esta marca HTML `texto`. Hay un componente de tema contribuido por la comunidad (no disponible en Teams) que te permite usar `==texto==` en su lugar, lo cual es bastante útil. No lo encuentro de inmediato por alguna razón.
Pero de todos modos, hablaré con mis colegas sobre la actualización del estilo predeterminado de los bloques de código para que sean más obvios. Quizás incluso hacer que el color de fondo del bloque de código sea más distintivo será suficiente.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [6 Abril, 2022 20:16 UTC](https://meta.discourse.org/t/change-styling-of-inline-code-blocks-so-they-stand-out-more/217825/14 "2022-04-06T20:16:41Z")
Tengo una PR para cambiar los bloques de código en línea en el núcleo aquí: [PR: Inline code block styling edits by jordanvidrine · Pull Request #16394 · discourse/discourse · GitHub](https://github.com/discourse/discourse/pull/16394)
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [6 Abril, 2022 20:16 UTC](https://meta.discourse.org/t/change-styling-of-inline-code-blocks-so-they-stand-out-more/217825/15 "2022-04-06T20:16:50Z")
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [6 Abril, 2022 23:11 UTC](https://meta.discourse.org/t/change-styling-of-inline-code-blocks-so-they-stand-out-more/217825/16 "2022-04-06T23:11:26Z")
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [6 Abril, 2022 23:11 UTC](https://meta.discourse.org/t/change-styling-of-inline-code-blocks-so-they-stand-out-more/217825/17 "2022-04-06T23:11:36Z")
Lo siento… revertiré esto por ahora.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [9 Mayo, 2022 22:06 UTC](https://meta.discourse.org/t/change-styling-of-inline-code-blocks-so-they-stand-out-more/217825/18 "2022-05-09T22:06:49Z")
El código en línea siempre ha parecido código normal, con una fuente monoespaciada (monospace). Cualquier cosa realmente brillante y discordante dependería en gran medida de la comunidad y, definitivamente, no sería coherente con la forma en que veo `código` utilizado en la mayoría de los lugares de la web.
La cuestión del resaltado de sintaxis es diferente; necesitarías **varias líneas de código** para determinar con qué sintaxis estás tratando. Quizás esa fue la raíz del problema: si quieres resaltado de sintaxis, necesitas un _bloque_ de código, por ejemplo.
```javascript
var x, y, z; // Declara 3 variables
x = 5; // Asigna el valor 5 a x
y = 6; // Asigna el valor 6 a y
z = x + y; // Asigna la suma de x e y a z
document.getElementById("demo").innerHTML =
"El valor de z es " + z + ".";
```
Un solo elemento `código` está divorciado de todo el contexto necesario para hacer el resaltado de sintaxis. Podrías hacer una sola línea de JavaScript, sin embargo:
```javascript
"el valor de z es " + z + ".";
```
Que se ve así:
````
``` javascript
"el valor de z es " + z + ".";
```
````
Así que supongo que se trata de **bloques de código** frente a **una palabra de código**.
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [10 Mayo, 2022 01:08 UTC](https://meta.discourse.org/t/change-styling-of-inline-code-blocks-so-they-stand-out-more/217825/19 "2022-05-10T01:08:15Z")
> [@codinghorror](#):
>
> y definitivamente no es consistente con la forma en que veo `código` usado en la mayoría de los lugares en la web.
Supongo que @jordan.vidrine tiene órdenes de marcha aquí. Simplemente proceder a revertir completamente el cambio. Quizás crear un componente temático para “estilos de código alternativos”, puede hacerlo completamente al estilo Slack con código en línea y hacerlo rojo, siendo un componente y todo.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [10 Mayo, 2022 18:29 UTC](https://meta.discourse.org/t/change-styling-of-inline-code-blocks-so-they-stand-out-more/217825/21 "2022-05-10T18:29:44Z")
Esta iteración reciente fue un componente temático activo en Meta y no un cambio real, así que he procedido a deshabilitarlo.
---
### Author:  [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [10 Mayo, 2022 20:02 UTC](https://meta.discourse.org/t/change-styling-of-inline-code-blocks-so-they-stand-out-more/217825/22 "2022-05-10T20:02:54Z")
Está bien no hacer este cambio. 👍
Creo que lo que se pedía aquí era una forma rápida y sencilla de resaltar texto en las discusiones. Mucha gente (incluyéndome a mí) ha optado por usar comillas invertidas para resaltar texto porque es súper fácil… ni siquiera tienes que presionar Shift, y es descubrible en el menú. Pero no se distingue mucho del resto del texto en el párrafo.
Negrita e cursiva también están en el menú y tampoco destacan mucho. Otras formas de resaltar texto en línea requieren más pulsaciones de teclas. Además, no están prominentemente documentadas, por lo que también requieren conocimiento interno.
Hasta donde sé, estos son los mejores:
Botón ` Botón`
Subrayado verde `Subrayado verde`
~~Tachado rojo~~ `Tachado rojo`
Resaltar `Resaltar`
~~Tachado~~ `Tachado`
Para aquellos que pueden instalar complementos, existe el complemento oficial [Discourse BBCode color](https://meta.discourse.org/t/discourse-bbcode-color/65363). Y para aquellos que no pueden instalar complementos, @merefield creó el componente temático [Discourse Coloured Text](https://meta.discourse.org/t/discourse-coloured-text/218111?u=tobiaseigen).
También me gustó el componente temático que convertía `==resaltar==` en resaltar, pero he perdido la pista de él aquí en meta.
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [11 Mayo, 2022 01:48 UTC](https://meta.discourse.org/t/change-styling-of-inline-code-blocks-so-they-stand-out-more/217825/23 "2022-05-11T01:48:51Z")
> [@tobiaseigen](#):
>
> También me gustó el componente de tema que convirtió `==highlight==` en `highlight`
Esto necesitaría hacerse en un plugin en este momento, ya que querrías integrarlo en html y no solo realizar una transformación del lado del cliente.
Mirando [https://markdown-it.github.io/](https://markdown-it.github.io/) parece que ahora está habilitado por defecto en markdown.it en modo no estricto @Vitaly?
---
### Author:  [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [12 Mayo, 2022 15:59 UTC](https://meta.discourse.org/t/change-styling-of-inline-code-blocks-so-they-stand-out-more/217825/24 "2022-05-12T15:59:06Z")
> [@sam](#):
>
> Por el momento, esto tendría que hacerse mediante un plugin, ya que se desea integrarlo en el HTML y no solo realizar una transformación del lado del cliente.
Interesante. Gracias por la explicación.
> [@tobiaseigen](#):
>
> También me gustaba el componente del tema que convertía `==highlight==` en highlight, pero he perdido la pista de este en Meta.
Hoy me encontré con el plugin que hace esto por casualidad mientras revisaba la categoría #Customization > Plugin… es curioso cómo en algunos casos simplemente no se te ocurre la palabra clave adecuada para encontrar un plugin. 🤣
> [@Plugin de marcas de discurso](https://meta.discourse.org/t/discourse-mark-plugin/93059?u=tobiaseigen):
>
> discourse-mark Repositorio: [GitHub - sirideain/discourse-mark: Adds highlighting to Discourse · GitHub](https://github.com/sirideain/discourse-mark)Características Agrega una opción en el editor para resaltar texto. Uso Puedes envolver el texto con == para resaltarlo. ==Texto Resaltado== Instalación Problemas Conocidos Ninguno Futuro Actualizar el ícono a un resaltador una vez que Font Awesome 5 esté disponible
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [12 Mayo, 2022 23:48 UTC](https://meta.discourse.org/t/change-styling-of-inline-code-blocks-so-they-stand-out-more/217825/25 "2022-05-12T23:48:30Z")
Ya veo… la implementación raíz está aquí:
> **[GitHub - markdown-it/markdown-it-mark: tag plugin for markdown-it markdown...](https://github.com//markdown-it/markdown-it-mark)**
>
> tag plugin for markdown-it markdown parser. Contribute to markdown-it/markdown-it-mark development by creating an account on GitHub.
---
### Author:  [@Julienlavigne](https://meta.discourse.org/u/Julienlavigne)
#### Post date: [7 Junio, 2022 12:48 UTC](https://meta.discourse.org/t/change-styling-of-inline-code-blocks-so-they-stand-out-more/217825/28 "2022-06-07T12:48:42Z")
Independientemente de la solución, creo que hay un problema claro de UX con el diseño actual del `bloque de código`. El contraste es casi inexistente.
Para citar a @codinghorror, diría por el contrario que “la mayoría de los lugares en la web” no presentan este problema.
Ver GitHub:
o Slack:
o incluso Notion
Argumentaría que tanto el subrayado verde como el resaltado tienen el problema exactamente opuesto con un contraste innecesariamente muy alto, pero eso es más una cuestión de gusto que un problema de UX.
¿Qué tal implementar el enfoque de GitHub con un fondo gris más oscuro y algo de relleno?
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [8 Junio, 2022 00:23 UTC](https://meta.discourse.org/t/change-styling-of-inline-code-blocks-so-they-stand-out-more/217825/29 "2022-06-08T00:23:29Z")
Donde esto se complica es abogar por un cambio enorme en cada instancia de Discourse, muchas de las cuales están acostumbradas al estilo suave actual. Este es un movimiento de queso importante.
La solución de simplemente agregar CSS ya existe para la mayoría de las instalaciones.
[Página siguiente](https://meta.discourse.org/t/change-styling-of-inline-code-blocks-so-they-stand-out-more/217825.md?page=2)