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

Cannot get the same CSS color style as shown on https://uiwjs.github.io/react-codemirror/

オープン
#715 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

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

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
35/100
issue の種類
バグ
明瞭さ
説明が足りない
活発さ
停滞
技術スタック
css, react, typescript
領域
frontend

調査の方向性

issue に示されている CodeMirror コンポーネントの設定から始め、特に basicDark と javascript({ jsx: true }) を使用しているテーマと拡張機能を確認します。ダークテーマで JSON をレンダリングするオンラインの react-codemirror の例と比較し、ローカルの出力が異なる理由を特定します。設定またはドキュメントによってスタイルの違いが説明され、期待されるキーと値のクラスが生成されれば完了です。

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

説明

Hi, I want to get the same color CSS styling as shown on https://uiwjs.github.io/react-codemirror/ for theme: dark and language: JSON

Image

But when I tried it with react-codemirror ("@uiw/react-codemirror": "^4.23.8"):

                        <CodeMirror
                            value={{ JSON .... }}
                            minHeight={"120px"}
                            theme={basicDark}
                            extensions={[
                                basicDark,
                                javascript({ jsx: true }),
                                // EditorView.lineWrapping
                            ]}
                            onChange={onChange}
                        />

it looks like this instead:

Image

On the online example the HTML for the JSON "message": "Network Error" have seperate CSS classes for the JSON key and value:

Image

Image

But the one on my localhost both JSON key and value have the same class:

Image

Image

It seems my localhost react-codemirror is missing alot of classes and styling, why is that?

Does anyone know why this is happening?

Why is it that the outcome is different from the example shown on https://uiwjs.github.io/react-codemirror/?

主要言語
TypeScript
スター
2.3k
フォーク
162
平均マージ
2時間 41分
マージ済み PR(30日)
1

環境構築

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

はじめの一歩

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

uiwjs/react-codemirror のほかの issue

uiwjs/react-codemirror の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

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

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