# Editor Environment Highlight for Kids

**URL:** https://discourse.processing.org/t/editor-environment-highlight-for-kids/30700
**Category:** Teaching
**Created:** [June 14, 2021, 8:11am UTC](https://discourse.processing.org/t/editor-environment-highlight-for-kids/30700 "2021-06-14T08:11:43Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Viz](https://avatars.discourse-cdn.com/v4/letter/v/50afbb/32.png) [@Viz](https://discourse.processing.org/u/Viz)
#### Post date: [June 14, 2021, 8:11am UTC](https://discourse.processing.org/t/editor-environment-highlight-for-kids/30700/1 "2021-06-14T08:11:43Z")

</div>

Hi, I am currently teaching a group of 11 to 12 year olds how to code simple games in javascript.  
I’m trying to teach them about how functions work.  
I was wondering if there could be a feature in the editor that displays a colour for any region between curly brackets and regular brackets. Something like this?  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4390e983edc41d5b9cf686c4783f18a4d95c4208.png)  
I think this will help the students to see where to write code.

---

<div class="post-metadata">

### Author: ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)
#### Post date: [June 14, 2021, 11:07am UTC](https://discourse.processing.org/t/editor-environment-highlight-for-kids/30700/2 "2021-06-14T11:07:33Z")

</div>

none of that I know, but since CodeMirror (used by most of the browser based coding environment) supports [bracket matching](https://codemirror.net/6/docs/ref/#matchbrackets) it should be possible to implement - or you may be able to make it by cloning the p5.js editor and add your theme (which is not easy if you are not familiar with docker/html/css)

---

<div class="post-metadata">

### Author: ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)
#### Post date: [June 14, 2021, 12:46pm UTC](https://discourse.processing.org/t/editor-environment-highlight-for-kids/30700/3 "2021-06-14T12:46:29Z")

</div>

Reminds me a little of frame-based editing as here, although it’s not JavaScript.

[https://www.greenfoot.org/frames/](https://www.greenfoot.org/frames/)

---

<div class="post-metadata">

### Author: ![Randomhouse](https://avatars.discourse-cdn.com/v4/letter/r/a88e57/32.png) [@Randomhouse](https://discourse.processing.org/u/Randomhouse)
#### Post date: [June 15, 2021, 4:39am UTC](https://discourse.processing.org/t/editor-environment-highlight-for-kids/30700/4 "2021-06-15T04:39:19Z")

</div>

Can you DM me about a paid project?

---

<div class="post-metadata">

### Author: ![codeguppy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codeguppy/32/8322_2.png) [@codeguppy](https://discourse.processing.org/u/codeguppy)
#### Post date: [July 31, 2021, 4:42pm UTC](https://discourse.processing.org/t/editor-environment-highlight-for-kids/30700/5 "2021-07-31T16:42:58Z")

</div>

Hi! This looks like an interesting idea!

I don’t know any editor like that … but since you asked about a coding environment for kids – I want to highlight you [codeguppy.com](https://codeguppy.com)

 ![plane-vs-objects](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/74c020b88543bccb9104ba144bdadf89df93c53f.png)

It is an online coding environment based on p5.js for kids. It has also certain features on top of p5.js to make easier game dev. For instance it supports Microsoft MakeCode type-in sprites:

 ![code_sprites](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1495028b637cc57e90ae08ee0a5ae5e0d994d398.jpeg)
