mirror of
https://github.com/go-gitea/gitea.git
synced 2026-04-02 00:18:35 +01:00
e2e8509239
- Replace monaco-editor with CodeMirror 6 - Add `--color-syntax-*` CSS variables for all syntax token types, shared by CodeMirror, Chroma and EasyMDE - Consolidate chroma CSS into a single theme-independent file (`modules/chroma.css`) - Syntax colors in the code editor now match the code view and light/dark themes - Code editor is now 12px instead of 14px font size to match code view and GitHub - Use a global style for kbd elements - When editing existing files, focus will be on codemirror instead of filename input. - Keyboard shortcuts are roughtly the same as VSCode - Add a "Find" button, useful for mobile - Add context menu similar to Monaco - Add a command palette (Ctrl/Cmd+Shift+P or F1) or via button - Add clickable URLs via Ctrl/Cmd+click - Add e2e test for the code editor - Remove `window.codeEditors` global - The main missing Monaco features are hover types and semantic rename but these were not fully working because monaco operated only on single files and only for JS/TS/HTML/CSS/JSON. | | Monaco (main) | CodeMirror (cm) | Delta | |---|---|---|---| | **Build time** | 7.8s | 5.3s | **-32%** | | **JS output** | 25 MB | 14 MB | **-44%** | | **CSS output** | 1.2 MB | 1012 KB | **-17%** | | **Total (no maps)** | 23.3 MB | 12.1 MB | **-48%** | Fixes: #36311 Fixes: #14776 Fixes: #12171 <img width="1333" height="555" alt="image" src="https://github.com/user-attachments/assets/f0fe3a28-1ed9-4f22-bf25-2b161501d7ce" /> --------- Signed-off-by: silverwind <me@silverwind.io> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
80 lines
5.6 KiB
CSS
80 lines
5.6 KiB
CSS
/* https://github.com/alecthomas/chroma/blob/6428fb4e65f3c1493491571c8a6a8f1add1da822/types.go#L208 */
|
|
|
|
/* structural */
|
|
.chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
|
|
.chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
|
|
.chroma .hl { display: block; width: 100%; }
|
|
.chroma .lnt { margin-right: 0.4em; padding: 0 0.4em; }
|
|
.chroma .ln { margin-right: 0.4em; padding: 0 0.4em; }
|
|
|
|
/* tokens */
|
|
.chroma .bp { color: var(--color-syntax-name-pseudo); } /* NameBuiltinPseudo */
|
|
.chroma .c { color: var(--color-syntax-comment); } /* Comment */
|
|
.chroma .c1 { color: var(--color-syntax-comment); } /* CommentSingle */
|
|
.chroma .ch { color: var(--color-syntax-comment); } /* CommentHashbang */
|
|
.chroma .cm { color: var(--color-syntax-comment); } /* CommentMultiline */
|
|
.chroma .cp { color: var(--color-syntax-preproc); } /* CommentPreproc */
|
|
.chroma .cpf { color: var(--color-syntax-preproc-file); } /* CommentPreprocFile */
|
|
.chroma .cs { color: var(--color-syntax-comment-special); } /* CommentSpecial */
|
|
.chroma .dl { color: var(--color-syntax-string); } /* LiteralStringDelimiter */
|
|
.chroma .gd { color: var(--color-syntax-diff-fg); background-color: var(--color-syntax-deleted-bg); } /* GenericDeleted */
|
|
.chroma .ge { color: var(--color-syntax-emph); } /* GenericEmph */
|
|
.chroma .gh { color: var(--color-syntax-heading); } /* GenericHeading */
|
|
.chroma .gi { color: var(--color-syntax-diff-fg); background-color: var(--color-syntax-inserted-bg); } /* GenericInserted */
|
|
.chroma .gl { text-decoration: underline; } /* GenericUnderline */
|
|
.chroma .go { color: var(--color-syntax-output); } /* GenericOutput */
|
|
.chroma .gp { color: var(--color-syntax-prompt); } /* GenericPrompt */
|
|
.chroma .gr { color: var(--color-syntax-invalid); } /* GenericError */
|
|
.chroma .gs { color: var(--color-syntax-strong); font-weight: var(--font-weight-semibold); } /* GenericStrong */
|
|
.chroma .gt { color: var(--color-syntax-traceback); } /* GenericTraceback */
|
|
.chroma .gu { color: var(--color-syntax-subheading); } /* GenericSubheading */
|
|
.chroma .il { color: var(--color-syntax-number); } /* LiteralNumberIntegerLong */
|
|
.chroma .k { color: var(--color-syntax-keyword); } /* Keyword */
|
|
.chroma .kc { color: var(--color-syntax-bool); } /* KeywordConstant */
|
|
.chroma .kd { color: var(--color-syntax-keyword); } /* KeywordDeclaration */
|
|
.chroma .kn { color: var(--color-syntax-control); } /* KeywordNamespace */
|
|
.chroma .kp { color: var(--color-syntax-keyword); } /* KeywordPseudo */
|
|
.chroma .kr { color: var(--color-syntax-keyword); } /* KeywordReserved */
|
|
.chroma .kt { color: var(--color-syntax-type); } /* KeywordType */
|
|
.chroma .m { color: var(--color-syntax-number); } /* LiteralNumber */
|
|
.chroma .mb { color: var(--color-syntax-number); } /* LiteralNumberBin */
|
|
.chroma .mf { color: var(--color-syntax-number); } /* LiteralNumberFloat */
|
|
.chroma .mh { color: var(--color-syntax-number); } /* LiteralNumberHex */
|
|
.chroma .mi { color: var(--color-syntax-number); } /* LiteralNumberInteger */
|
|
.chroma .mo { color: var(--color-syntax-number); } /* LiteralNumberOct */
|
|
.chroma .n { color: var(--color-syntax-text); } /* Name */
|
|
.chroma .na { color: var(--color-syntax-attribute); } /* NameAttribute */
|
|
.chroma .nb { color: var(--color-syntax-name); } /* NameBuiltin */
|
|
.chroma .nc { color: var(--color-syntax-type); } /* NameClass */
|
|
.chroma .nd { color: var(--color-syntax-decorator); } /* NameDecorator */
|
|
.chroma .ne { color: var(--color-syntax-keyword); } /* NameException */
|
|
.chroma .nf { color: var(--color-syntax-name); } /* NameFunction */
|
|
.chroma .ni { color: var(--color-syntax-entity); } /* NameEntity */
|
|
.chroma .nl { color: var(--color-syntax-keyword); } /* NameLabel */
|
|
.chroma .nn { color: var(--color-syntax-namespace); } /* NameNamespace */
|
|
.chroma .no { color: var(--color-syntax-variable); } /* NameConstant */
|
|
.chroma .nt { color: var(--color-syntax-tag); } /* NameTag */
|
|
.chroma .nv { color: var(--color-syntax-variable); } /* NameVariable */
|
|
.chroma .nx { color: var(--color-syntax-text-alt); } /* NameOther */
|
|
.chroma .o { color: var(--color-syntax-operator); } /* Operator */
|
|
.chroma .ow { color: var(--color-syntax-operator); } /* OperatorWord */
|
|
.chroma .p { color: var(--color-syntax-punctuation); } /* Punctuation */
|
|
.chroma .s { color: var(--color-syntax-string); } /* LiteralString */
|
|
.chroma .s1 { color: var(--color-syntax-string); } /* LiteralStringSingle */
|
|
.chroma .s2 { color: var(--color-syntax-string); } /* LiteralStringDouble */
|
|
.chroma .sa { color: var(--color-syntax-string-special); } /* LiteralStringAffix */
|
|
.chroma .sb { color: var(--color-syntax-string); } /* LiteralStringBacktick */
|
|
.chroma .sc { color: var(--color-syntax-string-special); } /* LiteralStringChar */
|
|
.chroma .sd { color: var(--color-syntax-string); } /* LiteralStringDoc */
|
|
.chroma .se { color: var(--color-syntax-escape); } /* LiteralStringEscape */
|
|
.chroma .sh { color: var(--color-syntax-string); } /* LiteralStringHeredoc */
|
|
.chroma .si { color: var(--color-syntax-string-special); } /* LiteralStringInterpol */
|
|
.chroma .sr { color: var(--color-syntax-regexp); } /* LiteralStringRegex */
|
|
.chroma .ss { color: var(--color-syntax-escape); } /* LiteralStringSymbol */
|
|
.chroma .sx { color: var(--color-syntax-string); } /* LiteralStringOther */
|
|
.chroma .vc { color: var(--color-syntax-variable); } /* NameVariableClass */
|
|
.chroma .vg { color: var(--color-syntax-variable); } /* NameVariableGlobal */
|
|
.chroma .vi { color: var(--color-syntax-variable); } /* NameVariableInstance */
|
|
.chroma .w { color: var(--color-syntax-whitespace); } /* TextWhitespace */
|
|
.chroma .err {/* not styled because Chroma uses it on too many things like JSX */} /* Error */
|