Wie fügt man den Codeblöcken eine vertikale Scrollleiste hinzu?

Wenn lange Codes in den Codeblöcken sind, nimmt der Codeblock mehr Speicherplatz und erhöht die Artikellänge. Es ist gut, eine vertikale Scrollleiste für die Codeblöcke zu haben, wenn ihre Größe größer als ein bestimmtes Pixel ist. Schau dir die untenstehende Lösung an, um dies auf deiner Wissensdatenbank umzusetzen.

Lösung

Um die vertikale Scrollleiste in bestimmten Artikeln innerhalb von KB Site 1.0-Projekten anzuwenden

1. Füge in deinem Artikel das folgende Tag hinzu, für das du eine Scrollleiste in Codeblöcken haben möchtest.

   <div class="scroll">

2. Navigieren Sie im Wissensdatenbank-Portal zu Einstellungen () > Wissensdatenbank-Website > Website anpassen > benutzerdefiniertes CSS und JavaScript .

   

3. Klicken Sie im linken Navigationsbereich auf den CSS-Tab und fügen Sie den folgenden CSS-Ausschnitt ein:

   .scroll div.code-toolbar {
   height: 280px;
   overflow-x: hidden !important;
   overflow-y: auto !important;
   }

4. Geben Sie die gewünschte Pixelgröße ein.

5. Klicken Sie oben rechts auf Speichern .

   

Ergebnis

Vertikale Scrollleiste in allen Artikeln anzuwenden

1. Navigieren Sie im Wissensdatenbank-Portal zu Einstellungen () > Wissensdatenbank-Website > Website anpassen > benutzerdefiniertes CSS und JavaScript .

2. Klicken Sie im linken Navigationsbereich auf den CSS-Tab und fügen Sie den folgenden CSS-Ausschnitt ein:

.code-toolbar pre {
max-height: 300px;
}

article .code-toolbar {
    height: 280px;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

3. Geben Sie die gewünschte Pixelgröße ein.

4. Klicken Sie auf Speichern.

   HINWEIS

   Wenn du den obigen Snippet verwendest, wäre das obere Symbol der vertikalen Scrollleiste im Codeblock verborgen.

Ergebnis