Tengo un problema con el formato de los bloques de código en Discourse. Al publicar código Python, ciertas partes del código (como URL y rutas) se resaltan en rojo o se formatean de forma inesperada, como se muestra en la captura de pantalla a continuación:
Cuando publico código Python usando triple comilla invertida para bloques de código, partes específicas del texto (como guiones bajos en URL o rutas) se resaltan en rojo o se formatean incorrectamente.
He intentado escapar caracteres, usar entidades HTML y eliminar el resaltado de sintaxis al no especificar el idioma, pero el problema persiste.
Ejemplo de código
Aquí hay un fragmento del código que está causando problemas (Python):
No estoy familiarizado con el sistema de resaltado de sintaxis / la configuración en general, pero si solo quieres deshacerte del texto rojo, podrías usar CSS en el tema de tu sitio:
code.language-python span {
color: inherit;
}
El rojo se usa para indicar cadenas, por lo que si solo quisieras cambiar eso a un color diferente, podrías hacer algo como esto:
code.language-python span.hljs-string {
color: #FFF; /* Reemplazar con el color deseado */
}
Aparte del texto rojo, ¿hubo otras partes que se estén formateando incorrectamente?
Gracias por tu sugerencia, @bryce. Intentaré ajustar el CSS en el tema de nuestro sitio para solucionar el problema del texto rojo.
Intentaré ajustar el CSS en el tema de nuestro sitio para solucionar el problema del texto rojo.
Creo que el principal problema es que la fuente en mi captura de pantalla original no está formateada para parecer código; carece del estilo de fuente monoespaciada que se usa típicamente para los bloques de código. Idealmente, esperaba que el código pareciera más así, con la fuente y el color de fuente correctos:
¿Hay alguna manera de asegurar que el código se muestre en una fuente monoespaciada, similar a la de este ejemplo?
Aparte de esto, no he notado ningún otro problema de formato importante, pero seguiré probando y te informaré si surge algo más.
Los colores de resaltado se pueden cambiar anulando estas variables CSS:
--hljs-comment: Se usa para comentarios de código
--hljs-number: Se usa para valores numéricos en el código
--hljs-string: Se usa para valores de cadena en el código
--hljs-literal: Se usa para valores literales en el código
--hljs-tag: Se usa para etiquetas HTML/XML
--hljs-attribute: Se usa para atributos en etiquetas HTML/XML
--hljs-symbol: Se usa para símbolos en el código
--hljs-bg: Se usa para el color de fondo de los bloques de código
--hljs-builtin-name: Se usa para nombres de funciones integradas
Por ejemplo, para anular el color de la cadena:
:root {
--hljs-string: pink;
}
Parece que hljs (la biblioteca de resaltado utilizada) puede no admitir el resaltado de identificadores de Python como degirum en tu ejemplo, pero deberías poder acercarte bastante cambiando los otros colores.
En cuanto a la fuente, eso es extraño: los bloques de código deberían aparecer con una fuente monoespaciada por defecto. Te sugiero que revises tu tema para asegurarte de que nada se esté anulando allí.
Solo para aclarar, actualmente estamos utilizando el tema Predeterminado sin componentes adicionales, por lo que es extraño que la fuente monoespaciada no se esté aplicando por defecto a los bloques de código. No parece que nada la esté anulando.
Como referencia, estoy trabajando desde Chrome Versión 127.0.6533.100 en macOS 14.6.1.
La fuente se ve correcta y los enlaces están resaltados como se esperaba. Sin embargo, todavía estoy experimentando el problema en nuestra comunidad donde la fuente no se muestra correctamente y los enlaces no se resaltan como deberían.
No estoy seguro de por qué ocurre esta discrepancia.
Como referencia, aquí está el enlace a la página en nuestra comunidad.
Gracias a ambos por tomarse el tiempo de ayudarme con esto. Es bueno saber que la fuente se muestra como monoespaciada para otros.
Dado que no se muestra correctamente en mi extremo, podría ser un problema específico de mi configuración o entorno. Se muestra incorrectamente para mí tanto en Chrome como en Safari (ambas versiones más recientes). También se muestra incorrectamente para otros en mi organización en PC.
He acabo de comprobarlo desde un ordenador personal y el problema persiste también ahí. La fuente del código sigue sin mostrarse en monoespaciado y los enlaces no se resaltan correctamente.
Esto parece descartar un problema con mi configuración principal, ya que el problema es el mismo en diferentes dispositivos.
Acabo de comprobarlo en el modo seguro y el problema parece haberse resuelto allí: la fuente del código aparece en monoespaciado y los enlaces se resaltan correctamente.
Esto es confuso porque estamos utilizando el tema predeterminado sin componentes adicionales, por lo que no estoy seguro de qué podría estar causando el problema en el modo normal.
Eso es lo que esperaría. Esas cadenas están en un color diferente para que pueda decir rápidamente que son cadenas. ¿No se ve así en su editor de texto?
Creo que solo querrá cambiar SiteSetting.default_code_lang a “text” o “”. También hay una configuración highlighted_languages. Estoy bastante seguro de que aquí han cambiado el idioma predeterminado del código a algo como texto, así que
Dado que soy el administrador de la comunidad, mi objetivo es poder verlo como lo deberían ver los usuarios finales. Como puedes ver en el lado derecho, simplemente no se ve bien.
