 |
Resumen | Custom Code te permite personalizar la fuente y los colores del 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 para principiantes para usar temas de Discourse |
Instalar este componente del tema
Características
Generalmente, 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 deseas usar
-
y personalízala
-
Selecciona EMBED y copia la cadena relativa a la familia de fuentes (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 agregues el carácter;al final de la cadena).
Todas las demás configuraciones deberían ser lo suficientemente claras.
Las configuraciones de este componente están divididas entre temas claros y oscuros. Si usas ambos, recuerda agregar el componente a ambos temas.
Configuración
| 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 usar. Si no se establece, se aplicará la fuente predeterminada. |
| font family | Especifica la fuente a usar. 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 del texto. |
| code light | Tema claro. Elige el color del código. |
| code background light | Tema claro. Elige el color de fondo del código. |
| comment light | Tema claro. Elige el color del comentario y doctag. |
| title light | Tema claro. Elige el color del título, nombre y meta. |
| string light | Tema claro. Elige el color de la cadena. |
| number light | Tema claro. Elige el color del número. |
| keyword light | Tema claro. Elige el color de la palabra clave, subst, request y status. |
| class title light | Tema claro. Elige el color del título dentro del elemento de clase. |
| tag light | Tema claro. Elige el color de la etiqueta. |
| attribute light | Tema claro. Elige el color del atributo. |
| symbol light | Tema claro. Elige el color del símbolo. |
| hljs dark | Tema oscuro. Elige el color del texto. |
| code dark | Tema oscuro. Elige el color del código. |
| code background dark | Tema oscuro. Elige el color de fondo del código. |
| comment dark | Tema oscuro. Elige el color del comentario. |
| title dark | Tema oscuro. Elige el color del título, nombre y meta. |
| string dark | Tema oscuro. Elige el color de la cadena. |
| number dark | Tema oscuro. Elige el color del número. |
| keyword dark | Tema oscuro. Elige el color de la palabra clave, subst, request y status. |
| class title dark | Tema oscuro. Elige el color del título dentro del elemento de clase. |
| tag dark | Tema oscuro. Elige el color de la etiqueta. |
| attribute dark | Tema oscuro. Elige el color del atributo. |
| symbol dark | Tema oscuro. Elige el color del símbolo. |
¿Alojado por nosotros? Los componentes de tema están disponibles para usar en nuestros planes Standard, Business y Enterprise.