Friday, January 22, 2021

Rainbow Parentheses in RStudio

I use the open-source edition of the RStudio IDE for any R coding I do, and I'm a big fan of it. The latest version (1.4.1103) introduced a new feature that was previously only available in alpha and beta versions: rainbow parentheses. I'd never heard the term before, but the meaning turns out to be remarkably simple. When turned on, if you enter an expression with nested parentheses, brackets or braces, RStudio automatically color codes the parentheses (brackets, braces) to make it easier to see matching pairs. This is in addition to the existing feature that highlights the matching delimiter when you put the cursor after a delimiter.

I was geeked to try this out, but when I first installed the latest version and turned it on, I did not see any changes. Eventually I figured out that it was color coding the delimiters, but the differences were too subtle for me to see. (This was with the default Textmate theme for the IDE.) So I hacked a new theme which makes the colors easier to see. I'll go through the steps here.

First, let me point to some documentation. In a blog post, the folks at RStudio explain how to turn rainbow parentheses on, either globally or just for specific files, and near the end tell which CSS classes need to be tweaked to customize the colors (.ace_paren_color_0 to .ace_paren_color_6). A separate document discusses how to create custom themes.

Theme selection in RStudio is done via Tools > Global Options... > Appearance > Editor theme. Since I use the default (Textmate) theme, my first step was to track down that file and make a copy with a new name. On my Linux Mint system, the file is /usr/lib/rstudio/resources/themes/textmate.rstheme. On Windows (and Macs?) the built-in themes will be lurking somewhere else. The customization document linked above alluded to a ~/.R/rstudio/themes directory on Linux and Macs, but that directory did not exist for me. (I created it, and parked my hacked theme file there.) Put the copied file someplace under a new name. I'm not sure whether the file name is significant to RStudio, but better safe than sorry.

Open the copy you made of your preferred theme file in a text editor. The first two lines are comments that define the theme name (as it will appear in the list of editor themes in RStudio) and whether it is a dark theme or not. Change the name to something that won't conflict with existing themes. In my case, the first line was

/* rs-theme-name: Textmate (default) */
which I changed to
/* rs-theme-name: Paul */
(not very clever, but it got the job done).

Now add code at the bottom to define colors for the seven "ace_paren_color" styles. Here's what I used:

.ace_paren_color_0 {
  color: #000000 
  /* black */
}

.ace_paren_color_1 {
  color: #ff00ff
  /* magenta */
}

.ace_paren_color_2 {
  color: #ffff00
  /* yellow */
}

.ace_paren_color_3 {
  color: #0080ff
  /* light blue */
}

.ace_paren_color_4 {
  color: #FF0000
  /* red */
}

.ace_paren_color_5 {
  color: #004f39
  /* Spartan green */
}

.ace_paren_color_6 {
  color: #0000ff
  /* dark blue */
}

Once you have a candidate style to test, go to the editor themes settings and use the Add... button to add it. I had to fight through a lot of complaints from RStudio, and I needed to restart RStudio to get the new theme to appear. In the same dialog, I selected it, and then put it to the test by typing some nonsense with lots of nested parentheses in a file.

There are two things to watch out for if you try to remove a theme (using the Remove button in that dialog). First, you cannot remove the currently selected theme, so you will need to select a different theme and click Apply, then go back and select the theme to remove. Second, if you remove a theme, RStudio will delete the theme file. So be sure you have a backup copy if you think you might want to use it again (or edit it).

One good thing: once you have added your theme, you can edit your theme without having to remove it and then add it back. After saving any changes, you just have to switch to some other theme and then switch back to your theme to see the impact of the changes in your documents.

2 comments:

  1. Appreciate this!

    I found this after being frustrated with the default rainbow parens colors, so I was able to update them to be more colorblind friendly.

    Something I toyed with previously myself was to have the bracket pair blink with:

    .ace_bracket {
    margin: 0 !important;
    border: 0 !important;
    background-color: rgba(127, 127, 127, 0.8);
    animation: blinker 1s ease infinite;
    }

    @keyframes blinker {
    50% {
    opacity: 0;
    }
    }

    in my custom theme.

    I extended what you've done here by playing with other attributes for the ace_paren_color_# style, specifically the font-size attribute. Though I found if you do so, adjusting the letter-spacing and vertical-align is also necessary or the cursor can get out of alignment with the text after too many nested parens.

    Here are my colorblind friendly rainbow parens for in case anyone else is interested (colors come from: https://www.nature.com/articles/nmeth.1618),

    .editor_dark .ace_paren_color_0 {
    color: #FFFFFF;
    }

    .editor_dark .ace_paren_color_1 {
    color: #E69F00;
    font-size: 90%;
    letter-spacing: +0.1em;
    vertical-align: -1%;
    }

    .editor_dark .ace_paren_color_2 {
    color: #56B4E9;
    font-size: 80%;
    letter-spacing: +0.12em;
    vertical-align: -2%;
    }

    .editor_dark .ace_paren_color_3 {
    color: #009E73;
    font-size: 110%;
    letter-spacing: -0.06em;
    vertical-align: top;
    }

    .editor_dark .ace_paren_color_4 {
    color: #F0E442;
    font-size: 95%;
    letter-spacing: +0.05em;
    vertical-align: -6%;
    }

    .editor_dark .ace_paren_color_5 {
    color: #0072B2;
    font-size: 90%;
    letter-spacing: +0.1em;
    vertical-align: -5%;
    }

    .editor_dark .ace_paren_color_6 {
    color: #D55E00;
    font-size: 80%;
    letter-spacing: +0.12em;
    vertical-align: -4.5%;
    }

    ReplyDelete
  2. Thanks for sharing this! I notice your mods have "_dark" in them. Are they for a dark theme?

    ReplyDelete

Due to intermittent spamming, comments are being moderated. If this is your first time commenting on the blog, please read the Ground Rules for Comments. In particular, if you want to ask an operations research-related question not relevant to this post, consider asking it on Operations Research Stack Exchange.