Skip to content

Commit a038b82

Browse files
khanniiekhanniie
committed
add highlight styles
1 parent 2242505 commit a038b82

6 files changed

Lines changed: 706 additions & 8802 deletions

File tree

‎client/modules/IDE/components/Editor/highlightStyle.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { HighlightStyle } from '@codemirror/language';
2+
import { tags } from '@lezer/highlight';
3+
4+
export const highlightStyle = HighlightStyle.define([
5+
{ tag: tags.comment, class: 'cm-comment' },
6+
{ tag: tags.lineComment, class: 'cm-comment' },
7+
{ tag: tags.blockComment, class: 'cm-comment' },
8+
{ tag: tags.docComment, class: 'cm-comment' },
9+
{ tag: tags.docString, class: 'cm-comment' },
10+
{ tag: tags.name, class: 'cm-variable' },
11+
{ tag: tags.variableName, class: 'cm-variable' },
12+
{ tag: tags.typeName, class: 'cm-variable' },
13+
{ tag: tags.className, class: 'cm-variable' },
14+
{ tag: tags.string, class: 'cm-string' },
15+
{ tag: tags.character, class: 'cm-string' },
16+
{ tag: tags.attributeName, class: 'cm-string' },
17+
{ tag: tags.regexp, class: 'cm-regexp' },
18+
{ tag: tags.number, class: 'cm-number' },
19+
{ tag: tags.integer, class: 'cm-number' },
20+
{ tag: tags.float, class: 'cm-number' },
21+
{ tag: tags.atom, class: 'cm-atom' },
22+
{ tag: tags.bool, class: 'cm-atom' },
23+
{ tag: tags.null, class: 'cm-atom' },
24+
{ tag: tags.keyword, class: 'cm-keyword' },
25+
{ tag: tags.self, class: 'cm-keyword' },
26+
{ tag: tags.function, class: 'cm-keyword' },
27+
{ tag: tags.operator, class: 'cm-operator' },
28+
{ tag: tags.operatorKeyword, class: 'cm-operator' },
29+
{ tag: tags.controlKeyword, class: 'cm-operator' },
30+
{ tag: tags.derefOperator, class: 'cm-operator' },
31+
{ tag: tags.arithmeticOperator, class: 'cm-operator' },
32+
{ tag: tags.logicOperator, class: 'cm-operator' },
33+
{ tag: tags.bitwiseOperator, class: 'cm-operator' },
34+
{ tag: tags.compareOperator, class: 'cm-operator' },
35+
{ tag: tags.updateOperator, class: 'cm-operator' },
36+
{ tag: tags.typeOperator, class: 'cm-operator' },
37+
{ tag: tags.controlOperator, class: 'cm-operator' },
38+
{ tag: tags.definitionKeyword, class: 'cm-keyword' },
39+
{ tag: tags.tagName, class: 'cm-tag' },
40+
{ tag: tags.heading, class: 'cm-tag' },
41+
{ tag: tags.heading1, class: 'cm-tag' },
42+
{ tag: tags.heading2, class: 'cm-tag' },
43+
{ tag: tags.heading3, class: 'cm-tag' },
44+
{ tag: tags.heading4, class: 'cm-tag' },
45+
{ tag: tags.heading5, class: 'cm-tag' },
46+
{ tag: tags.heading6, class: 'cm-tag' },
47+
{ tag: tags.list, class: 'cm-tag' },
48+
{ tag: tags.quote, class: 'cm-tag' },
49+
{ tag: tags.emphasis, class: 'cm-tag' },
50+
{ tag: tags.strong, class: 'cm-tag' },
51+
{ tag: tags.link, class: 'cm-tag' },
52+
{ tag: tags.propertyName, class: 'cm-property' },
53+
{ tag: tags.attributeName, class: 'cm-attribute' }
54+
// { tag: tags.special(tags.variableName), class: 'p5-variable' }
55+
// { tag: tags.definition, class: 'cm-def' },
56+
// { tag: tags.const, class: 'cm-def' },
57+
// { tag: tags.local, class: 'cm-def' },
58+
]);

‎client/modules/IDE/components/Editor/stateUtils.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ import { emmetConfig } from '@emmetio/codemirror6-plugin';
5656

5757
import p5JavaScript from './p5JavaScript';
5858
import tidyCodeWithPrettier from './tidier';
59+
import { highlightStyle } from './highlightStyle';
5960

