 |
Resumen | Custom Code te permite personalizar la fuente y los colores para el código compartido en el sitio. |
 |
Vista previa | Vista previa en Discourse Theme Creator |
 |
Enlace al repositorio | https://github.com/discourse/discourse-custom-code |
 |
¿Nuevo en los temas de Discourse? | Guía básica para usar temas de Discourse |
Instala este componente de tema
Funciones
Por lo general, las fuentes utilizadas para escribir código forman parte de la familia monospace. Las fuentes más conocidas son:
(Dicho esto, esto no impide que nadie experimente con las fuentes más dispares.)
Para cambiar la fuente, ve a https://fonts.google.com
-
elige la fuente que quieras usar
-
y personalízala
-
Selecciona EMBED y copia la cadena relativa a la fuente de la familia (1) dentro de la configuración del tema
Font
-
Copia y pega la cadena relativa a CSS (2) dentro de la configuración del tema
font-family(no añadas el carácter;al final de la cadena).
El resto de configuraciones deberían ser suficientemente claras.
Las configuraciones de este componente se dividen entre el tema light (claro) y dark (oscuro). Si usas ambos, recuerda añadir el componente a ambos temas.
Configuraciones
| Nombre | Descripción |
|---|---|
| font | Selecciona una nueva fuente de Google Font. Dependiendo de la elegida, puedes personalizarla aún más, por ejemplo Sarabun:300,400,500 . Si no se establece, se aplicará la fuente predeterminada. |
| font size | Especifica el tamaño de la fuente a utilizar. Si no se establece, se aplicará la fuente predeterminada. |
| font family | Especifica la fuente a utilizar. Si no se establece, se aplicará la fuente predeterminada. |
| border radius | Selecciona el radio del borde para tu código. El valor predeterminado es 0px. |
| hljs light | Tema claro. Elige el color para el texto. |
| code light | Tema claro. Elige el color para el código. |
| code background light | Tema claro. Elige el color de fondo para el código. |
| comment light | Tema claro. Elige el color para el comentario y doctag. |
| title light | Tema claro. Elige el color para el título, el nombre y meta. |
| string light | Tema claro. Elige el color para la cadena. |
| number light | Tema claro. Elige el color para el número. |
| keyword light | Tema claro. Elige el color para la palabra clave, subst, request y status. |
| class title light | Tema claro. Elige el color para el título dentro del elemento de clase. |
| tag light | Tema claro. Elige el color para la etiqueta. |
| attribute light | Tema claro. Elige el color para el atributo. |
| symbol light | Tema claro. Elige el color para el símbolo. |
| hljs dark | Tema oscuro. Elige el color para el texto. |
| code dark | Tema oscuro. Elige el color para el código. |
| code background dark | Tema oscuro. Elige el color de fondo para el código. |
| comment dark | Tema oscuro. Elige el color para el comentario. |
| title dark | Tema oscuro. Elige el color para el título, el nombre y meta. |
| string dark | Tema oscuro. Elige el color para la cadena. |
| number dark | Tema oscuro. Elige el color para el número. |
| keyword dark | Tema oscuro. Elige el color para la palabra clave, subst, request y status. |
| class title dark | Tema oscuro. Elige el color para el título dentro del elemento de clase. |
| tag dark | Tema oscuro. Elige el color para la etiqueta. |
| attribute dark | Tema oscuro. Elige el color para el atributo. |
| symbol dark | Tema oscuro. Elige el color para el símbolo. |
¿Alojado por nosotros? Los componentes de tema están disponibles para su uso en nuestros planes Standard, Business y Enterprise.