Search code examples
node-red

Is it possible to add the syntax highlight of other programming languages on the template node on Node-RED?

Using a function node on Node-RED, we can create a function that executes a piece of code in any other programming language stored on the template node. I've created a node that basically compiles and executes a c++ code that is stored on the template node all the times that there are changes on it. It works as follows:

enter image description here

However, the template node doesn't support the syntax of C++. Using the python one is good while I don't have any comments on the code and the Javascript one works for comments but it indicates errors on all lines because it's expecting Javascript code. Is it possible to include the syntax highlight of other programming languages besides the default ones on the template node?

Solution

  • Based on hardillb's answer and this issue on the official Node-RED forum, I've figured out how to include a different type of syntax highlight for the template node. Basically, we need to do four things:

    1. Find the location of the HTML file that creates the template node on the system. On Linux, it's located on /usr/local/lib/node_modules/node-red/node_modules/@node-red/nodes/core/function/80-template.html

    2. Inside the file 80-template.html, find the following block of code and add the extra syntax options that you need (in this example I've added C++ and Java):

      <select id="node-input-format" style="width:110px; font-size: 10px !important;  height: 24px; padding:0;">
    <option value="handlebars">mustache</option>
    <option value="html">HTML</option>
    <option value="json">JSON</option>
    <option value="javascript">Javascript</option>
    <option value="css">CSS</option>
    <option value="markdown">Markdown</option>
    <option value="python">Python</option>
    <option value="sql">SQL</option>
    <option value="yaml">YAML</option>
    <option value="c_cpp">C++</option>
    <option value="java">Java</option>
    <option value="text" data-i18n="template.label.none"></option>
</select>

    3. On this GitHub page of the Ace Editor, download a mode-desiredLanguage file and copy it to /usr/local/lib/node_modules/node-red/node_modules/@node-red/editor-client/public/vendor/ace. In my case, I've downloaded both mode-c_cpp.js and mode-java.js...

    4. Restart the service that is running Node-RED and reloads its page on the browser.

    Final Result

    enter image description here