Codeblock Theme-Auswahl

:discourse2: Zusammenfassung Codeblock Theme Picker ermöglicht es Ihnen, das in Codeblöcken verwendete Design einfach zu ändern.
:eyeglasses: Vorschau Vorschau im Discourse Theme Creator
:hammer_and_wrench: Link zum Repository https://github.com/discourse/hljs-theme-picker
:open_book: Neu bei Discourse Themes? Anfängerleitfaden zur Verwendung von Discourse Themes

Dieses Theme-Modul installieren

Funktionen

Dies ist nur eine Auswahl der verfügbaren Optionen. Dieses Modul enthält alle 90 Optionen, die im hljs-Repository angeboten werden.

:information_source: Obwohl alle Optionen in diesem Modul enthalten sind, wird nur die von Ihnen ausgewählte Option geladen. Es entsteht also kein Overhead.

Wie man es verwendet

Aufgrund der Art und Weise, wie dieses Modul eingebunden ist, ist eine kleine Änderung an einer Ihrer Site-Einstellungen erforderlich.

  1. Gehen Sie zu your.site.com/admin/site_settings/
  2. Suchen Sie nach theme_authorized_extensions
  3. Fügen Sie css zu dieser Liste hinzu.

So wie hier:

:warning: Sie müssen dies tun, bevor Sie das Modul installieren, sonst funktioniert es nicht.

Sobald dies erledigt ist, können Sie das Modul wie jedes andere Modul installieren.

Einstellungen

Name Beschreibung
hljs theme Wählen Sie das Design aus, das Codeblöcke verwenden sollen. Sie können die hljs-Demo-Seite besuchen, um die Designs vorab zu betrachten.
hljs dark match Lade das dunkle Farbschema, falls verfügbar.

Wenn Sie sehen möchten, wie die Optionen aussehen, schauen Sie hier vorbei: We're not a CDN - highlight.js

Sobald Sie sich für ein hljs-Theme entschieden haben, können Sie im Dropdown-Menü nach dem gewünschten Theme suchen und die Einstellung speichern. Sie müssen die Seite neu laden, damit alles funktioniert.

Credits

Alle im Modul enthaltenen hljs-Themes enthalten Urheberrechtsinformationen in ihren jeweiligen Dateien. Die Liste aller dieser Autoren (:heart:) ist zu groß, um hier hinzugefügt zu werden, aber Sie können sie hier einsehen.


:discourse2: Von uns gehostet? Theme-Komponenten können in unseren Standard-, Business- und Enterprise-Plänen verwendet werden.

42 „Gefällt mir“

Dieses Theme ist sehr nützlich und läuft seit langer Zeit auf meiner Website. Allerdings habe ich plötzlich festgestellt, dass es ein Problem mit Firefox gibt. Die benutzerdefinierte CSS-Datei wird durch den folgenden Header blockiert: X-Content-Type-Options: nosniff. In der Konsole wird angezeigt, dass der MIME-Typ der CSS-Datei text/html ist. Unabhängig davon, welches Theme ich wähle, tritt das Problem weiterhin in Firefox auf, während Chrome problemlos funktioniert.

Diese Super-Theme-Komponente wäre noch besser, wenn der ausgewählte Codeblock-Stil auch als Benutzerpräferenz wählbar wäre.

5 „Gefällt mir“

Zustimmung. Das wäre als Benutzereinstellung sehr cool.

Gibt es eine Möglichkeit, Zeilennummern anzuzeigen?

Tolle Theme-Komponente.

Eine Frage: Auf der highlight.js-Demo gibt es 242 Themes. Zum Beispiel „Github Dark Dimmed", wie im angehängten Bild zu sehen.

Gibt es eine Möglichkeit, dieses Problem zu lösen? Vielen Dank für den Rat.

Leider ist das etwas kompliziert.

Discourse verwendet die Version 10.6.0 von highlight-js. Die meisten derzeit fehlenden zusätzlichen Themes – insbesondere die base16-Themes – erfordern Version 11.0.

Das Problem ist, dass diese Version einige Breaking Changes und Deprecations einführt. Schauen Sie sich dies hier an:

Release Version 11 · highlightjs/highlight.js · GitHub

Das bedeutet, dass die aktuellen Optionen vorerst gleich bleiben. Zuerst muss die highlight-js-Version in tests-passed in Discourse aktualisiert werden. Anschließend müssten wir auf ein stabiles Release warten. Eine Aktualisierung der Themes (sogar der aktuellen) würde uns in einen schlechten Zustand versetzen, bei dem nur geraten werden kann, ob das Theme auf Ihrer Seite ordnungsgemäß funktioniert oder nicht.

4 „Gefällt mir“

Diese Komponente scheint in den neuesten Betas fehlerhaft zu sein – die Hervorhebung funktioniert nicht mehr richtig, wenn sie installiert ist. Ich habe die Komponente aus den Themes entfernt und es funktionierte wieder – ich kann nur nicht mehr das Hervorhebungstheme auswählen.

2 „Gefällt mir“

Bestätigen Sie, dass die Syntaxhervorhebung auch hier auf der neuesten Beta-Version fehlerhaft ist

@Falco hat gerade einen Fix für diese Komponente zusammengeführt: DEV: Update highlight.js to version 11 by xfalcox · Pull Request #3 · discourse/hljs-theme-picker · GitHub

Dies beinhaltet ein Update auf highlight.js Version 11 Themes (core wurde ebenfalls auf highlight.js Version 11 aktualisiert) und Fixes für Styles, denen die richtige Spezifität fehlte.

2 „Gefällt mir“

Ich habe diese Fehlermeldung erhalten, als ich versucht habe, die Komponente zu installieren

Fehler beim Erstellen des Upload-Assets: a11y-dark. Originaldateiname Entschuldigung, die Datei, die Sie hochladen möchten, ist nicht autorisiert (autorisierte Erweiterungen: wasm, jpg, jpeg, png, woff, woff2, svg, eot, ttf, otf, gif, webp, avif, js).

Hast du das hier gemacht :point_down:

1 „Gefällt mir“

Oh nein, das werde ich tun :umarmungen:

1 „Gefällt mir“

Ich habe gerade diese Theme-Komponente gefunden – ich bin so froh, dass es sie gibt! Mir ist aufgefallen, dass die Einstellung hljs dark match anscheinend nicht funktioniert.

Zum Beispiel haben wir hljs theme auf atom-one-light eingestellt (wofür es auch atom-one-dark gibt).

Beim Aktualisieren wird atom-one-light im Dunkelmodus übernommen, aber der Codeblock wechselt nicht zu Dunkel, wenn zum Dunkelmodus gewechselt wird – er bleibt hell.


Ich habe diese Fehlermeldung bei der Installation von Theme-Komponenten erhalten und hoffe, dass mir jemand aus der Community helfen kann, sie zu beheben.

Haben Sie css zur Liste der zulässigen Theme-Erweiterungen hinzugefügt?

1 „Gefällt mir“

Danke, es funktioniert ^^

1 „Gefällt mir“

Hinweis:

Es sollte sein:

Es scheint, dass diese Theme-Komponente in der neuesten Version defekt ist.

Ich habe bereits css zur Einstellung theme_authorized_extensions hinzugefügt und versucht, die Komponente neu zu installieren, aber die Stilvorlagen für Codeblöcke werden immer noch nicht angewendet.

Könnten Sie dies bitte überprüfen? Danke.