Números de línea en el bloque de código

[Lilly (Lillian Louis)]

	Resumen	Añade números de línea a los bloques de código multilínea en las publicaciones
	Vista previa	Vista previa en Discourse Theme Creator
	Repositorio	https://github.com/Lillinator/code-block-line-numbers
	Guía de instalación	Cómo instalar un tema o componente de tema
	¿Nuevo en los temas de Discourse?	Guía para principiantes sobre el uso de temas de Discourse

Instalar este componente de tema

Descripción

Este es un simple componente de tema que añade números de línea a los bloques de código en las publicaciones de Discourse. No añadirá números de línea para código en línea, bloques de menos de 2 líneas, o a bloques de código citados. Tampoco tiene en cuenta el código de unbox de Github. Además, el componente te permitirá cambiar el tamaño de la fuente y añadir un título que aparecerá antes del lenguaje del código (si se especifica después de la primera valla de código).

Gracias a @Don por el gran trabajo en esto también.

Funciona en vistas de escritorio y móvil.

Modo oscuro, con título:

Modo claro, sin título - en el previsualizador:

Resultado de la publicación:

Hay dos configuraciones.

Configuración	Descripción
Título del encabezado del bloque de código	añade un título de texto a los bloques de código antes del lenguaje del código si se especifica (dejar en blanco para ninguno)
Tamaño del texto del bloque de código	tamaño del texto en px para los bloques de código (dejar en blanco para el predeterminado)

---

Nota: si estás usando CSS para envolver bloques de código en tu foro, este componente contará el envoltorio.

[Jagster (Jakke Lehtonen)]

Sin intentarlo, pero al copiar, esos números de línea no se copian, ¿verdad?

[Lilly (Lillian Louis)]

Sí, no funcionan en bloques de código entrecomillados.

[hoangphuctran93 (Hoàng Phúc Trần)]

Por favor, agregue la opción de elegir el tema oscuro o claro, ya que mi página de discusión se muestra en tema claro, pero el bloque de código tiene personalización de tema oscuro al estilo de GitHub.

Este es el estado cuando la página de Discourse usa un tema claro y el bloque de código está configurado para mostrarse en estilo oscuro de GitHub.

---

Aquí también comparto algunas personalizaciones sobre la visualización de bloques de código en mi página de Discourse.
Espero que sea útil para alguien y haga que su página de Discourse sea más interesante.

/*CSS Codeblock like terminar macos*/
.codeblock-buttons {
    box-shadow: 0px 0px 10px rgba(0,0,0,.4);
    border-radius: 7px 7px 0 0;
    display: flex;
    flex-direction: column;
    &:before{
        content:'Business Lab';
        display: grid;
        justify-content: center;
        font-family: var(--d-font-family--monospace);
        font-weight: bold;
        padding: 5px;
        background-color: #E8E6E8;
        color: black;
        order:1;
    }
    &:after{
        content:"";
        width: 12px;
        height: 12px;
        display: inline-block;
        border-radius: 15px;
        margin-left: 2px;
        border-width: 1px;
        border-style: solid;
        background: #EC6A5F;
        border-color: #D04E42;
        order:2;
        position: absolute;
        top: 10px;
        left: 5px;
    }
    & .codeblock-button-wrapper{
        right: .5rem !important;
        top: .25em !important;
        order:3;
        width: 100%;
        &:before{
            content:"";
            width: 12px;
            height: 12px;
            display: inline-block;
            border-radius: 15px;
            margin-left: 2px;
            border-width: 1px;
            border-style: solid;
            background: #F5C04F;
            border-color: #D6A13D;
            position: absolute;
            top: 6.5px;
            left: 30px;
        }
        &:after{
            content:"";
            width: 12px;
            height: 12px;
            display: inline-block;
            border-radius: 15px;
            margin-left: 2px;
            border-width: 1px;
            border-style: solid;
            background: #64CC57;
            border-color: #4EA73B;
            position: absolute;
            top: 6.5px;
            left: 48px;
        }
        & .btn.nohighlight{
            padding: .7em;
            float: right;
            &.copy-cmd{
                position: absolute;
                right: 0px;
            }
            &.fullscreen-cmd{
                position: absolute;
                right: 3.2em;
            }
            &.copy-cmd:not(.action-complete), &.fullscreen-cmd:not(.action-complete){
                opacity: 1;
                visibility: visible;
            }
        }
    }
    & code{
        order:4;
    }
}

/*CSS Discourse Code Block Line Numbers*/
code{
    &.lines-decorator{
        padding: 0px;
        &.lines-shadow{
            background-image: linear-gradient(to right, var(--github) 25%, transparent), linear-gradient(to left, var(--github) 25%, transparent), linear-gradient(to right, var(--github), transparent), linear-gradient(to left, var(--github), transparent);
        }
        &.lines-number:not(.lines-count-1):not(.lines-in-quote) span.lines-line::before{
            background-color: #263238;
            color: rgba(233, 237, 237, 1);
        }
    }
    
}

Puedes consultar más aquí.

[Lilly (Lillian Louis)]

Codeblock Theme Picker

