Demo: Editor Options

Important

These features were implemented in 0.4.2 of {quarto-webr}.

Overview

This feature demo introduces new cell-level options for styling the interactive editor associated with {webr-r} code blocks. These editor-specific options offer greater flexibility when working with the Monaco Editor integrated into the interactive area. Options involving the editor are usually prefixed with editor.

Note

These options are only configurable during the document authoring stage.

editor-code-line-numbers Option

Lines inside of the editor may be highlighted through the editor-code-line-numbers option. Specifying the highlighting of a line is done by providing a range of line numbers separated by a hyphen or a comma. For example:

  • editor-code-line-numbers: 2-6 will highlight lines 2 to 6.
  • editor-code-line-numbers: 1,3,5 will highlight lines 1, 3, and 5.
  • editor-code-line-numbers: 1-3,5 will highlight lines 1 to 3 and 5.

This feature is useful for drawing attention to specific line. You may wish to combine it with readonly: true.

Specifying Ranges

The following cell demonstrates the use of the editor-code-line-numbers option to highlight a range of lines in the editor. Lines 2-6 should be highlighted in the editor below.

```{webr-r}
#| label: editor-line-numbers
#| editor-code-line-numbers: 2-6

hello_world <- function(age) {
  if (age > 30) {
    print('You are old')
  } else { 
    print('You are young!')
  }
}
hello_age(22)
```

Specifying Single Line

The following cell demonstrates the use of the editor-code-line-numbers option to highlight a single line in the editor. Line 2 should be highlighted in the editor below.

```{webr-r}
#| label: editor-line-number
#| editor-code-line-numbers: 2

hello_world <- function(age) {
  if (age > 30) {
    print('You are old')
  } else { 
    print('You are young!')
  }
}
hello_age(22)
```

Specifying Multiple Lines

The following cell demonstrates the use of the editor-code-line-numbers option to highlight multiple lines in the editor. Lines 1 - 3 and 5 should be highlighted in the editor below.

```{webr-r}
#| label: editor-multiple-line-numbers
#| editor-code-line-numbers: 1-3,5

hello_world <- function(age) {
  if (age > 30) {
    print('You are old')
  } else { 
    print('You are young!')
  }
}
hello_age(22)
```

editor-word-wrap Option

The editor area allows for text to wrap to the next line when it reaches the end of the editor window. This feature is enabled by setting the editor-word-wrap option to true.

Wrapped Long Code Lines

In the following cell, the editor window is set to wrap long lines of code to the next line.

```{webr-r}
#| label: editor-word-wrap-enabled
#| editor-word-wrap: true

# A long line of code that will wrap to the next line in the editor window to avoid horizontal scrolling
```

Unwrapped Long Code Lines

In the following cell, the editor window is set to not wrap long lines of code to the next line.

```{webr-r}
#| label: editor-word-wrap-disabled
#| editor-word-wrap: false

# A long line of code that will **NOT** wrap to the next line in the editor window and will require horizontal scrolling
```

editor-quick-suggestions Option

Suggestions based on autocompletion can be enabled by setting the editor-quick-suggestions option to true. Enabling autocompletion means that the name of variables and functions will be viewable in a pop-up menu after pausing for a while on a line of code.

Enabled Suggestions

In the following cell, you should be able to access on a new line of code the variable “supercalifragilisticexpialidocious” by pausing after typing super.

```{webr-r}
#| label: editor-suggestions-enabled
#| editor-quick-suggestions: true

supercalifragilisticexpialidocious = 42L

# Try typing super ...
su

```
Note

We’ve temporarily disabled editor quick suggestions by default as the options presented were often more confusing than intended.

editor-max-height Option

The editor maximum line height is now controlable through the editor-max-height option. By default, the editor is set to grow infinitely as new lines of code are added. By specifying a pixel value, all lines up to the threshold will be shown while later lines will require the use of the scroll bar in the editor window to access.

Fixed Height

The following editor has a fixed height of 55 pixels.

```{webr-r}
#| label: editor-fixed-growth
#| editor-max-height: 55
1 + 1

print("hello")
```

Infinite Height

The following editor will automatically grow as new lines of code are added.

```{webr-r}
#| label: editor-infinite-growth
1 + 1

print("hello")
```

editor-font-scale Option

The editor area now inherits font size from Quarto’s fontsize theme option, ensuring consistency with other elements on the page. You can adjust the font size for the editor relative to Quarto’s output by setting the editor-font-scale option. When editor-font-scale is:

  • Equal to 1 (= 1), the editor’s font size matches the fontsize value.
  • Less than 1 (< 1), the editor’s font size is smaller than the fontsize value.
  • Greater than 1 (> 1), the editor’s font size is larger than the fontsize value.

Default Size

By default, we set editor-font-scale to 1, aligning the editor font size with the fontsize value.

Let’s consider a standard code cell that fits a linear model and obtains the confidence intervals for one or more parameters in a fitted model:

fit = lm(mpg ~ am, data = mtcars)

confint(fit)
               2.5 %   97.5 %
(Intercept) 14.85062 19.44411
am           3.64151 10.84837

Now, let’s observe the effect with editor-font-scale: 1:

Notice the consistency in font sizes.

Reducing Editor Size

To decrease the font size, we set a value between 0 < editor-font-size < 1. For example, let’s set editor-font-scale to 0.5:

Increasing Editor Size

To increase the font size, we set a value between editor-font-size > 1. For example, let’s set editor-font-scale to 2:

Scaling Content Areas

In this example, we create a custom area using a Div block in Quarto and set the div’s font size to 150%. Consequently, the editor inherits the font size within the area.

Quarto code cell for R
fit = lm(mpg ~ am, data = mtcars)

confint(fit)
               2.5 %   97.5 %
(Intercept) 14.85062 19.44411
am           3.64151 10.84837
webR code cell under quarto-webr

::: {#big-text style="font-size: 150%"}

Quarto code cell for R

::: {.cell}

```{.r .cell-code}
fit = lm(mpg ~ am, data = mtcars)

confint(fit)
```

::: {.cell-output .cell-output-stdout}

```
               2.5 %   97.5 %
(Intercept) 14.85062 19.44411
am           3.64151 10.84837
```


:::
:::

webR code cell under quarto-webr

```{webr-r}
#| autorun: true
fit = lm(mpg ~ am, data = mtcars)

confint(fit)
```
:::

Fin

We’re excited to see how you use these new editor specific options to enhance your interactive documents. If you have any feedback or suggestions, please let us know by opening an issue on the {quarto-webr} GitHub repository.

Important

This Quarto extension is open source software and is not affiliated with Posit, Quarto, or webR. The extension is at best a community effort to simplify the integration of webR inside of Quarto generated documents.