# More languages supported syntax highlighting in template nodes

**URL:** <https://discourse.nodered.org/t/more-languages-supported-syntax-highlighting-in-template-nodes/15041>\
**Category:** Feature Requests\
**Created:** [3 September 2019 06:05 UTC](https://discourse.nodered.org/t/more-languages-supported-syntax-highlighting-in-template-nodes/15041 "2019-09-03T06:05:40Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![T0T4R4](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/t0t4r4/32/10850_2.png) [@T0T4R4](https://discourse.nodered.org/u/T0T4R4)\
**Post date:** [3 September 2019 06:05 UTC](https://discourse.nodered.org/t/more-languages-supported-syntax-highlighting-in-template-nodes/15041/1 "2019-09-03T06:05:40Z")

</div>

Would it be possible to have more languages supported in syntax highlight within the template node (Python for example...) ?  
How could we make this easily configurable ?

Thanks !

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [3 September 2019 06:20 UTC](https://discourse.nodered.org/t/more-languages-supported-syntax-highlighting-in-template-nodes/15041/2 "2019-09-03T06:20:35Z")

</div>

Hi Matieu,  
Wanted to post a _related_ question this week. We want to have SVG syntax in the ACE editor of our new node (which is based on the Template node code), but get an [error](https://github.com/bartbutenaers/node-red-contrib-ui-svg/issues/2) when we specify 'svg'. Not sure whether we are using it incorrectly, or Node-RED only supports a limited set of syntaxes (html, javascript...).  
Bart

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [3 September 2019 06:45 UTC](https://discourse.nodered.org/t/more-languages-supported-syntax-highlighting-in-template-nodes/15041/3 "2019-09-03T06:45:15Z")

</div>

Yes currently we only support a few syntax highlighters to try to save space, but are going to relax that and install the complete default set for 1.0.. Would have to check if that includes svg. We wouldn't add them all to the template node, but they would be available to custom nodes.

---

<div class="post-metadata">

**Author:** ![kuema](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kuema/32/6542_2.png) [@kuema](https://discourse.nodered.org/u/kuema)\
**Post date:** [3 September 2019 06:49 UTC](https://discourse.nodered.org/t/more-languages-supported-syntax-highlighting-in-template-nodes/15041/4 "2019-09-03T06:49:04Z")

</div>

[This directory](https://github.com/node-red/node-red/tree/master/packages/node_modules/%40node-red/editor-client/src/vendor/ace) in the Node-RED repo gives a brief overview of all supported ACE modes.  
There is a mode file for Python, so it should already be supported. It isn't included in the selection list of the template node, though.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [3 September 2019 06:52 UTC](https://discourse.nodered.org/t/more-languages-supported-syntax-highlighting-in-template-nodes/15041/5 "2019-09-03T06:52:37Z")

</div>

Yes it was added so that contributed python node could use it.

---

<div class="post-metadata">

**Author:** ![kuema](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kuema/32/6542_2.png) [@kuema](https://discourse.nodered.org/u/kuema)\
**Post date:** [3 September 2019 06:57 UTC](https://discourse.nodered.org/t/more-languages-supported-syntax-highlighting-in-template-nodes/15041/6 "2019-09-03T06:57:29Z")

</div>

> [@dceejay](#):
>
> but are going to relax that and install the complete default set for 1.0

That would be greatly appreciated. 🙂

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [3 September 2019 10:35 UTC](https://discourse.nodered.org/t/more-languages-supported-syntax-highlighting-in-template-nodes/15041/7 "2019-09-03T10:35:53Z")

</div>

> [@dceejay](#):
>
> install the complete default set for 1.0.

@dceejay,  
Do you mean that all [these](https://cloud9-sdk.readme.io/docs/language-mode) language modes will be supported?

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [3 September 2019 10:44 UTC](https://discourse.nodered.org/t/more-languages-supported-syntax-highlighting-in-template-nodes/15041/8 "2019-09-03T10:44:57Z")

</div>

I think so - looks same as these - [https://github.com/ajaxorg/ace-builds/tree/master/src](https://github.com/ajaxorg/ace-builds/tree/master/src)  
Well maybe not all all - but a lot more... not sure we really need 1MB for php etc

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [3 September 2019 11:40 UTC](https://discourse.nodered.org/t/more-languages-supported-syntax-highlighting-in-template-nodes/15041/9 "2019-09-03T11:40:09Z")

</div>

Maybe a way to add custom ones? Then people could add odd ones if they needed to.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [3 September 2019 11:41 UTC](https://discourse.nodered.org/t/more-languages-supported-syntax-highlighting-in-template-nodes/15041/10 "2019-09-03T11:41:11Z")

</div>

Another API to maintain ? No thanks  
(Especially when you may not want ACE editor anyway...)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [3 September 2019 11:41 UTC](https://discourse.nodered.org/t/more-languages-supported-syntax-highlighting-in-template-nodes/15041/11 "2019-09-03T11:41:54Z")

</div>

Just a folder, I wouldn't expect to need another API.

---

<div class="post-metadata">

**Author:** ![kuema](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kuema/32/6542_2.png) [@kuema](https://discourse.nodered.org/u/kuema)\
**Post date:** [3 September 2019 11:43 UTC](https://discourse.nodered.org/t/more-languages-supported-syntax-highlighting-in-template-nodes/15041/12 "2019-09-03T11:43:35Z")

</div>

But you would need to "convince" ACE to load it from a different location.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [3 September 2019 12:20 UTC](https://discourse.nodered.org/t/more-languages-supported-syntax-highlighting-in-template-nodes/15041/13 "2019-09-03T12:20:21Z")

</div>

Isn't it all served from a web server? If so, it is trivial to add another folder to a URL. I make good use of that with uibuilder.

Bear in mind though that I don't know the guts of how ACE works so it might not be that easy. But if it is easy, it would be very helpful indeed. Not only would it let the NR core stay lean but it would make NR's use of ACE super flexible.

---

<div class="post-metadata">

**Author:** ![kuema](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kuema/32/6542_2.png) [@kuema](https://discourse.nodered.org/u/kuema)\
**Post date:** [3 September 2019 12:27 UTC](https://discourse.nodered.org/t/more-languages-supported-syntax-highlighting-in-template-nodes/15041/14 "2019-09-03T12:27:46Z")

</div>

It is, serving the files would be the easy part.

I meant the ACE part. AFAIR there is this `setMode()` function on the editor session which takes a string of the mode's name. I think the magic to resolve this into an URL call happens inside the ACE library.  
I do not know if you can pass an URL directly to `setMode()`. If so, it would be really easy to add new modes.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [3 September 2019 12:46 UTC](https://discourse.nodered.org/t/more-languages-supported-syntax-highlighting-in-template-nodes/15041/15 "2019-09-03T12:46:40Z")

</div>

The point is that you don't need another URL, only another folder accessible to the web server 🧙

ExpressJS allows you to add multiple folders to a single URL if you are serving static files. This would have to happen at Node-RED startup but that is normal.

If there is a complexity it would be around discovery of the mode name. Most nodes (all?) that use the ACE editor have, I think, a manual list of mode names. Still, you could still use this with custom nodes very easily.

---

<div class="post-metadata">

**Author:** ![T0T4R4](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/t0t4r4/32/10850_2.png) [@T0T4R4](https://discourse.nodered.org/u/T0T4R4)\
**Post date:** [3 September 2019 13:12 UTC](https://discourse.nodered.org/t/more-languages-supported-syntax-highlighting-in-template-nodes/15041/16 "2019-09-03T13:12:11Z")

</div>

What  
Is  
ACE ?  
😃

---

<div class="post-metadata">

**Author:** ![kuema](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kuema/32/6542_2.png) [@kuema](https://discourse.nodered.org/u/kuema)\
**Post date:** [3 September 2019 13:21 UTC](https://discourse.nodered.org/t/more-languages-supported-syntax-highlighting-in-template-nodes/15041/17 "2019-09-03T13:21:41Z")

</div>

It's the editor component used for function nodes, templates, etc. 😀

[https://ace.c9.io/](https://ace.c9.io/)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [3 September 2019 13:34 UTC](https://discourse.nodered.org/t/more-languages-supported-syntax-highlighting-in-template-nodes/15041/18 "2019-09-03T13:34:45Z")

</div>

@dceejay on a related note to SVG support, I have noticed on editing JSON syntax in Node-RED TypedInputs that there is a "Format JSON" button.

Would you know if the library that performs this "pretty print" operation supports SVG/XML/HTTP?

As you know @BartButenaers and I are working on an SVG node & along with syntax support, we hope to add a similar "Format SVG" feature but before we import another LIB, we wondered if there is either something built in to Node-RED, or something that would/could be added when additional language support is added for ACE?

Thanks.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [3 September 2019 13:54 UTC](https://discourse.nodered.org/t/more-languages-supported-syntax-highlighting-in-template-nodes/15041/19 "2019-09-03T13:54:17Z")

</div>

Not sure. I know @knolleary sweated days on that.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [3 September 2019 14:11 UTC](https://discourse.nodered.org/t/more-languages-supported-syntax-highlighting-in-template-nodes/15041/20 "2019-09-03T14:11:10Z")

</div>

> [@Steve-Mcl](#):
>
> Would you know if the library that performs this "pretty print" operation supports SVG/XML/HTTP?

It uses the standard JSON.stringfy to do it - no library involved.

But this is nothing to do with the topic of the thread, so if you want to ask more, please use a new topic.

[Next page](https://discourse.nodered.org/t/more-languages-supported-syntax-highlighting-in-template-nodes/15041.md?page=2)