Sto riscontrando un problema con la formattazione dei blocchi di codice in Discourse. Quando pubblico codice Python, alcune parti del codice (come URL e percorsi) vengono evidenziate in rosso o formattate in modo imprevisto, come mostrato nello screenshot seguente:
Quando pubblico codice Python utilizzando triple backtick per i blocchi di codice, parti specifiche del testo (come gli underscore negli URL o nei percorsi) vengono evidenziate in rosso o formattate in modo errato.
Ho provato a eseguire l’escape dei caratteri, a utilizzare entità HTML e a rimuovere l’evidenziazione della sintassi non specificando il linguaggio, ma il problema persiste.
Esempio di codice
Ecco uno snippet del codice che causa problemi (Python):
Non ho familiarità con il sistema di evidenziazione della sintassi / le impostazioni nel loro complesso, ma se vuoi solo eliminare il testo rosso potresti usare CSS nel tema del tuo sito:
code.language-python span {
color: inherit;
}
Il rosso viene utilizzato per indicare le stringhe, quindi se volessi cambiarlo in un colore diverso potresti fare qualcosa di simile:
code.language-python span.hljs-string {
color: #FFF; /* Sostituisci con il colore desiderato */
}
Oltre al testo rosso, c’erano altre parti che vengono formattate in modo errato?
Grazie per il tuo suggerimento, @bryce! Proverò ad aggiustare il CSS nel tema del nostro sito per risolvere il problema del testo rosso.
Proverò ad aggiustare il CSS nel tema del nostro sito per risolvere il problema del testo rosso.
Penso che il problema principale sia che il font nel mio screenshot originale non è formattato per assomigliare al codice: manca lo stile del font monospaziato che viene tipicamente utilizzato per i blocchi di codice. Idealmente, speravo che il codice apparisse più simile a questo, con il font e il colore del font corretti:
C’è un modo per garantire che il codice venga visualizzato in un font monospaziato, simile a quello di questo esempio?
A parte questo, non ho notato altri problemi di formattazione importanti, ma continuerò a testare e ti farò sapere se emerge altro.
I colori di evidenziazione possono essere modificati sovrascrivendo queste variabili CSS:
--hljs-comment: Usato per i commenti nel codice
--hljs-number: Usato per i valori numerici nel codice
--hljs-string: Usato per i valori stringa nel codice
--hljs-literal: Usato per i valori letterali nel codice
--hljs-tag: Usato per i tag HTML/XML
--hljs-attribute: Usato per gli attributi nei tag HTML/XML
--hljs-symbol: Usato per i simboli nel codice
--hljs-bg: Usato per il colore di sfondo dei blocchi di codice
--hljs-builtin-name: Usato per i nomi delle funzioni predefinite
Ad esempio, per sovrascrivere il colore delle stringhe:
:root {
--hljs-string: pink;
}
Sembra che hljs (la libreria di evidenziazione utilizzata) potrebbe non supportare l’evidenziazione degli identificatori Python come degirum nel tuo esempio, ma dovresti essere in grado di ottenere un risultato abbastanza vicino modificando gli altri colori.
Per quanto riguarda il font, è strano: i blocchi di codice dovrebbero apparire con un font monospace per impostazione predefinita. Ti suggerirei di ricontrollare il tuo tema per assicurarti che nulla venga sovrascritto lì.
Per chiarire, stiamo attualmente utilizzando il tema predefinito senza componenti aggiuntivi, quindi è strano che il font monospace non venga applicato di default ai blocchi di codice. Non sembra che nulla lo stia sovrascrivendo.
Come riferimento, sto lavorando da Chrome versione 127.0.6533.100 su macOS 14.6.1.
Il font appare corretto e i link sono evidenziati come previsto. Tuttavia, sto ancora riscontrando il problema nella nostra community dove il font non viene visualizzato correttamente e i link non sono evidenziati come dovrebbero essere.
Non sono sicuro del motivo di questa discrepanza.
Come riferimento, qui è il link alla pagina sulla nostra community.
Grazie a entrambi per avermi dedicato del tempo per aiutarmi. È un bene sapere che il font viene visualizzato come monospazio anche per gli altri.
Dato che non viene visualizzato correttamente da parte mia, potrebbe essere un problema specifico della mia configurazione o del mio ambiente. Viene visualizzato in modo errato per me sia su Chrome che su Safari (entrambi nelle ultime versioni). Viene visualizzato in modo errato anche per altri nella mia organizzazione sui PC.
Ho appena controllato da un computer personale e il problema persiste anche lì. Il font del codice non viene ancora visualizzato come monospazio e i link non sono evidenziati correttamente.
Ciò sembra escludere un problema con la mia configurazione principale, poiché il problema è coerente su diversi dispositivi.
Ho appena controllato in Modalità provvisoria e il problema sembra essere risolto lì: il font del codice appare come monospace e i link sono evidenziati correttamente.
Questo è sconcertante perché stiamo utilizzando il tema Predefinito senza componenti aggiuntivi, quindi non sono sicuro di cosa possa causare il problema in modalità normale.
È quello che mi aspetterei. Quelle stringhe sono di un colore diverso in modo da poter capire rapidamente che si tratta di stringhe. Non è così che appare nel tuo editor di testo?
Penso che tu voglia solo cambiare SiteSetting.default_code_lang in “text” o “”. C’è anche un’impostazione highlighted_languages. Sono abbastanza sicuro che qui abbiano cambiato la lingua predefinita del codice in qualcosa come text, quindi
Dato che gestisco la community, il mio obiettivo è poterla vedere come dovrebbero vederla gli utenti finali. Come puoi vedere sul lato destro, semplicemente non ha un bell’aspetto.
