Selettore Tema per Codeblock

:discourse2: Riepilogo Codeblock Theme Picker ti consentirĂ  di modificare facilmente il tema utilizzato nei blocchi di codice.
:eyeglasses: Anteprima Anteprima su Discourse Theme Creator
:hammer_and_wrench: Link al Repository https://github.com/discourse/hljs-theme-picker
:open_book: Nuovo ai temi di Discourse? Guida per principianti all’uso dei temi di Discourse

Installa questo componente del tema

FunzionalitĂ 

Questi sono solo alcuni degli esempi delle opzioni disponibili. Questo componente include tutte le 90 opzioni offerte nel repository hljs.

:information_source: Sebbene tutte le opzioni siano incluse in questo componente, verrà caricato solo quello che scegli. Quindi, non c’è alcun sovraccarico.

Come usarlo

A causa del modo in cui questo componente è configurato, sarà necessario apportare una piccola modifica a una delle impostazioni del tuo sito.

  1. Vai su your.site.com/admin/site_settings/
  2. Cerca theme_authorized_extensions
  3. Aggiungi css a quell’elenco.

Come mostrato qui:

:warning: Devi farlo prima di installare il componente, altrimenti non funzionerĂ .

Una volta fatto, puoi installare il componente come qualsiasi altro componente.

Impostazioni

Nome Descrizione
tema hljs Seleziona il tema che desideri utilizzare per i blocchi di codice. Puoi visitare la pagina di demo di hljs per visualizzare in anteprima i temi
corrispondenza tema scuro hljs Carica lo schema di colori scuro se disponibile

Se hai bisogno di vedere come appaiono le opzioni, dai un’occhiata qui We're not a CDN - highlight.js

Una volta deciso quale tema hljs utilizzare, puoi cercare nel menu a discesa quello che desideri e salvare l’impostazione. Dovrai aggiornare la pagina affinché tutto inizi a funzionare.

Crediti

Tutti i temi hljs inclusi in questo componente contengono informazioni sul copyright nei rispettivi file. L’elenco di tutti gli autori (:heart:) è troppo lungo per essere aggiunto qui, ma puoi vederli qui.


:discourse2: Ospitato da noi? I componenti del tema sono disponibili per l’uso nei nostri piani Standard, Business e Enterprise.

42 Mi Piace

This theme is very useful and running in my site for a long time. How ever I suddenly found it has a problem on firefox. The custom css file blocked by the following header X-Content-Type-Options: nosniff. Console shows that css file MIME type is text/html. No matter which theme I choise the problem still happen on firefox but chrome is fine.

This super theme component would be even better if the selected codeblock style was also selectable as a user preference.

5 Mi Piace

Concordo. Sarebbe molto bello poterlo configurare in base alle preferenze dell’utente.

C’è un modo per mostrare i numeri di riga?

Ottimo componente per il tema.

Una domanda: sul demo di highlight.js sono presenti 242 temi. Ad esempio, “Github Dark Dimmed” come nell’immagine allegata.

Esiste un modo per risolvere questo problema? Grazie per i consigli.

Purtroppo, questa situazione è un po’ complessa.

Discourse esegue la versione 10.6.0 di highlight-js. La maggior parte dei temi aggiuntivi attualmente mancanti, come quelli della serie base16, richiedono la versione 11.0.

Il problema è che quella versione introduce alcune modifiche incompatibili e deprecazioni. Dai un’occhiata qui:

Release Version 11 · highlightjs/highlight.js · GitHub

Quindi, ciò significa che le opzioni attuali rimarranno invariate per un po’. Prima di tutto, è necessario aggiornare la versione di highlight-js in tests-passed di Discourse. Dopodiché, dovremo attendere una versione stabile. Aggiornare i temi (anche quelli attuali) ci metterebbe in una situazione delicata, dove sarebbe difficile capire se il tema funziona correttamente sul tuo sito o meno.

4 Mi Piace

Questo componente sembra essere rotto nelle ultime beta: l’evidenziazione non funziona più correttamente quando è installato. Ho rimosso il componente dai temi e ha ricominciato a funzionare, semplicemente non posso scegliere il tema di evidenziazione.

2 Mi Piace

conferma che anche qui l’evidenziazione della sintassi è interrotta nell’ultima beta

@Falco ha appena unito una correzione per questo componente: DEV: Update highlight.js to version 11 by xfalcox · Pull Request #3 · discourse/hljs-theme-picker · GitHub

Include un aggiornamento ai temi di highlight.js versione 11 (anche il core è stato aggiornato alla versione 11 di highlight.js) e correzioni per stili che mancano della corretta specificità.

2 Mi Piace

Ho riscontrato questo errore durante il tentativo di installazione del componente

Errore durante la creazione dell'asset di caricamento: a11y-dark. Nome file originale Spiacenti, il file che si sta tentando di caricare non è autorizzato (estensioni autorizzate: wasm, jpg, jpeg, png, woff, woff2, svg, eot, ttf, otf, gif, webp, avif, js).

Hai fatto questa parte :point_down:

1 Mi Piace

Oh no, lo farò :abbracci:

1 Mi Piace

Ho appena trovato questo componente del tema, sono così felice che esista! Noto che l’impostazione hljs dark match non sembra funzionare.

Ad esempio, abbiamo hljs theme impostato su atom-one-light (per cui esiste anche atom-one-dark).

Dopo l’aggiornamento, atom-one-light viene applicato mentre è in modalità scura, ma il blocco di codice non passa al tema scuro quando si passa alla modalità scura: rimane chiaro.


Ho ricevuto questo messaggio di errore durante l’installazione dei componenti del tema, spero che qualcuno possa guidare la community su come risolverli

Hai aggiunto css all’elenco delle estensioni del tema consentite?

1 Mi Piace

Grazie, funziona ^^

1 Mi Piace

Nota:

Dovrebbe essere:

Sembra che questo componente tema sia rotto nell’ultima versione.

Ho già aggiunto css all’impostazione theme_authorized_extensions e ho provato a reinstallare il componente, ma gli stili dei blocchi di codice non vengono ancora applicati.

Potresti verificarlo? Grazie.