Syntax Highlighting in Instance Mode

[JetStarBlues]

Nature of issue?

• New feature request

New feature details:

p5.js keywords are currently not highlighted in instance mode (live link).

It would be awesome if they were. I noticed in the examples editor, some of the keywords are highlighted (live link).

Global mode for comparison (live link):

---

Possible concerns:

• How will the editor know that p is an instance of p5 and not a custom class that the user has defined which happens to have methods with similar names.

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[catarak]

Thanks for reporting! This would be great though I'm not quite sure how to fix it. I'm not an expert on how CodeMirror syntax highlighting works—basically there's a custom p5-javascript mode that pulls from a list of p5.js keywords. Maybe there's a way to highlight these keywords as class methods? Maybe using this CodeMirror utility would help?

[JetStarBlues]

I think scope might also play a role.

I've noticed that anything that is not global, does not get highlighted. For example (live link):

[kunalkumar007]

Does this issue is resolved?

• I am new to open source contribution and would like to try this issue.
• @catarak @jetStarBlues can you please see for it.

[JetStarBlues]

Hey @kunalkumar007 The issue is not resolved. Feel free to take it on!

[shubhamkapoor01]

Hey! i'd like to give this issue a shot tho i'm not yet sure how to fix it. here are a few observations while i start: -> in light and dark mode the global variables are highlighted but local variables are not. -> in high contrast mode both global and local variables are not highlighted.

[kunalkumar007]

Hy @shubhamkapoor01 Feel Free to take it on. I am busy with my sem end. So, won't be able to continue on it.

[calebfoss]

I gave this a try with PR #1996. The p5-javascript mode appears to style anything that follows a "." as a "property" (with exceptions for the async keyword), and once identified as a property, it ignores any matches with the p5-keywords. I made p5-keywords a priority instead, so if a token matches a p5-priority, it will styled as a p5Function or p5Variable regardless of whether it follows a ".".

Note that this PR does not address local scope variables/functions. For that, it looks like the change would be to the variable-2 class in the scss files for light theme, dark theme, and high contrast. But it looks like those styles were chosen deliberately.