# P5js keywords/functions Syntax highlighting

**URL:** <https://discourse.processing.org/t/p5js-keywords-functions-syntax-highlighting/1160>\
**Category:** p5.js\
**Created:** [June 22, 2018, 1:25am UTC](https://discourse.processing.org/t/p5js-keywords-functions-syntax-highlighting/1160 "2018-06-22T01:25:30Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![CrispyCabot](https://avatars.discourse-cdn.com/v4/letter/c/8edcca/32.png) [@CrispyCabot](https://discourse.processing.org/u/CrispyCabot)\
**Post date:** [June 22, 2018, 1:25am UTC](https://discourse.processing.org/t/p5js-keywords-functions-syntax-highlighting/1160/1 "2018-06-22T01:25:30Z")

</div>

So I have been using p5js in the desktop editor, but it is starting to annoy me that a lot of the p5js keywords and functions show up as just regular text. Is there any way I can manually add these keywords or is there a better editor to use?  
I know about openprocessing and other web editors, but I want something that can be easily saved directly to my desktop.

---

<div class="post-metadata">

**Author:** ![dan850](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dan850](https://discourse.processing.org/u/dan850)\
**Post date:** [June 22, 2018, 1:46am UTC](https://discourse.processing.org/t/p5js-keywords-functions-syntax-highlighting/1160/2 "2018-06-22T01:46:24Z")

</div>

Hi, have you tried “Atom”? - [https://atom.io/](https://atom.io/) This editor can open files and projects from whatever location on your computer.

---

<div class="post-metadata">

**Author:** ![CrispyCabot](https://avatars.discourse-cdn.com/v4/letter/c/8edcca/32.png) [@CrispyCabot](https://discourse.processing.org/u/CrispyCabot)\
**Post date:** [June 22, 2018, 2:23am UTC](https://discourse.processing.org/t/p5js-keywords-functions-syntax-highlighting/1160/3 "2018-06-22T02:23:20Z")

</div>

I’ve downloaded it now and have been messing with it for a little. It still doesn’t have quite the syntax highlighting I wanted, but is better. I am also now realizing that there needs to be an easy way to run it too, because simply running the html file gets some error about loading local images (which I am using) so I think I’ll just deal with Processing because it does some magic that works when I run it.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 22, 2018, 4:28am UTC](https://discourse.processing.org/t/p5js-keywords-functions-syntax-highlighting/1160/4 "2018-06-22T04:28:42Z")

</div>

> [@CrispyCabot](#):
>
> … because simply running the html file gets some error about loading local images

> [@How i extends class in p5.js?](https://discourse.processing.org/t/how-i-extends-class-in-p5-js/894/11):
>
> AFAIK, PDE’s p5js Mode doesn’t allow the instance mode approach I guess. grimacing The easiest way to run my demo sketches is by having any Firefox-based browser installed in your OS. star_struck I recommend Firefox Developer Edition, Waterfox & Palemoon: sunglasses Create some folder and then place both files “index.html” & “sketch.js” there. Finally open any Firefox-based browser and drag & drop the “index.html” file there. It should be run alright now! cowboy_hat_faceP.S.: …

---

<div class="post-metadata">

**Author:** ![bmoren](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bmoren/32/68_2.png) [@bmoren](https://discourse.processing.org/u/bmoren)\
**Post date:** [June 22, 2018, 4:47am UTC](https://discourse.processing.org/t/p5js-keywords-functions-syntax-highlighting/1160/5 "2018-06-22T04:47:20Z")

</div>

Running atom is a good desktop alternative. I’ve created a few plugins to help you get a more PDE like experience with atom

first is the toolbar which boots up a webserver to run your sketches with a play button like the PDE: [https://atom.io/packages/p5js-toolbar](https://atom.io/packages/p5js-toolbar)

Second is a syntax helper / snippets: [https://atom.io/packages/p5js-snippets](https://atom.io/packages/p5js-snippets)

Atom uses themes for it’s syntax highlighting, so it’s likely you can find a theme to suit your needs. You can also easily make themes using CSS if you happen to know a bit of that!  
search for them here: [https://atom.io/themes](https://atom.io/themes)

Here’s one I made a while back based on p5’s color scheme: [https://atom.io/themes/p5js-syntax](https://atom.io/themes/p5js-syntax)

How to install packages:  
[https://flight-manual.atom.io/using-atom/sections/atom-packages/](https://flight-manual.atom.io/using-atom/sections/atom-packages/)

---

<div class="post-metadata">

**Author:** ![bmoren](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bmoren/32/68_2.png) [@bmoren](https://discourse.processing.org/u/bmoren)\
**Post date:** [June 22, 2018, 4:51am UTC](https://discourse.processing.org/t/p5js-keywords-functions-syntax-highlighting/1160/6 "2018-06-22T04:51:54Z")

</div>

@GoToLoop This is not a complete answer, It’d be more helpful if you could add context for your replies beyond just linking to another place without any other information.

The reason that this is not working is because of browser restrictions, to load images with p5.js you need to be running a webserver. this might be a server in some other place on the internet or just running one on your localhost / on your local computer. Here are some good tips on running a local server in tandem with p5js: [https://github.com/processing/p5.js/wiki/Local-server](https://github.com/processing/p5.js/wiki/Local-server)

the p5js-toolbar atom package I mentioned above fully takes care of this for you!

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 22, 2018, 5:23am UTC](https://discourse.processing.org/t/p5js-keywords-functions-syntax-highlighting/1160/7 "2018-06-22T05:23:26Z")

</div>

> [@bmoren](#):
>
> … to load images with p5.js you need to be running a webserver.

This is further from the truth! The advice I give in my linked post is in odds to your statement! 🙄  
FF has always been able to run JS under the `file://` scheme since the beginning! 💪

---

<div class="post-metadata">

**Author:** ![bmoren](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bmoren/32/68_2.png) [@bmoren](https://discourse.processing.org/u/bmoren)\
**Post date:** [June 22, 2018, 1:38pm UTC](https://discourse.processing.org/t/p5js-keywords-functions-syntax-highlighting/1160/8 "2018-06-22T13:38:58Z")

</div>

chrome/webkit can run JS under the file:// scheme also, but it cant load the images because it treats it like a cross origin request. In order to load them, you need to run a local server (I find this preferable even when using FF since it more closely replicates the environment for a real deployment in the future if the sketch is going to be web based)

It depends on what browser your running!

ps.  
I wasn’t trying to say that you were wrong, just that the answer you provided lacked context (especially for a beginner) to understand why this would work in FF vs another browser! In the future, even a a few words to say why you linked to a post would be super helpful for a beginner.

---

<div class="post-metadata">

**Author:** ![CrispyCabot](https://avatars.discourse-cdn.com/v4/letter/c/8edcca/32.png) [@CrispyCabot](https://discourse.processing.org/u/CrispyCabot)\
**Post date:** [June 22, 2018, 3:36pm UTC](https://discourse.processing.org/t/p5js-keywords-functions-syntax-highlighting/1160/9 "2018-06-22T15:36:59Z")

</div>

These definitely help. I was able to find a p5js theme, but I still don’t like the syntax highlighting of it. The colors aren’t very distinguished and it’s hard to tell the difference between them at first glance unless you look closely. Also, I don’t really know why this is, but there is just a line in the editor which is really making me mad. [https://gyazo.com/ea94c8c6b437c70efa442c1c2875b040](https://gyazo.com/ea94c8c6b437c70efa442c1c2875b040)  
Secondly, is there a way to make it so when you open something it just opens it rather than a bunch of welcome windows?

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [June 22, 2018, 3:40pm UTC](https://discourse.processing.org/t/p5js-keywords-functions-syntax-highlighting/1160/10 "2018-06-22T15:40:32Z")

</div>

I’ll just chime in here and encourage you to not get too attached to any one editor or theme. Throughout your programming career (even if you aren’t a full-time programmer), you’re going to encounter different editors, different operating systems, different languages. I’d encourage you to get comfortable adapting to a bunch of different environments instead of trying to stick with one thing. But it’s up to you. Good luck!

---

<div class="post-metadata">

**Author:** ![bmoren](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bmoren/32/68_2.png) [@bmoren](https://discourse.processing.org/u/bmoren)\
**Post date:** [June 22, 2018, 3:54pm UTC](https://discourse.processing.org/t/p5js-keywords-functions-syntax-highlighting/1160/11 "2018-06-22T15:54:16Z")

</div>

check out that [atom flight manual](https://flight-manual.atom.io/), you need to read and uncheck the open welcome windows on start check boxes (have a read through those pesky windows before closing them). I think that line has to do with the text wrap. To get the text to wrap, turn on soft wrap in the settings menu.

@Kevin has a great point about not getting too attached to one editor or theme. Things change fast. Atom is maybe the 5th 10th? editor I’ve used in my career and likely if you ever collaborate in the future, you’re collaborator will have a completely different setup than you will so its good to get used to looking at all sorts of editors & syntax themes.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 22, 2018, 7:09pm UTC](https://discourse.processing.org/t/p5js-keywords-functions-syntax-highlighting/1160/12 "2018-06-22T19:09:01Z")

</div>

> [@bmoren](#):
>
> Chrome/WebKit can run JS under the `file://` scheme also; but it can’t load the images because it treats it like a cross-origin request.

Even for loading stuff under the `file://` scheme on Chromium-based browsers, there’s a “hack” for it: 😈

> **[How to allow-file-access-from-file in Chrome on any OS](https://chrome-allow-file-access-from-file.com/)**
>
> Step By Step Instructions on how to allow access flag on Windows, Linux & Mac. Then start viewing your local application files in the browser.

It may seem my main browser is FF-based; but actually I mainly use SlimJet, which is Chromium-based, w/ the “–allow-file-access-from-files” flag enabled in its shortcut. 😇

However, since when p5js started to convert some of its loading API to rely on the Fetch API, that flag “hack” stopped working on them; for example **loadTable()**. 😭

The Chrome devs made the Fetch API to reject the `file://` scheme on purpose! 💩

Of course the Fetch API works on FF under the `file://` scheme just like anything else! 👏

> [@bmoren](#):
>
> … you need to run a local server (I find this preferable even when using FF…

The FF quick & dirty “solution” is given as the simplest & easiest 1. 😋

> [@bmoren](#):
>
> … since it more closely replicates the environment for a real deployment in the future if the sketch is going to be web based).

I don’t see how temporarily running JS scripts under the `file://` scheme would impair n1 to deploy them under the `https://` scheme later. 🙄

---

<div class="post-metadata">

**Author:** ![bmoren](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bmoren/32/68_2.png) [@bmoren](https://discourse.processing.org/u/bmoren)\
**Post date:** [June 22, 2018, 8:07pm UTC](https://discourse.processing.org/t/p5js-keywords-functions-syntax-highlighting/1160/13 "2018-06-22T20:07:57Z")

</div>

This is all great info, super helpful! and much more supportive!

> [@GoToLoop](#):
>
> I don’t see how temporarily running JS scripts under the `file://` scheme would impair n1 to deploy them under the `https://` scheme later. 🙄

one issue that you might run into is using the audio or dom libraries to get the mic or camera, or using geolocation which afaik need to be run under https or localhost to function so it may be file and easy to run `file:///` for very simple things 👍 but it might be a good idea to get into the habit of a `localhost` or `https://` setup early on so you don’t run into these issues later.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 22, 2018, 8:18pm UTC](https://discourse.processing.org/t/p5js-keywords-functions-syntax-highlighting/1160/14 "2018-06-22T20:18:24Z")

</div>

> [@bmoren](#):
>
> One issue that you might run into is using the audio or dom libraries to get the mic or camera, or using geolocation…

SlimJet blocks them all (and others) by default for all URLs! 🤭

I’d have to unblock each 1 of them for each site. 😴