Codeblock-Designauswahl

[Discourse]

||||
-|-|
| Zusammenfassung | Mit dem Codeblock Theme Picker können Sie das in Codeblöcken verwendete Thema ganz einfach ändern.
| | Vorschau | Vorschau im Discourse Theme Creator |
| Repository-Link | https://github.com/discourse/hljs-theme-picker
|Neu bei Discourse-Themes? | Einsteigeranleitung zur Verwendung von Discourse-Themes

Dieses Theme-Komponente installieren

Da es sich um eine von der Discourse-Team gepflegte offizielle Theme-Komponente handelt, können Support, Contribute > Bug, Contribute > UX und #contribute:feature-Anfragen in den jeweiligen Kategorien hier auf Meta gestellt und mit dem entsprechenden Tag der Theme-Komponente versehen werden. Klicken Sie auf einen der unten stehenden Links, um eine Anfrage zu starten.

 Support  Bug  UX  Feature

Funktionen

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

Obwohl alle Optionen in dieser Komponente enthalten sind, wird nur das von Ihnen ausgewählte Thema geladen. Es entsteht also kein Mehraufwand.

So verwenden Sie es

Aufgrund der Art und Weise, wie diese Komponente eingerichtet ist, ist eine kleine Änderung an einer Ihrer Site-Einstellungen erforderlich.

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

So sieht das aus:

Dies müssen Sie tun, bevor Sie die Komponente installieren, da sie sonst nicht funktioniert.

Sobald dies erledigt ist, können Sie die Komponente wie jede andere Komponente installieren.

Einstellungen

| Name | Beschreibung
|-|
| hljs theme | Wählen Sie das Thema aus, das für Codeblöcke verwendet werden soll. Sie können die hljs-Demoseite besuchen, um die Themen vorab anzusehen.
| hljs dark match | Laden Sie das dunkle Farbschema, falls verfügbar

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

Sobald Sie sich für ein hljs-Thema entschieden haben, können Sie in der Dropdown-Liste nach dem gewünschten Thema suchen und die Einstellung speichern. Sie müssen die Seite aktualisieren, damit alles funktioniert.

Credits

Alle hljs-Themen, die in dieser Komponente enthalten sind, verfügen über Urheberrechtsinformationen in ihren jeweiligen Dateien. Die Liste aller Autoren () ist zu groß, um sie hier aufzulisten, aber Sie können sie hier einsehen.

Von uns gehostet? Theme-Komponenten sind auf unseren Standard-, Business- und Enterprise-Plänen verfügbar.

[MuZhou233 (Mosarin)]

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.

[neounix (Dark Matter)]

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

[Zup]

Zustimmung. Das wäre als Benutzereinstellung sehr cool.

[Reaxgrim]

Gibt es eine Möglichkeit, Zeilennummern anzuzeigen?

[SkyLin]

@Johani

Diese Komponente enthält alle 90 Optionen, die im hljs-Repository angeboten werden.

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.

[Johani (Joe)]

@SkyLin

Auf der highlight.js-Demo gibt es 242 Themes.

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.

[vincentp (Vincent)]

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.

[erisdisqordia (eris)]

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

[pmusaraj (Penar Musaraj)]

@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.

[Dennis_P_Z]

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).

[JammyDodger]

Hast du das hier gemacht

@jordan-vidrine

Aufgrund der Art und Weise, wie diese Komponente verdrahtet ist, ist eine kleine Änderung an einer Ihrer Website-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:

Sie müssen dies tun, bevor Sie die Komponente installieren, sonst funktioniert sie nicht.

[Dennis_P_Z]

Oh nein, das werde ich tun :umarmungen:

[jordan-violet]

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.

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

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

[Firepup650 (Firepup Sixfifty)]

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

@jordan-vidrine

Aufgrund der Art und Weise, wie diese Komponente verbunden ist, ist eine kleine Änderung an einer Ihrer Website-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:

Sie müssen dies tun, bevor Sie die Komponente installieren, sonst funktioniert sie nicht.

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

Danke, es funktioniert ^^

[NateDhaliwal]

Hinweis:

@Discourse

besuchen Sie die hljs-Demoseite um

@Discourse

schauen Sie hier Wir sind kein CDN – highlight.js

Es sollte sein:

@yanokwa

der Link sollte Demo - highlight.js sein

[cnlanny]

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.