Números de linha em blocos de código

[Lilly (Lillian)]

	Resumo	Adiciona números de linha aos blocos de código multilinha em publicações
	Visualização	Visualização no Discourse Theme Creator
	Repositório	https://github.com/Lillinator/code-block-line-numbers
	Guia de Instalação	Como instalar um tema ou componente de tema
	Novo em Temas do Discourse?	Guia para iniciantes sobre o uso de Temas do Discourse

Instale este componente de tema

Descrição

Este é um componente de tema simples que adiciona números de linha aos blocos de código nas publicações do Discourse. Ele não adicionará números de linha para código em linha, blocos com menos de 2 linhas ou blocos de código citados. Ele também ignora o código onebox do GitHub. Além disso, o componente permitirá que você altere o tamanho da fonte e adicione um título de cabeçalho que aparecerá antes da linguagem do código (se for especificada após a primeira cerca de código).

Obrigado ao @Don pelo ótimo trabalho nisso também.

Funciona nas visualizações de desktop e mobile.

Modo escuro, com título:

Modo claro, sem título - no visualizador:

Resultado da publicação:

Há duas configurações.

Configuração	Descrição
título do cabeçalho do bloco de código	adiciona um título de cabeçalho de texto aos blocos de código antes da linguagem do código, se especificado (deixe em branco para nenhum)
tamanho do texto do bloco de código	tamanho do texto em px para blocos de código (deixe em branco para o padrão)

---

Nota: se você estiver usando CSS para envolver blocos de código em seu fórum, este componente contará o envolvimento.

[Jagster (Jakke Flemming)]

Sem tentar, mas ao copiar, esses números de linha não seguem, certo?

[Lilly (Lillian)]

Sim, não funcionam em blocos de código entre aspas.

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

Por favor, adicione a opção de escolher tema escuro ou claro, pois minha página de discussão está definida como tema claro, mas o bloco de código está com personalização de tema escuro no estilo GitHub.

Este é o estado quando a página do Discourse usa um tema claro e o bloco de código está configurado para exibir no estilo GitHub escuro

---

Aqui também compartilho algumas personalizações sobre a exibição de blocos de código em minha página do Discourse.
Espero que seja útil para alguém e torne sua página do Discourse mais interessante

/*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);
        }
    }
    
}

Você pode consultar mais aqui.

[Lilly (Lillian)]

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]

Alguma chance de este recurso ser adicionado à linha principal do Discourse? O plano de hospedagem econômica que uso não suporta plugins discricionários e similares. E isso parece muito útil. Meus agradecimentos a @Lilly e outros desenvolvedores e testadores.

[merefield (Robert)]

Não é um plugin. É um Componente de Tema. Não acredito que você esteja restrito de usar Componentes de Tema?

[robbie.morrison]

@merefield Obrigado. Acabei de registrar um pedido de esclarecimento junto ao meu provedor e recebi um ticket. Se algo notável surgir, relatarei.

[robbie.morrison]

Este é realmente um assunto para administradores! Fui para \u003chttps://meta.discourse.org/t/code-block-line-numbers/330130\u003e, cliquei no botão azul “Instalar este componente de tema”, digitei o nome do meu fórum e, em seguida, confirmei essa ação na interface do meu fórum. Até agora, tudo bem.

Este recurso foi então listado como um Componente (acho que tecnicamente é um Componente de Tema) e relata a versão 0.0.2. Mas a caixa de diálogo sugere que este artefato é atualmente considerado um “componente não utilizado”. E testes simples usando a sintaxe das três crases ``` não renderizaram números de linha.

Preciso fazer algo mais? Agradeço antecipadamente.

[Lilly (Lillian)]

@robbie.morrison, por favor, leia a postagem do tópico (primeira postagem neste tópico) porque ela contém todas as informações de que você precisa, e também consulte estas instruções se estiver instalando componentes de tema em sua instância.

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

Preciso fazer mais alguma coisa?

Sim. Adicione o Componente a um(s) Tema(s) (Caso contrário, ele permanecerá “Não utilizado”) e ative o Tema, se ele ainda não estiver ativo.

[robbie.morrison]

@merefield @Lilly Muito obrigado. Eu precisava adicionar este componente de tema ao meu tema "padrão". Conforme abordado aqui: adicionando componentes a um tema. E funciona (observando que eu já havia adicionado a captura de tela errada anteriormente):

Alguns comentários sobre a documentação. A localização correta é, acredito: Componentes ⯈ Personalizar ⯈ Temas. E a seção sobre adicionar a temas (veja URL acima) soa um tanto mais discricionária do que realmente é. Talvez esta redação fosse melhor: "Você precisará adicionar explicitamente seu componente de tema a um tema antes que ele se torne operacional. Isso inclui o tema ‘padrão’."

Obrigado a todos pelo interesse e tempo. Também tenho um pequeno relatório de bug para minha próxima postagem.

[robbie.morrison]

Meu relatório de bug conforme prometido. O seguinte bloco de código do GitHub já estava numerado. Após instalar o componente de tema intitulado Discourse Code Block Line Numbers, as linhas em branco alternadas foram incluídas.

A postagem original está aqui. E a informação veio através de um URL simples. Mais sobre diagramas de Sankey na Wikipedia EN para os interessados!

Esclarecimento; por linhas em branco alternadas, quero dizer as linhas totalmente em branco, sem qualquer texto. A renderização anterior não estava espaçada dessa maneira.

[Lilly (Lillian)]

ah sim, o problema do número da linha do github. Vou dar uma olhada mais tarde esta semana quando tiver tempo e colocar uma condicional lá. obrigado!

[Lilly (Lillian)]

Fiz algumas melhorias neste componente e também adicionei algumas configurações para adicionar um título ao cabeçalho dos blocos de código e alterar o tamanho da fonte. Corrigi os problemas de formatação do Github onebox também (obrigado pela PR @gormus! ). Atualizei o OP e adicionei novas capturas de tela e um link para a visualização do criador de temas.

[Lilly (Lillian)]

Este componente foi atualizado novamente - corrigi um bug onde o título estava sendo exibido em diagramas Mermaid.

Além disso, o @Don fez um refatoramento do js, limpou parte do código e também adicionou uma formatação mais agradável, incluindo uma borda e a linguagem do código no cabeçalho, se especificada na postagem. (Obrigado Don ).

Descrição da OP e capturas de tela atualizadas.

[Yt.w]

Olá, este componente de tema reporta um erro como este

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

[Arkshine]

O mixin sticky foi removido do core em um PR recente.
Farei um PR!

---

Aí está:

DEV: Inline the sticky mixin

[Lilly (Lillian)]

mesclado. obrigado @Arkshine