Syntax Highlighting

[catarak]

The editor has cod syntax highlighting, but it is not quite there. I think there are a couple of issues, specifically

1. The colors/what the colors map to could be adjusted. You can see the current mapping in _p5-light-codemirror-theme.scss, and the corresponding files for the dark/high contrast themes, and this blog post explains how the class names map to significant words.
2. Adding custom highlighting to p5.js specific words. We discussed having some document with an array of p5.js keywords, or possibly another solution. This was implemented in the desktop editor.

cc @kjhollen @lmccart

[lmccart]

here's the syntax highlighting suggestion from the design docs. this is based on ace which has a different breakdown of colors than codemirror (which is more limited). in addition, there are a few changes I'd like to make.

1. I think there's no need to color numbers. too much color gets overwhelming. same with arguments in function definitions.
2. bigger distinction between built-in JS tokens vs p5.js function names. right now they are similar shades of blue.
3. difference between p5 functions and variables (ie one of these should be light blue, the other pink I think)

here is processing coloring example for reference. our color scheme will be different, but the logic should be similar.

[kjhollen]

Cool! thanks for sharing this. What would local variable declarations look like with the color scheme from the design docs?

I think the numbers could be a color but one with less contrast from the rest of the palette (the current pink shade is the most visible for me). and I agree that having the p5 builtin variables vs. functions be more visible would be excellent—I've seen some confusion with mouseIsPressed and mousePressed, for example, and being able to point out the text color could be helpful.

the two blue shades in the proposal are a little difficult for me to distinguish as a text color. I think that would go away if one shade were also bold—maybe for the builtins, like processing has.

more generally, here are some thoughts on what I'd like to use syntax highlighting for when helping students with their code:

• easily identifying typos, misspellings, or capitalizations in core library functions (e.g. elipse vs. ellipse, createcanvas vs. createCanvas)
• distinguishing built-in functions like mousePressed from custom-defined functions
• showing the flow of a variable through a function, from argument to function body
• I don't know if this is possible with code mirror or ace, but I would love to be able to recognize whether or not a variable has been declared / has global or local scope. trying to share a locally declared variable with another function (or declaring it again, separately) is something that comes up a lot; I'd love to be able to recognize this faster and to show the students how to do the same.

[catarak]

• I agree with @kjhollen, I think numbers should still be a color but maybe something less bright. I like being able to scan code and pick out places where I'm using magic numbers.
• I 100% agree with highlighting p5.js built-in functions and variables. I like pink for functions, blue for variables, and another color for built in JS tokens. @lmccart I remember that you said the p5.js desktop editor does this and I was trying to figure where this happens, can you point me to it?
• @kjhollen i don't understand your third point
• for local vs. global variables, CodeMirror is able to distinguish them. As the syntax highlighting is set up now, global variables are lightblue (#00A1D3) and local variables are black (Set Ctrl+Enter shortcuts to null, don't generate newlines #333).

• We also should keep in mind that there's also a dark theme, which is similar to the light theme but with a few changes.

[lmccart]

it happens on line 58 of this file, but it's not in the repo... I guess we hacked it into one of the node_modules:
javascript.js.zip

I will work on adding a json file that you can grab from p5js.org or the p5.js repo that includes a list of p5.js function and var names.

[kjhollen]

@catarak the third point in my last post was a lazy summarization of some thinking I've been doing about how to illustrate scope in code editors for visual thinkers. way beyond the scope of this post; no need to address. :)

[catarak]

I just added some minor changes to the syntax highlighting that make p5 function keywords #2D7BB6 (the darker blue from the image above) and p5 variable keywords pink and bold. I'm not totally satisfied with the syntax highlighting but it's a start. Let me know if you have any feedback.

[kjhollen]

Hey all, here are some more thoughts since we chatted last week. I'm still trying to wrap my head around the code mirror tokenization, so some of these are hand-made additions--I'll explain in more detail, but @catarak please let me know if any of these parsings aren't possible. :)

I think I've come around to the idea that numbers do not need special syntax highlighting. Even with minimal contrast they felt distracting. I also took out highlighting for operators, but am curious if this might be a Javascript convention that I'm not familiar with (coming from a Java/C++ background) and if it should be kept.

Sticking mostly with the color palette from the previous post, here's how it's been applied:

• pink color for language keywords like var, for, function
• dark blue color for p5 lib function names, with bold for draw and setup (and other user-defined builtins)
• orange for p5 lib variable names
• lighter blue for other variable and function names
• light brown color for "this" keyword (special case)
• added green color for text literals

I also tried using pink for p5 function names, which I liked from a conceptual + branding point of view but not as much in practice... thoughts?

[catarak]

Design

Light Colors

Gray - #999999
Black - #333333
Pink - #d9328f
Blue - #0f9dd7
Brown - #7a5a39
Green - #58a10b
Orange - #ee9900
White - #fdfdfd

Zeplin Screen

Dark Colors

Black - #282828
Gray - #999999
White - #FFFFFF
Pink - #d9328f
Blue - #0f9dd7
Gold Brown - #b58317
Green - #58a10b
Orange - #ee9900

Zeplin Screen