Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Color for aliased tokens not applied correctly

オープン
  • 何か問題がありますか？
#260 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
38/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
停滞
技術スタック
react, typescript
領域
frontend

調査の方向性

カスタムの PrismTheme スタイルから始め、prism-react-renderer が次に示すエイリアス付きトークンクラスにどのように適用するかを追跡します: doc-comment comment、function-definition function、control-flow keyword。エイリアス付きトークンに対する固有のスタイルが、より広範なトークンスタイルを目に見えて上書きし、通常のトークンは既存の外観を維持すれば完了です。

索引モデルが issue の本文から書いたものです。

説明

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)

主要言語
TypeScript
スター
2k
フォーク
149
30日以内にマージされた PR はありません

環境構築

このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

FormidableLabs/prism-react-renderer のほかの issue

FormidableLabs/prism-react-renderer の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。