Darcula Syntax Highlighting for Black Apps Script Chrome Extension

How Darcula Syntax Highlighting Looks in the Black Apps Script Chrome Extension

This year, I became a huge fan of the Chrome Extension Black Apps Script from the team at SW Root.

Not only does it allow us to have dark mode syntax highlighting for our Google Apps Script code in the IDE, but it also has some other great functionality.

My favourites are:

  1. Search and, search and replace across all files in a project rather than just the current page.
  2. The left sidebar can be closed, giving me a lot more room to work, particularly on a laptop.
  3. Folder tree view for when I push from a local CLASP version of my code back to the Google Apps Script IDE and I have built it in a directory.
  4. The ability to add your own custom syntax highlighting.

I am quite fond of Darcula Syntax Highlighting (not to be confused with Dracula, blah, blah-blah). Fortunately, the Google Apps Script IDE uses the Monaco text editor as its IDE basis, and SW Root has exposed the syntax highlighting for this in Black Apps Script.

I spent some time rebuilding Darcula following the Monaco Editor’s JSON specifications and added it to Black Apps Script.

I think it turned out pretty good:

How Darcula Syntax Highlighting Looks in the Black Apps Script Chrome Extension
How Darcula Syntax Highlighting Looks in the Black Apps Script Chrome Extension

Steps to Add the Darcula Syntax Highlighting JSON to Black Apps Script

  1. Ensure you have added the Chrome extension.
  2. Open your Google Apps Script IDE and ensure Black Apps Script is working
  3. In the top-right of your browser, click the ‘Extension’ icon.
  4. Select the Black Apps Script extension

    Access the Black Apps Script Chrome Extensions from the Browser
    Access the Black Apps Script Chrome Extension from the Browser
  5. You will see a settings menu. Ensure the Theme is set to Custom and click the cog.

    In the Black Apps Script Chrome Extension Set Theme To Custom and Click the Cog Icon
    In the Black Apps Script Chrome Extension, Set Theme To Custom and Click the Cog Icon
  6. Another dialogue will open with a text area for you. Copy in the JSON for the Darcula Syntax Highlighting from the code snippet below and hit save.

    In the Black Apps Script Chrome Extension Paste in the Darcula Syntax Highlighting and Save
    In the Black Apps Script Chrome Extension Paste in the Darcula Syntax Highlighting and Save
  7. Close the window. You should see your IDE hase been update to our favourite syntax highlighting. Woot!

Darcula Syntax Higlighting JSON for Black Apps Script

 

Leave a Reply