Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Color for aliased tokens not applied correctly

Aperta
  • Qualcosa non va?
#260 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
38/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Inizia dagli stili personalizzati di PrismTheme e segui il modo in cui prism-react-renderer li applica alle classi di token con alias mostrate: doc-comment comment, function-definition function e control-flow keyword. Il lavoro è completato quando gli stili specifici per i token con alias sovrascrivono visibilmente gli stili più generali dei token, mentre i token semplici mantengono il loro aspetto attuale.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

bug
Is there an existing issue for this?
  • I have searched the existing issues
Code of Conduct
  • I agree to follow this project's Code of Conduct
Code Sandbox link

No response

Bug report

I am using Docusaurus to build a code documentation site for a Godot GDScript library I'm working on. Prism's GDScript definition is completely outdated (because GDScript 2 was introduced with Godot 4), so I made my own version of the lexer, which works nicely. I also made a dark/light theme specifically for GDScript, making use of some of its specificities (documentation comments being colored differently from standard comments, builtin types, builtin objects, and user types being different, etc.), but I'm facing issues with the colors of such tokens not being applied as I expect them to.

Here is a small code example:

# A standard comment
## A documentation comment
func test_function(param: int) -> float:
    return called_function(param)

Here is the expected output (screenshot from the Godot editor):
Image
And how it looks currently with Docusaurus and my custom theme:
Image

There are multiple instances of the same issue here: doc-comment is colored as comment, function-definition as function, and control-flow (for the return keyword) as keyword.
Focusing on comments, my lexer is able to tokenize the first line as comment, and the second line as doc-comment. Following is an excerpt from my custom theme:

import type { PrismTheme } from "prism-react-renderer"
const theme: PrismTheme = {
  plain: {
    color: "#CDCFD2",
    backgroundColor: "#1D2229",
  },
  styles: [
    {
      types: ["doc-comment"],
      style: {
        color: "#99B3CC", // same result with #99B3CCCC and no opacity field
        opacity: 0.8,
      },
    },
    {
      types: ["comment"],
      style: {
        color: "#CDCFD2", // same result with #CDCFD280 and not opacity field
        opacity: 0.5,
      },
    },
    // etc.
  ],
}
export default theme

With my updated Prism definition for GDScript, the first comment line is being tokenized as class="token comment", and the second line as class="token doc-comment comment"; however, both get the exact same color (rgb(205, 207, 210)), and even the same opacity of 0.5. If I add fontStyle: "italic" to the doc-comment, however, only doc-comments correctly get stylized this way. Swapping the entries did not change the resulting behavior. However, if I remove the comment entry entirely, doc-comment tokens will get their color applied properly.

Is there any known issue with aliased keywords not applying their color properly?

(on a side note, you might want to update the report template to allow markdown preview and attaching screenshots, as I had to edit to add them)

Lingua principale
TypeScript
Stelle
2k
Fork
149
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di FormidableLabs/prism-react-renderer

Tutte le issue di FormidableLabs/prism-react-renderer

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.