Repository navigation
Add Syntax Highlighting for p5.js Variables #3868
Description
Notes
This issue is part of the ongoing work to upgrade CodeMirror from v5 to v6 (see the parent issue for additional context). This also references the develop-codemirror-v6 branch for development, and not the main develop branch.
Background
In the p5.js Editor, variables and functions from the p5.js library are visually highlighted to make them easier to identify while coding. For example, p5.js functions have bold text, while p5.js variables have bold text and a pink color.
At the moment, this highlighting is missing in the CodeMirror v6 branch. Here are two screenshots below showing what the editor looks like with and without syntax highlighting.
With Syntax Highlighting - Current p5.js Editor:
Without Syntax Highlighting - CodeMirror v6 Branch:
Implementation
We'd like to add syntax highlighting for p5.js-specific keywords back in to help make distinguishing p5.js from regular JavaScript easier. It should look like:
- p5.js Functions: bolded text
- p5.js Variables: bolded text and pink text color
Updated styling should be added on line 55 within client/modules/IDE/components/Editor/highlightStyle.js. These changes should mirror current editor behavior.
Suggestions to Start
- Review how styles are currently applied within highlightStyle.js to understand how they're setup.
- The p5.js Editor is a great reference to check and confirm what the expected colors and emphasis for specific keywords should be.
- You can also use the p5.js Reference to see a full list of all p5.js functions and variables.
Activity
ksen0 commentedon Feb 13, 2026
Please note: This issue is reserved for CodeDay Contributors, and is not open for general contribution—for these, please check out issues that do not have the "CodeDay" or "On Hold" label!
PeterKamau24 commentedon Mar 3, 2026
I'm working on this. :)
ksen0 commentedon Mar 4, 2026
Hi @PeterKamau24 ! Can you confirm if you're coming here through CodeDay? Please not the issue is reserved for the CodeDay microinternship. Thanks for understanding!
PeterKamau24 commentedon Mar 4, 2026
khanniie commentedon May 30, 2026
@ksen0 Should we re-open this to codeday contributors and remove the on hold label?
ksen0 commentedon May 31, 2026
Hi @khanniie I've removed the on hold! It was for CodeDay in March, and it was assigned to @PeterKamau24 but no PR was raised. We could either release it to general contributors or keep it for the next round of microinternships (next month or so) - let me know if you think it's better to make it generally available?
khanniie commentedon May 31, 2026
@ksen0 id be down to make it generally available! There's always new things I can think of for code day contributions and I plan to merge cm6 soon so it would be good to get this fixed sooner if possible
ksen0 commentedon May 31, 2026
Thanks @khanniie ! This issue is now open for new volunteers.
parthjadhao01 commentedon May 31, 2026
hi @khanniie can i work on this issue
khanniie commentedon May 31, 2026
@parthjadhao01 yes, thank you!
fix: restored p5.js keyword highlighting for CM6 #3868
Merge pull request #4141 from parthjadhao01/fix/p5-syntax-highlightin…