Code-Block Zeilennummern

[Lilly (Lillian Louis)]

| | | |\n| - | - | - |\n| | Zusammenfassung | Fügt Zeilennummern zu mehrzeiligen Codeblöcken in Beiträgen hinzu |\n| | Vorschau | Vorschau im Discourse Theme Creator |\n| | Repository|https://github.com/Lillinator/code-block-line-numbers |\n| | Installationsanleitung | So installieren Sie ein Theme oder eine Theme-Komponente |\n| | Neu bei Discourse Themes? | Anfängerleitfaden zur Verwendung von Discourse Themes |\n\n\u003c!-- Füllen Sie "repoName" und "repoURL" für die automatische Installationsschaltfläche aus –\u003e\n\n[wrap=theme-install-button repoName="Component’s name" repoUrl="https://github.com/Lillinator/code-block-line-numbers\"]\nInstallieren Sie diese Theme-Komponente\n[/wrap]\n\n\u003c!-- Beschreiben Sie dieses Theme/diese Komponente in ein oder zwei Sätzen –\u003e\n\n### Beschreibung\nDies ist eine einfache Theme-Komponente, die Zeilennummern zu Codeblöcken in Discourse-Beiträgen hinzufügt. Sie fügt keine Zeilennummern für Inline-Code, Blöcke mit weniger als 2 Zeilen oder für zitierte Codeblöcke hinzu. Sie ignoriert auch Github-Onebox-Code. Außerdem ermöglicht die Komponente die Änderung der Schriftgröße und das Hinzufügen eines Header-Titels, der vor der Code-Sprache erscheint (wenn diese nach dem ersten Code-Fence angegeben ist). \n\nDank gebührt auch @Don für die großartige Arbeit daran.\n\n:white_check_mark: Funktioniert in Desktop- und Mobilansichten. \n\nDunkler Modus mit Titel:\n\n

\n\n\nLichtmodus ohne Titel - im Vorschau-Tool:\n\n

\n\nPost-Ergebnis:\n\n

\n\n\nEs gibt zwei Einstellungen.\n\n|Einstellung | Beschreibung|\n|— | —|\n|code-block header title | Fügt einen Text-Header-Titel zu Codeblöcken hinzu, vor der Code-Sprache, falls angegeben (leer lassen für keinen)|\n|code-block text size | Textgröße in px für Codeblöcke (leer lassen für Standard)|\n\n

\n\n\n***\n\u003csmall\u003e:warning: Hinweis: Wenn Sie CSS verwenden, um Codeblöcke in Ihrem Forum umzubrechen, zählt diese Komponente den Umbruch. \u003c/small\u003e

[Jagster (Jakke Lehtonen)]

Ohne es zu versuchen, aber beim Kopieren folgen diese Zeilennummern nicht, oder?

[Lilly (Lillian Louis)]

Nein, die funktionieren nicht in zitierten Codeblöcken.

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

Bitte fügen Sie die Option hinzu, ein dunkles oder helles Thema zu wählen, da meine Diskussionsseite standardmäßig ein helles Thema hat, aber im Codeblock ist es eine dunkle Themaanpassung im GitHub-Stil.

Dies ist der Zustand, wenn die Diskussionsseite ein helles Thema verwendet und der Codeblock so eingestellt ist, dass er im dunklen GitHub-Stil angezeigt wird.

---

Hier teile ich auch einige Anpassungen zur Anzeige von Codeblöcken auf meiner Diskussionsseite.
Ich hoffe, es wird jemandem nützlich sein und seine Diskussionsseite interessanter machen.

