Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Color for aliased tokens not applied correctly

Abierto
  • ¿Algo no está bien?
#260 1 comentario 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
38/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

Comienza con los estilos personalizados de PrismTheme y sigue cómo prism-react-renderer los aplica a las clases de tokens con alias mostradas: doc-comment comment, function-definition function y control-flow keyword. Se considera terminado cuando los estilos específicos de los tokens con alias sobrescriben visiblemente los estilos más generales de los tokens, mientras que los tokens simples conservan su apariencia actual.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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)

Lenguaje dominante
TypeScript
Estrellas
2k
Forks
149
Sin PR fusionados en 30 d

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de FormidableLabs/prism-react-renderer

Todos los issues de FormidableLabs/prism-react-renderer

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.