Summary Codeblock Theme Picker will allow you to easily change the theme used in code blocks. Preview Preview on Discourse Theme Creator Repository Link https://github.com/discourse/hljs-theme-picker New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Features [Some examples of the colors available] This is just a handful of the available options. This component incl…

[robbie.morrison]

¿Hay alguna posibilidad de que esta función se agregue a la línea principal de Discourse? El plan de alojamiento económico que uso no admite complementos discrecionales y similares. Y esto parece muy útil. Mis agradecimientos a @Lilly y a otros desarrolladores y probadores.

[merefield (Robert)]

No es un plugin. Es un componente de tema. No creo que tengas restricciones para usar componentes de tema.

[robbie.morrison]

@merefield Gracias. Acabo de presentar una solicitud de aclaración a mi proveedor y me han emitido un ticket. Si surge algo notable, informaré.

[robbie.morrison]

¡Este es realmente un asunto para los administradores! Fui a \u003chttps://meta.discourse.org/t/code-block-line-numbers/330130\u003e, hice clic en el botón azul “Instalar este componente de tema”, ingresé el nombre de mi foro y luego confirmé esa acción desde mi interfaz de foro. Hasta aquí todo bien.

Esta función se incluyó entonces como un Componente (supongo que técnicamente es un Componente de Tema) y reporta la versión 0.0.2. Pero el diálogo sugiere que este artefacto se considera actualmente un “componente no utilizado”. Y las pruebas simples usando la sintaxis de tres comillas invertidas ``` no mostraron números de línea.

¿Hay algo más que deba hacer? Gracias de antemano.

[Lilly (Lillian Louis)]

@robbie.morrison lee la publicación del tema (la primera publicación de este tema) porque contiene toda la información que necesitas, y también consulta estas instrucciones si estás instalando componentes de temas en tu instancia.

Installing a theme or theme component

This is a guide for installing and managing themes and theme components in Discourse. Required user level: Administrator Installing and customizing themes can significantly improve the look and feel of your Discourse site. You can easily import and manage themes and their components through the Discourse admin panel. This guide covers: Importing new themes and theme components Adding theme components to a theme Managing automatic updates Additional resourc…

[merefield (Robert)]

@robbie.morrison

¿Hay algo más que deba hacer?

Sí. Añada el componente a un tema (o temas) (de lo contrario, permanecerá “sin usar”) y active el tema si aún no lo está.

[robbie.morrison]

@merefield @Lilly Muchas gracias. Necesitaba añadir este componente temático a mi tema “predeterminado”. Como se explica aquí: añadir componentes a un tema. Y funciona (señalando que antes había añadido la captura de pantalla incorrecta):

Un par de comentarios sobre la documentación. La ubicación correcta es, creo: Componentes ⯈ Personalizar ⯈ Temas. Y la sección sobre cómo añadir a los temas (ver URL arriba) suena algo más discrecional de lo que es. Quizás esta redacción sería mejor: “Necesitarás añadir explícitamente tu componente temático a un tema antes de que se ponga en funcionamiento. Esto incluye el tema ‘predeterminado’”.

Gracias a todos por vuestro interés y tiempo. También tengo un pequeño informe de error para mi próxima publicación.

[robbie.morrison]

Mi informe de error como prometí. El siguiente bloque de código de GitHub ya tenía numeradas las líneas. Después de instalar el componente de tema titulado Discourse Code Block Line Numbers, se incluyeron las líneas en blanco alternas.

La publicación original está aquí. Y la información llegó a través de una URL simple. Más sobre diagramas de Sankey en Wikipedia EN para aquellos interesados.

Aclaración: por líneas en blanco alternas me refiero a las líneas completamente en blanco sin ningún texto. La representación anterior no estaba espaciada de esta manera.

[Lilly (Lillian Louis)]

Ah sí, el problema del número de línea de GitHub. Lo revisaré más adelante esta semana cuando tenga tiempo y pondré una condición. ¡Gracias!

[Lilly (Lillian Louis)]

He realizado algunas mejoras en este componente y también he añadido un par de configuraciones para añadir un título de encabezado a los bloques de código y cambiar el tamaño de la fuente. También he corregido los problemas de formato de Github onebox (¡gracias por el PR @gormus! ). He actualizado el OP y he añadido nuevas capturas de pantalla y un enlace a la vista previa del creador de temas.

[Lilly (Lillian Louis)]

Este componente se ha actualizado de nuevo: corregí un error en el que el título se mostraba en los diagramas de Mermaid.

Además, @Don realizó una refactorización del js, limpió algo de código y también añadió un formato más agradable, incluyendo un borde y el idioma del código en la cabecera si se especifica en la publicación. (Gracias Don ).

Descripción de la OP y capturas de pantalla actualizadas.

[Yt.w]

Hola, este componente temático me informa un error como este

Error: Undefined mixin. ╷ 17 │ @include sticky; │ ^^^^^^^^^^^^^^^ ╵ line-numbers.scss 17:9 @import /var/www/discourse/common.scss 1:570 root stylesheet

[Arkshine]

El mixin sticky ha sido eliminado del núcleo en una PR reciente.
¡Haré una PR!

---

Aquí vamos:

DEV: Inline the sticky mixin

[Lilly (Lillian Louis)]

fusionado. gracias @Arkshine :sonrisa: