Come cambiare i colori predefiniti del blocco di codice fornito?

Ad esempio, questo è codice Swift

func jjj () {

let jj: String = "1"
}

Lo voglio colorato come il seguente,

Il colore viene aggiunto a seconda della lingua. Puoi verificare se Swift è aggiunto in highlighted_languages e se il rilevamento ancora non funziona, puoi anche impostare manualmente la lingua per un blocco di codice.

2 Mi Piace

La formattazione del blocco di codice va bene, è stata aggiunta come (senza le virgolette)

" swift [codice qui] "

Viene evidenziata come segue, ma il problema è il colore che fornisce, non mi piace. Viene evidenziata come sotto. (vedi il colore rosso “jjj”, lo voglio in blu.

Ma voglio qualcosa come il seguente

È possibile modificare un file ecc. tramite terminale? in modo da poter cambiare i colori predefiniti assegnati per una lingua specifica?

Le lingue rilevate vengono gestite tramite un’impostazione del sito: highlighted languages.

Swift appartiene all’elenco per impostazione predefinita ma non su meta.

Le lingue supportate da questa libreria di terze parti sono elencate qui:

modifica: come spiegato qui :face_with_peeking_eye:

@PrettyGirl, suggerimento markdown: puoi eseguire l’escape dei backtick da un codeblock racchiudendo il tuo codice tra quattro backtick invece di tre :slight_smile:

``` swift

[code here]
```
2 Mi Piace

Ciao :waving_hand:

Puoi anche provare a cambiare i colori con questo componente del tema :slightly_smiling_face:

4 Mi Piace

Grazie per il suggerimento e il link. Tuttavia, l’impostazione del sito highlighted languages include swift. Viene evidenziato, ma non mi piacciono i colori con cui viene attualmente evidenziato. C’è un altro modo? Modificando highlight.js all’interno della cartella discourse, ecc.? Ci deve essere un modo, vero? Ho notato che highlight.js è anche open source.

Discourse viene fornito con highlight.js per impostazione predefinita?

Oh, mi dispiace, ho letto male il tuo argomento. :person_facepalming:

:slight_smile:

1 Mi Piace

Hai provato il componente tema pubblicato da beeper nel tuo ultimo messaggio?

1 Mi Piace

Non l’ho fatto, perché non so quali altre aree (nell’intera app Discourse) avranno un aspetto diverso se applico altri temi. Mi piace l’aspetto e le impostazioni attuali, ma ci sono solo un paio di problemi qua e là. Se il tema cambia l’aspetto o le impostazioni, ecc., oltre a fornire bei blocchi di codice, non ne vale la pena. Ho solo bisogno di risolvere quel problema specifico.

Puoi puntare separatamente le lingue del codice e sovrascrivere il rilevamento automatico della lingua come menzionato nei post precedenti.

Se vuoi puntare a Swift, puoi farlo con la classe .language-swift. Per essere più specifici… code.hljs.language-swift. E puoi cambiare i colori di Swift in CSS.

Ho controllato questo e sembra che sia vicino al tema Xcode. Ma cambieremo quei due colori per adattarli meglio ai colori del codice del tuo screenshot.

Il problema con questi colori è che sono difficili da leggere in modalità scura. Ecco perché nella pagina demo di highlight.js c’è uno sfondo bianco e penso che questo sia il motivo per cui Discourse utilizza una combinazione di colori generica predefinita per le lingue. Se ricordo bene, in passato ci sono state segnalazioni sul fatto che fosse difficile da leggere in modalità scura, ecc…


Per cambiarlo solo in Swift, devi creare un nuovo componente tematico o aggiungerlo a uno esistente. Nota: questi colori verranno utilizzati anche in modalità scura (sfondo bianco, ecc.), quindi se desideri colori diversi in modalità scura, dovrai creare nuove definizioni di colore dark-light-choose().

Comune / CSS

code.hljs.language-swift {
  background: #fff;
  color: #000;

  .xml .hljs-meta {
    color: silver;
  }

  .hljs-comment,
  .hljs-quote {
    color: #007400;
  }

  .hljs-attribute,
  .hljs-keyword,
  .hljs-literal,
  .hljs-name,
  .hljs-selector-tag,
  .hljs-tag {
    color: #aa0d91;
  }

  .hljs-template-variable,
  .hljs-variable {
    color: #3f6e74;
  }

  .hljs-code,
  .hljs-meta .hljs-string,
  .hljs-string {
    color: #c41a16;
  }

  .hljs-link,
  .hljs-regexp {
    color: #0e0eff;
  }

  .hljs-bullet,
  .hljs-number,
  .hljs-symbol,
  .hljs-title {
    color: #2b75a6;
  }

  .hljs-meta,
  .hljs-section {
    color: #643820;
  }

  .hljs-built_in,
  .hljs-class .hljs-title,
  .hljs-params,
  .hljs-title.class_,
  .hljs-type {
    color: #442fa1;
  }

  .hljs-attr {
    color: #836c28;
  }

  .hljs-subst {
    color: #000;
  }

  .hljs-formula {
    background-color: #eee;
    font-style: italic;
  }

  .hljs-addition {
    background-color: #baeeba;
  }

  .hljs-deletion {
    background-color: #ffc8bd;
  }

  .hljs-selector-class,
  .hljs-selector-id {
    color: #9b703f;
  }

  .hljs-doctag,
  .hljs-strong {
    font-weight: 700;
  }

  .hljs-emphasis {
    font-style: italic;
  }
}

Prima

Dopo

5 Mi Piace

Un Theme component viene aggiunto al Theme che già utilizzi. Quindi non cambia l’intero aspetto, aggiunge o modifica qualcosa di specifico. Pertanto, il componente di codice personalizzato modifica solo l’aspetto del codice

5 Mi Piace

La descrizione dice che cambia solo i blocchi di codice, che è esattamente quello che vuoi fare.
Per favore, leggi i link su come funzionano i temi che altri hanno suggerito.

3 Mi Piace

Fantastico, grazie mille. Funziona :slight_smile:

1 Mi Piace

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.