/*CSS Codeblock wie Terminal 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);
        }
    }
    
}

Sie können mehr unter hier nachschlagen.

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

Gibt es eine Chance, dass dieses Feature in die Discourse-Hauptlinie aufgenommen wird? Der Budget-Hosting-Plan, den ich verwende, unterstützt keine optionalen Plugins. Und dieses sieht sehr nützlich aus. Mein Dank geht an @Lilly und andere Entwickler und Tester.

[merefield (Robert)]

Es ist kein Plugin. Es ist eine Theme-Komponente. Ich glaube nicht, dass Sie von der Verwendung von Theme-Komponenten ausgeschlossen sind?

[robbie.morrison]

@merefield Danke. Ich habe gerade eine Klärungsanfrage bei meinem Anbieter eingereicht und eine Ticketnummer erhalten. Wenn etwas Bemerkenswertes auftritt, werde ich berichten.

[robbie.morrison]

Dies ist in der Tat eine Angelegenheit für Administratoren! Ich ging zu \u003chttps://meta.discourse.org/t/code-block-line-numbers/330130\u003e, klickte auf den blauen Button „Diese Theme-Komponente installieren“, gab den Namen meines Forums ein und bestätigte dann diese Aktion über meine Forums-Oberfläche. Soweit so gut.

Diese Funktion wurde dann als Komponente aufgeführt (ich schätze, es ist technisch gesehen eine Theme-Komponente) und meldet Version 0.0.2. Aber der Dialog legt nahe, dass dieses Artefakt derzeit als „Unbenutzte Komponente“ betrachtet wird. Und einfache Versuche mit der ```-Syntax mit drei Backticks zeigten keine Zeilennummern an.

Muss ich noch etwas tun? Danke im Voraus.

[Lilly (Lillian Louis)]

@robbie.morrison bitte lies den Thema-Post (den ersten Post in diesem Thema), da er alle benötigten Informationen enthält, und beziehe dich auch auf diese Anweisungen, wenn du Theme-Komponenten auf deiner Instanz installierst.

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

Muss ich noch etwas tun?

Ja. Fügen Sie die Komponente einem oder mehreren Themes hinzu (andernfalls bleibt sie „ungenutzt“) und aktivieren Sie das Theme, falls es noch nicht aktiv ist.

[robbie.morrison]

@merefield @Lilly Vielen Dank. Ich musste diese Themenkomponente zu meinem „Standard“-Thema hinzufügen. Wie hier beschrieben: Hinzufügen von Komponenten zu einem Thema. Und es funktioniert (ich bemerkte, dass ich zuvor das falsche Screenshot hinzugefügt hatte):

Ein paar Anmerkungen zur Dokumentation. Der richtige Ort ist meiner Meinung nach: Komponenten ⏵ Anpassen ⏵ Themen. Und der Abschnitt zum Hinzufügen zu Themen (siehe obige URL) klingt etwas unverbindlicher, als es ist. Vielleicht wäre diese Formulierung besser: „Sie müssen Ihre Themenkomponente explizit zu einem Thema hinzufügen, bevor sie einsatzbereit ist. Das schließt das „Standard“-Thema ein.“

Vielen Dank an alle für ihr Interesse und ihre Zeit. Ich habe auch einen kleinen Fehlerbericht für meine nächste Veröffentlichung.

[robbie.morrison]

Mein Fehlerbericht wie versprochen. Der folgende Codeblock von GitHub war bereits mit Zeilennummern versehen. Nach der Installation der Themenkomponente mit dem Titel Discourse Code Block Line Numbers wurden die abwechselnden Leerzeilen hinzugefügt.

Der ursprüngliche Beitrag ist hier. Und die Informationen kamen über eine einfache URL. Mehr über Sankey-Diagramme auf Wikipedia EN für Interessierte!

Klärung: Mit abwechselnden Leerzeilen meine ich die vollständig leeren Zeilen ohne jeglichen Text. Das frühere Rendering war nicht auf diese Weise mit Abständen versehen.

[Lilly (Lillian Louis)]

Ja, das GitHub-Zeilennummer-Problem. Ich werde es mir später diese Woche ansehen, wenn ich Zeit habe, und eine Bedingung einfügen. Danke!

[Lilly (Lillian Louis)]

Ich habe einige Verbesserungen an dieser Komponente vorgenommen und auch ein paar Einstellungen hinzugefügt, um einen Header-Titel für Codeblöcke hinzuzufügen und die Schriftgröße zu ändern. Die Formatierungsprobleme des Github Onebox wurden ebenfalls behoben (danke für den PR @gormus! ). OP aktualisiert und neue Screenshots sowie ein Link zur Vorschau des Theme-Erstellers hinzugefügt.

[Lilly (Lillian Louis)]

Diese Komponente wurde erneut aktualisiert – ich habe einen Fehler behoben, bei dem der Titel in Mermaid-Diagrammen angezeigt wurde.

Außerdem hat @Don ein wenig am js refaktoriert, etwas Code bereinigt und auch eine schönere Formatierung hinzugefügt, einschließlich eines Rahmens und der Code-Sprache in der Kopfzeile, falls sie im Beitrag angegeben ist. (Danke, Don ).

OP-Beschreibung und Screenshots aktualisiert.

[Yt.w]

Hallo, diese Theme-Komponente meldet mir diesen Fehler

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

[Arkshine]

Das sticky-Mixin wurde in einem kürzlichen PR aus dem Core entfernt.
Ich werde einen PR erstellen!

---

Da ist er:

DEV: Inline the sticky mixin

[Lilly (Lillian Louis)]

Zusammengeführt. Danke @Arkshine