6061
// ----- TODOS -----
6162
// - JSON linter
@@ -323,7 +324,7 @@ export function createNewFileState(filename, document, settings) {
323324
highlightActiveLineGutter(),
324325
highlightSpecialChars(),
325326
highlightSelectionMatches(),
326-
syntaxHighlighting(defaultHighlightStyle, { fallback: true }), // Might need to replace highlight style
327+
syntaxHighlighting(highlightStyle),
327328
// Selection extensions
328329
drawSelection(),
329330
rectangularSelection(),

‎client/styles/abstracts/_variables.scss‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,34 @@ $dark: #333; // primary
2929
$darker: #1C1C1C;
3030
$darkest: #000;
3131

32+
// Light highlight styles
33+
$p5-light-brown: #7A5A3A;
34+
$p5-light-black: #333333;
35+
$p5-light-pink: #D52889;
36+
$p5-light-gray: #666;
37+
$p5-light-blue: #0B7CA9;
38+
$p5-light-orange: #A06801;
39+
$p5-light-lightgray: $middle-gray;
40+
$p5-light-green: #47820A;
41+
42+
// Dark highlight styles
43+
$p5-dark-pink: #DE4A9B;
44+
$p5-dark-gray: #9B9B9B;
45+
$p5-dark-lightblue: #0F9DD7;
46+
$p5-dark-white: #FDFDFD;
47+
$p5-dark-orange: #EE9900;
48+
$p5-dark-green: #58a10b;
49+
$p5-dark-goldbrown: #b58318;
50+
51+
// Contrast highlight styles
52+
$p5-contrast-white: #FDFDFD;
53+
$p5-contrast-lightgray: #C1C1C1;
54+
$p5-contrast-blue: #00FFFF;
55+
$p5-contrast-green: #2DE9B6;
56+
$p5-contrast-yellow: #F5DC23;
57+
$p5-contrast-orange: #FFA95D;
58+
$p5-contrast-pink: #FFA9D9;
59+
3260
$themes: (
3361
light: (
3462
logo-color: $p5js-pink,
@@ -130,6 +158,19 @@ $themes: (
130158
admonition-border: #22C8ED,
131159
admonition-background: #E4F8FF,
132160
admonition-text: #075769,
161+
162+
highlight-style-comment-color: $p5-light-lightgray,
163+
highlight-style-variable-color: $p5-light-blue,
164+
highlight-style-string-color: $p5-light-green,
165+
highlight-style-regexp-color: $p5-light-orange,
166+
highlight-style-number-color: $p5-light-black,
167+
highlight-style-atom-color: $p5-light-pink,
168+
highlight-style-keyword-color: $p5-light-brown,
169+
highlight-style-operator-color: $p5-light-brown,
170+
highlight-style-def-color: $p5-light-blue,
171+
highlight-style-tag-color: $p5-light-pink,
172+
highlight-style-property-color: $p5-light-black,
173+
highlight-style-attribute-color: $p5-light-black,
133174
),
134175
dark: (
135176
logo-color: $p5js-pink,
@@ -229,6 +270,19 @@ $themes: (
229270
admonition-border: #22C8ED,
230271
admonition-background: #105A7F,
231272
admonition-text: #FFFFFF,
273+
274+
highlight-style-comment-color: $p5-dark-gray,
275+
highlight-style-variable-color: $p5-dark-lightblue,
276+
highlight-style-string-color: $p5-dark-green,
277+
highlight-style-regexp-color: $p5-dark-orange,
278+
highlight-style-number-color: $p5-dark-white,
279+
highlight-style-atom-color: $p5-dark-pink,
280+
highlight-style-keyword-color: $p5-dark-goldbrown,
281+
highlight-style-operator-color: $p5-dark-goldbrown,
282+
highlight-style-def-color: $p5-dark-lightblue,
283+
highlight-style-tag-color: $p5-dark-pink,
284+
highlight-style-property-color: $p5-dark-white,
285+
highlight-style-attribute-color: $p5-dark-lightblue,
232286
),
233287
contrast: (
234288
logo-color: $yellow,
@@ -328,6 +382,19 @@ $themes: (
328382
admonition-border: #22C8ED,
329383
admonition-background: #000000,
330384
admonition-text: #ffffff,
385+
386+
highlight-style-comment-color: $p5-contrast-lightgray,
387+
highlight-style-variable-color: $p5-contrast-white,
388+
highlight-style-string-color: $p5-contrast-green,
389+
highlight-style-regexp-color: $p5-contrast-green,
390+
highlight-style-number-color: $p5-contrast-pink,
391+
highlight-style-atom-color: $p5-contrast-pink,
392+
highlight-style-keyword-color: $p5-contrast-yellow,
393+
highlight-style-operator-color: $p5-contrast-lightgray,
394+
highlight-style-def-color: $p5-contrast-blue,
395+
highlight-style-tag-color: $p5-contrast-orange,
396+
highlight-style-property-color: $p5-contrast-white,
397+
highlight-style-attribute-color: $p5-contrast-white,
331398
)
332399
);
333400

‎client/styles/components/_editor.scss‎

Lines changed: 67 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -186,74 +186,77 @@
186186
}
187187
}
188188

189-
// .cm-comment {
190-
// @include themify() { color: getThemifyVariable("highlight-style-comment-color"); }
191-
// }
189+
// Used for comment, lineComment, blockComment, docComment, docString
190+
.cm-comment {
191+
@include themify() { color: getThemifyVariable("highlight-style-comment-color"); }
192+
}
192193

193-
// .cm-def {
194-
// @include themify() { color: getThemifyVariable("highlight-style-def-color"); }
195-
// }
194+
// Used for name, variableName, typeName
195+
.cm-variable {
196+
@include themify() { color: getThemifyVariable("highlight-style-variable-color"); }
197+
}
196198

197-
// .cm-string {
198-
// @include themify() { color: getThemifyVariable("highlight-style-string-color"); }
199-
// }
199+
// Used for string, character, attributeValue
200+
.cm-string {
201+
@include themify() { color: getThemifyVariable("highlight-style-string-color"); }
202+
}
200203

201-
// .cm-string-2 {
202-
// @include themify() { color: getThemifyVariable("highlight-style-string2-color"); }
203-
// }
204+
// Used for regexp
205+
.cm-regexp {
206+
@include themify() { color: getThemifyVariable("highlight-style-regexp-color"); }
207+
}
204208

205-
// .cm-number {
206-
// @include themify() { color: getThemifyVariable("highlight-style-number-color"); }
207-
// }
209+
// Used for number, integer, float
210+
.cm-number {
211+
@include themify() { color: getThemifyVariable("highlight-style-number-color"); }
212+
}
208213

209-
// .cm-variable {
210-
// @include themify() { color: getThemifyVariable("highlight-style-variable-color"); }
211-
// }
214+
// Used for bool, atom, null
215+
.cm-atom {
216+
@include themify() { color: getThemifyVariable("highlight-style-atom-color"); }
217+
}
212218

213-
// .cm-variable2 {
214-
// @include themify() { color: getThemifyVariable("highlight-style-variable2-color"); }
215-
// }
219+
// Used for keyword, self, function, className
220+
.cm-keyword {
221+
@include themify() { color: getThemifyVariable("highlight-style-keyword-color"); }
222+
}
216223

217-
// .cm-property {
218-
// @include themify() { color: getThemifyVariable("highlight-style-property-color"); }
219-
// }
224+
// Used for operatorKeyword, controlKeyword, operator, derefOperator, arithmeticOperator,
225+
// logicOperator, bitwiseOperator, compareOperator, updateOperator, typeOperator
226+
// controlOperator
227+
.cm-operator {
228+
@include themify() { color: getThemifyVariable("highlight-style-operator-color"); }
229+
}
220230

221-
// .cm-atom {
222-
// @include themify() { color: getThemifyVariable("highlight-style-atom-color"); }
223-
// }
231+
// Used for definitionKeyword, definition, const, local
232+
.cm-def {
233+
@include themify() { color: getThemifyVariable("highlight-style-def-color"); }
234+
}
224235

225-
// .cm-operator {
226-
// @include themify() { color: getThemifyVariable("highlight-style-operator-color"); }
227-
// }
236+
// tagName, heading, heading1, heading2, heading3, heading4, heading5, heading6,
237+
// list, quote, emphasis, strong, link
238+
.cm-tag {
239+
@include themify() { color: getThemifyVariable("highlight-style-tag-color"); }
240+
}
228241

229-
// .cm-matchingbracket {
230-
// @include themify() {
231-
// outline: 1px solid getThemifyVariable("highlight-style-matchingbracket-outline-color");
232-
// outline-offset: 1px;
233-
// color: getThemifyVariable("highlight-style-default-color") !important;
234-
// }
235-
// }
242+
// Used for propertyName
243+
.cm-property {
244+
@include themify() { color: getThemifyVariable("highlight-style-property-color"); }
245+
}
246+
247+
// Used for attributeName
248+
.cm-attribute {
249+
@include themify() { color: getThemifyVariable("highlight-style-attribute-color"); }
250+
}
236251

237252
// .cm-qualifier {
238253
// @include themify() { color: getThemifyVariable("highlight-style-variable-color"); }
239254
// }
240255

241-
// .cm-tag {
242-
// @include themify() { color: getThemifyVariable("highlight-style-atom-color"); }
243-
// }
244-
245256
// .cm-builtin {
246257
// @include themify() { color: getThemifyVariable("highlight-style-variable-color"); }
247258
// }
248259

249-
// .cm-attribute {
250-
// @include themify() { color: getThemifyVariable("highlight-style-property-color"); }
251-
// }
252-
253-
// .cm-keyword {
254-
// @include themify() { color: getThemifyVariable("highlight-style-keyword-color"); }
255-
// }
256-
257260
// .cm-p5-function {
258261
// @include themify() { color: getThemifyVariable("p5-function-color"); }
259262
// font-weight: bold;
@@ -262,3 +265,18 @@
262265
// .cm-p5-variable {
263266
// @include themify() { color: getThemifyVariable("p5-variable-color"); }
264267
// }
268+
269+
270+
// Unassigned: literal, escape, color, url, unit, modifier, punctuation, separator
271+
// bracket, angleBracket, squareBracket, paren, brace, content
272+
// contentSeparator, monospace, strikethrough, inserted, deleted, changed, invalid, meta,
273+
// documentMeta, annotation, processingInstruction, standard, special, macroName
274+
275+
// TODO: Matching bracket code
276+
// .cm-matchingbracket {
277+
// @include themify() {
278+
// outline: 1px solid getThemifyVariable("highlight-style-matchingbracket-outline-color");
279+
// outline-offset: 1px;
280+
// color: getThemifyVariable("highlight-style-default-color") !important;
281+
// }
282+
// }

0 commit comments

Comments
 (0)