Sélecteur de thème Codeblock

:discourse2: Résumé Sélecteur de thème pour les blocs de code vous permettra de modifier facilement le thème utilisé dans les blocs de code.
:eyeglasses: Aperçu Aperçu sur Discourse Theme Creator
:hammer_and_wrench: Lien vers le dépôt https://github.com/discourse/hljs-theme-picker
:open_book: Nouveau dans les thèmes Discourse ? Guide de démarrage pour utiliser les thèmes Discourse

Installer ce composant de thème

Fonctionnalités

Ce n’est qu’un petit échantillon des options disponibles. Ce composant inclut toutes les 90 options proposées dans le dépôt hljs.

:information_source: Bien que toutes les options soient incluses dans ce composant, seul celui que vous choisissez sera chargé. Il n’y a donc aucune surcharge.

Comment l’utiliser

En raison de la manière dont ce composant est configuré, une petite modification de l’un de vos paramètres de site sera nécessaire.

  1. Rendez-vous sur votre.site.com/admin/site_settings/
  2. Recherchez theme_authorized_extensions
  3. Ajoutez css à cette liste.

Comme ceci :

:warning: Vous devez effectuer cette étape avant d’installer le composant, sinon cela ne fonctionnera pas.

Une fois cela fait, vous pouvez installer le composant comme n’importe quel autre composant.

Paramètres

Nom Description
thème hljs Sélectionnez le thème que vous souhaitez utiliser pour les blocs de code. Vous pouvez consulter la page de démonstration hljs pour prévisualiser les thèmes
correspondance sombre hljs Charger le schéma de couleurs sombre si disponible

Si vous avez besoin de voir à quoi ressemblent les options, consultez cette page : We're not a CDN - highlight.js

Une fois que vous avez décidé du thème hljs à utiliser, vous pouvez rechercher celui que vous souhaitez dans la liste déroulante et enregistrer le paramètre. Vous devrez rafraîchir la page pour que tout commence à fonctionner.

Crédits

Tous les thèmes hljs inclus dans ce composant contiennent des informations sur les droits d’auteur dans leurs fichiers respectifs. La liste de tous ces auteurs (:heart:) est trop longue pour être ajoutée ici, mais vous pouvez les voir ici.


:discourse2: Hébergé par nous ? Les composants de thème sont disponibles pour une utilisation sur nos plans Standard, Business et Enterprise.

42 « J'aime »

Ce thème est très utile et fonctionne sur mon site depuis longtemps. Cependant, j’ai soudainement constaté qu’il présentait un problème sur Firefox. Le fichier CSS personnalisé est bloqué par l’en-tête suivant : X-Content-Type-Options: nosniff. La console indique que le type MIME du fichier CSS est text/html. Peu importe le thème que je choisis, le problème persiste sur Firefox, tandis que Chrome fonctionne correctement.

Ce composant de super-thème serait encore meilleur si le style de bloc de code sélectionné pouvait également être choisi comme préférence utilisateur.

5 « J'aime »

Idem. Ce serait super cool si c’était une préférence utilisateur.

Y a-t-il un moyen d’afficher les numéros de ligne ?

Excellent composant de thème.

Une question : il y a 242 thèmes sur la démo de highlight.js. Par exemple, « Github Dark Dimmed » comme sur l’image ci-jointe.

Y a-t-il un moyen de résoudre ce problème ? Merci pour vos conseils.

Malheureusement, c’est un peu complexe.

Discourse utilise la version 10.6.0 de highlight-js. La plupart des thèmes supplémentaires manquants actuellement, notamment ceux de la série base16, nécessitent la version 11.0.

Le problème est que cette version introduit des changements cassants et des dépréciations. Consultez les détails ici :

Cela signifie donc que les options actuelles resteront inchangées pendant un certain temps. Tout d’abord, la version de highlight-js doit être mise à jour dans tests-passed de Discourse. Ensuite, il faudra attendre une version stable. Mettre à jour les thèmes (même ceux déjà disponibles) nous placerait dans une situation précaire où il serait impossible de savoir avec certitude si un thème fonctionne correctement sur votre site.

4 « J'aime »

Ce composant semble être défectueux dans les dernières bêtas - la mise en surbrillance ne fonctionne plus correctement lorsqu’il est installé. J’ai supprimé le composant des thèmes et cela a recommencé à fonctionner - je ne peux juste pas choisir le thème de mise en surbrillance.

2 « J'aime »

la coloration syntaxique est également cassée ici dans la dernière version bêta

@Falco vient de fusionner un correctif pour ce composant : DEV: Update highlight.js to version 11 by xfalcox · Pull Request #3 · discourse/hljs-theme-picker · GitHub

Il inclut une mise à jour vers les thèmes de la version 11 de highlight.js (le cœur a été mis à jour vers la version 11 de highlight.js également) et des correctifs pour les styles qui manquaient de la bonne spécificité.

2 « J'aime »

J’ai obtenu cette erreur lorsque j’ai essayé d’installer le composant

Erreur lors de la création de l'élément de téléversement : a11y-dark. Nom de fichier d'origine Désolé, le fichier que vous essayez de téléverser n'est pas autorisé (extensions autorisées : wasm, jpg, jpeg, png, woff, woff2, svg, eot, ttf, otf, gif, webp, avif, js).

Avez-vous fait cette partie :point_down:

1 « J'aime »

Oh non, je vais faire ça :hugs:

1 « J'aime »

Je viens de trouver ce composant de thème — je suis tellement content qu’il existe ! Je remarque que le réglage hljs dark match ne semble pas fonctionner.

Par exemple, nous avons hljs theme réglé sur atom-one-light (pour lequel il existe également atom-one-dark).

Après actualisation, le atom-one-light s’applique en mode clair, mais le bloc de code ne passe pas au mode sombre lors du passage en mode sombre — il reste clair.


J’ai reçu ce message d’erreur lors de l’installation de composants de thème, j’espère que quelqu’un pourra guider la communauté sur la façon de les corriger.

Avez-vous ajouté css à la liste des extensions de thème autorisées ?

1 « J'aime »

Merci, ça marche ^^

1 « J'aime »

Note :

Cela devrait être :

Il semble que ce composant de thème soit cassé dans la dernière version.

J’ai déjà ajouté css au paramètre theme_authorized_extensions et essayé de réinstaller le composant, mais les styles des blocs de code ne s’appliquent toujours pas.

Pourriez-vous vérifier cela ? Merci.