Selector de Tema para Codeblock

:discourse2: Resumen Codeblock Theme Picker te permitirá cambiar fácilmente el tema utilizado en los bloques de código.
:eyeglasses: Vista previa Vista previa en Discourse Theme Creator
:hammer_and_wrench: Enlace al repositorio https://github.com/discourse/hljs-theme-picker
:open_book: ¿Nuevo en Discourse Themes? Guía para principiantes sobre el uso de Discourse Themes

Instalar este componente de tema

Características

Esto es solo una pequeña muestra de las opciones disponibles. Este componente incluye todas las 90 opciones ofrecidas en el repositorio de hljs.

:information_source: Aunque todas las opciones están incluidas en este componente, solo se cargará la que elijas. Por lo tanto, no hay sobrecarga.

Cómo usarlo

Debido a la forma en que está configurado este componente, requerirá un pequeño cambio en una de las configuraciones de tu sitio.

  1. Ve a tu.sitio.com/admin/site_settings/
  2. Busca theme_authorized_extensions
  3. Agrega css a esa lista.

Así:

:warning: Debes hacer esto antes de instalar el componente, de lo contrario no funcionará.

Una vez hecho esto, puedes instalar el componente como cualquier otro componente.

Configuración

Nombre Descripción
hljs theme Selecciona el tema que deseas que usen los bloques de código. Puedes visitar la página de demostración de hljs para previsualizar los temas
hljs dark match Cargar el esquema de colores oscuro si está disponible

Si necesitas ver cómo se ven las opciones, echa un vistazo aquí We're not a CDN - highlight.js

Una vez que decidas qué tema de hljs usar, puedes buscar en el menú desplegable el que deseas y guardar la configuración. Necesitarás recargar la página para que todo comience a funcionar.

Créditos

Todos los temas de hljs incluidos en este componente tienen información de derechos de autor en sus archivos respectivos. La lista de todos esos autores (:heart:) es demasiado grande para incluirla aquí, pero puedes verlos aquí.


:discourse2: ¿Alojado por nosotros? Los componentes de tema están disponibles para su uso en nuestros planes Estándar, Empresarial y de Empresa.

42 Me gusta

Este tema es muy útil y lleva mucho tiempo funcionando en mi sitio. Sin embargo, de repente descubrí que tiene un problema en Firefox. El archivo CSS personalizado está bloqueado por la siguiente cabecera: X-Content-Type-Options: nosniff. La consola muestra que el tipo MIME del archivo CSS es text/html. No importa qué tema elija, el problema sigue ocurriendo en Firefox, pero en Chrome funciona correctamente.

Este componente de tema super sería aún mejor si el estilo del bloque de código seleccionado también pudiera seleccionarse como una preferencia de usuario.

5 Me gusta

Segundo. Sería genial como preferencia de usuario.

¿Hay alguna forma de mostrar los números de línea?

Gran componente de tema.

Una pregunta: hay 242 temas en la demostración de highlight.js. Por ejemplo, “Github Dark Dimmed”, como se muestra en la imagen adjunta.

¿Existe alguna manera de resolver este problema? Gracias por sus consejos.

Lamentablemente, esto es un poco complejo.

Discourse ejecuta la versión 10.6.0 de highlight-js. La mayoría de los temas adicionales que faltan actualmente (como base16) requieren la versión 11.0.

El problema es que esa versión introduce algunos cambios disruptivos y deprecaciones. Echa un vistazo aquí:

Por lo tanto, esto significa que las opciones actuales se mantendrán igual por un tiempo. Primero, es necesario actualizar la versión de highlight-js en tests-passed de Discourse. Luego, deberíamos esperar a una versión estable. Actualizar los temas (incluso los actuales) nos pondría en una situación desfavorable, donde sería difícil adivinar si el tema funciona correctamente en tu sitio o no.

4 Me gusta

Este componente parece estar roto en las últimas betas: el resaltado ya no funciona correctamente cuando está instalado. Eliminé el componente de los temas y volvió a funcionar; simplemente no puedo elegir el tema de resaltado.

2 Me gusta

confirmar que el resaltado de sintaxis también está roto aquí en la última beta

@Falco acaba de fusionar una corrección para este componente: DEV: Update highlight.js to version 11 by xfalcox · Pull Request #3 · discourse/hljs-theme-picker · GitHub

Incluye una actualización a los temas de highlight.js versión 11 (el núcleo también se ha actualizado a highlight.js versión 11) y correcciones para estilos que carecían de la especificidad correcta.

2 Me gusta

Recibí este error cuando intenté instalar el componente

Error creando activo de carga: a11y-dark. Nombre de archivo original Lo sentimos, el archivo que intenta cargar no está autorizado (extensiones autorizadas: wasm, jpg, jpeg, png, woff, woff2, svg, eot, ttf, otf, gif, webp, avif, js).

¿Hiciste esta parte? :point_down:

1 me gusta

Oh no, voy a hacer eso :hugs:

1 me gusta

¡Acabo de encontrar este componente temático, me alegra mucho que exista! He notado que la configuración hljs dark match no parece funcionar.

Por ejemplo, tenemos hljs theme configurado en atom-one-light (al cual también existe atom-one-dark).

Al actualizar, atom-one-light se aplica mientras está en modo oscuro, pero el bloque de código no cambia a oscuro al cambiar a modo oscuro, se queda en claro.


Recibí este mensaje de error al instalar componentes de temas, espero que alguien pueda guiar a la comunidad sobre cómo solucionarlos.

¿Agregaste css a la lista de extensiones de temas permitidas?

1 me gusta

Gracias, funciona ^^

1 me gusta

Nota:

Debería ser:

Parece que este componente de tema está roto en la última versión.

Ya he añadido css a la configuración theme_authorized_extensions e intenté reinstalar el componente, pero los estilos de los bloques de código todavía no se aplican.

¿Podrías verificarlo? Gracias.