Introducing Syntax Highlighting for the Edit Step page in Google Chrome

Written by: Electric Bee
2 min read
Stay connected

At CloudBees we have a history of using what we produce. This means I get to use ElectricCommander on a daily basis and find myself frequently creating and editing steps within the Commander Web UI. A recurring problem that comes up is how to debug a script defined in Commander that has an error. How many times have you seen an error like this:
Global symbol "$j" requires explicit package name at C:UsersnvazeAppDataLocalTempecmdrAgent/agent.QXEM7ALX703PCTRY.run-4030-27875.cmd line 14.
Execution of C:UsersnvazeAppDataLocalTempecmdrAgent/agent.QXEM7ALX703PCTRY.run-4030-27875.cmd aborted due to compilation errors.
Let's take a look at the current UI and see if we can spot the error.

Screenshot of current Edit Step page in the ElectricCommander Web UI.
Hmm, it is pretty hard to count line numbers and reserved words do not show up in different colors. There had to be a better way, so I wrote a quick Chrome extension to use the CodeMirror project to provide syntax highlighting.
After you install the Chrome extension this is what you should see:

Screenshot of syntax highlighted edit step page.
Notice how the text area now has line numbers and reserved words pop out. Line 14 is now very easy to pick out. As a daily Commander user this makes my life easier when viewing arbitrary steps.
Installation Instructions:
To enable syntax highlighting, install the Chrome extension from the Chrome web store and visit the Edit Step page for any step in your favorite procedure. Syntax highlighting will turn on automatically and defaults to the Perl language. There is a dropdown selector which allows users to change between various programming languages. Currently, the extension supports these languages: Perl, Shell, JavaScript, Python, Ruby and TCL.
Notes
1. The extension is only available for Google Chrome.
2. There is no compile time checking to show mistakes in real time.
3. The extension will only be active on web pages that match “commander*editStep*” (i.e. Commander Edit Step pages).
4. The extension will only work for ElectricCommander v4.2 and later.
5. For now the extension is in beta and is a side project of mine but I’m very interested in feedback!
Download the Google Chrome extension here .
Chrome is a trademark of Google Inc.

Stay up to date

We'll never share your email address and you can opt out at any time, we promise.