Numeri di riga del blocco di codice

[Lilly (Lillian Louis)]

	Riepilogo	Aggiunge numeri di riga ai blocchi di codice multi-linea nei post
	Anteprima	Anteprima su Discourse Theme Creator
	Repository	https://github.com/Lillinator/code-block-line-numbers
	Guida all’installazione	Come installare un tema o un componente tema
	Nuovo per i temi Discourse?	Guida per principianti all’uso dei temi Discourse

Installa questo componente tema

Descrizione

Questo è un semplice componente tema che aggiunge numeri di riga ai blocchi di codice nei post di Discourse. Non aggiungerà numeri di riga per il codice inline, blocchi di meno di 2 righe o blocchi di codice citati. Ignora anche il codice onebox di Github. Inoltre, il componente ti consentirà di modificare la dimensione del carattere e aggiungere un titolo di intestazione che apparirà prima del linguaggio del codice (se specificato dopo il primo fence di codice).

Grazie anche a @Don per l’ottimo lavoro svolto.

Funziona nelle visualizzazioni desktop e mobile.

Modalità scura, con titolo:

Modalità chiara, senza titolo - nell’anteprima:

Risultato del post:

Ci sono due impostazioni.

Impostazione	Descrizione
code-block header title	aggiunge un titolo di intestazione di testo ai blocchi di codice prima del linguaggio del codice, se specificato (lasciare vuoto per nessuno)
code-block text size	dimensione del testo in px per i blocchi di codice (lasciare vuoto per il predefinito)

---

Nota: se stai usando CSS per racchiudere blocchi di codice sul tuo forum, questo componente conterà il wrap.

[Jagster (Jakke Lehtonen)]

Senza provare, ma quando si copia, quei numeri di riga non seguono, giusto?

[Lilly (Lillian Louis)]

Sì, no, non funzionano nei codeblock citati.

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

Si prega di aggiungere l’opzione per scegliere il tema scuro o chiaro, perché la mia pagina di discussione è impostata sul tema chiaro, ma il blocco di codice ha una personalizzazione del tema scuro in stile GitHub.

Questo è lo stato quando la pagina di discourse utilizza un tema chiaro e il codeblock è impostato per essere visualizzato in stile GitHub scuro

---

Qui condivido anche alcune personalizzazioni sulla visualizzazione del codeblock nella mia pagina di discourse.
Spero che sia utile a qualcuno e renda la sua pagina di discourse più 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);
        }
    }

}

Puoi fare riferimento a qui per ulteriori informazioni.

[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]

Ci sono possibilità che questa funzionalità venga aggiunta alla linea principale di discourse? Il piano di hosting economico che uso non supporta plugin discrezionali e simili. E questa sembra molto utile. I miei ringraziamenti a @Lilly e agli altri sviluppatori e tester.

[merefield (Robert)]

Non è un plugin. È un componente del tema. Non credo che tu sia limitato nell’uso dei componenti del tema?

[robbie.morrison]

@merefield Grazie. Ho appena presentato una richiesta di chiarimento al mio provider e mi è stato assegnato un ticket. Se dovessero emergere novità degne di nota, riferirò.

[robbie.morrison]

Questo è davvero un problema per gli amministratori! Sono andato su \u003chttps://meta.discourse.org/t/code-block-line-numbers/330130\u003e, ho cliccato sul pulsante blu “Installa questo componente del tema”, ho inserito il nome del mio forum e poi ho confermato quell’azione dalla mia interfaccia del forum. Fin qui tutto bene.

Questa funzionalità è stata quindi elencata come Componente (immagino sia tecnicamente un Componente del tema) e riporta la versione 0.0.2. Ma la finestra di dialogo suggerisce che questo artefatto è attualmente considerato un “componente non utilizzato”. E semplici prove utilizzando la sintassi dei tre backtick ``` non hanno visualizzato i numeri di riga.

C’è qualcos’altro che devo fare? Grazie in anticipo.

[Lilly (Lillian Louis)]

@robbie.morrison leggi il post iniziale (il primo post in questo argomento) perché contiene tutte le informazioni di cui hai bisogno, e fai anche riferimento a queste istruzioni se stai installando componenti del tema sulla tua istanza.

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

C’è qualcos’altro che devo fare?

Sì. Aggiungi il componente a uno o più temi (altrimenti rimarrà “Non utilizzato”) e rendi attivo il tema se non lo è già.

[robbie.morrison]

@merefield @Lilly Molte grazie. Ho dovuto aggiungere questo componente tematico al mio tema “predefinito”. Come spiegato qui: aggiungere componenti a un tema. E funziona (notando che avevo precedentemente aggiunto lo screenshot sbagliato):

Un paio di commenti sulla documentazione. La posizione corretta è, credo: Componenti ⯈ Personalizza ⯈ Temi. E la sezione sull’aggiunta ai temi (vedi URL sopra) suona un po’ più discrezionale di quanto non sia. Forse questa formulazione sarebbe migliore: “Dovrai aggiungere esplicitamente il tuo componente tematico a un tema prima che diventi operativo. Ciò include il tema ‘predefinito’”.

Grazie a tutti per il vostro interesse e tempo. Ho anche un piccolo bug report per il mio prossimo post.

[robbie.morrison]

Il mio bug report come promesso. Il seguente blocco di codice da GitHub era già numerato. Dopo aver installato il componente del tema intitolato Discourse Code Block Line Numbers, sono state incluse le righe vuote alternate.

Il post originale è qui. E le informazioni sono arrivate tramite un semplice URL. Altro sui diagrammi di Sankey su Wikipedia EN per chi fosse interessato!

Chiarimento: per righe vuote alternate intendo le righe completamente vuote senza alcun testo. Il rendering precedente non era spaziato in questo modo.

[Lilly (Lillian Louis)]

ah sì il problema del numero di riga di github. Darò un’occhiata più tardi questa settimana quando avrò un po’ di tempo e ci metterò una condizione. grazie!

[Lilly (Lillian Louis)]

Ho apportato alcuni miglioramenti a questo componente e ho anche aggiunto un paio di impostazioni per aggiungere un titolo all’intestazione ai blocchi di codice e per cambiare la dimensione del carattere. Ho anche risolto i problemi di formattazione del onebox di Github (grazie per la PR @gormus! ). Ho aggiornato l’OP e aggiunto nuovi screenshot e un link all’anteprima del creatore del tema.

[Lilly (Lillian Louis)]

Questo componente è stato nuovamente aggiornato: ho corretto un bug che mostrava il titolo sui diagrammi Mermaid.

Inoltre, @Don ha apportato una piccola riscrittura del js, ha ripulito del codice e ha aggiunto una formattazione più gradevole, inclusi un bordo e la lingua del codice nell’intestazione se specificata nel post. (Grazie Don ).

Descrizione OP e screenshot aggiornati.

[Yt.w]

Ciao, questo componente del tema mi segnala un errore come questo

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

[Arkshine]

Il mixin sticky è stato rimosso dal core in una PR recente.
Farò una PR!

---

Ecco fatto:

DEV: Inline the sticky mixin

[Lilly (Lillian Louis)]

unito. grazie @Arkshine