Spans

You can apply styles to inline text by creating spans using [] to surround the text you want to style and {} to define the style you want to apply.

For example, to achieve the styling in the following sentence:

To draw attention to a specific part of the text, you might want to make it red with a yellow background; like this.

You can use the following:

To draw attention to a specific part of the text, you might want to make it [red]{style="color: red;"} with a [yellow background]{style="background-color: yellow;"}; [like this]{style="color: red; background-color: yellow;"}.

Some tips for using spans:

If you’re authoring in RStudio using the visual editor, you can create a span by selecting the text you want to format and using the Format -> Span command.

Creating a span using the visual editor Span Attributes menu. This menu has four elements: ID, Classes, CSS Styles, and Other. The CSS styles element in the menu shows background-color: yellow;.

You can also define a CSS class and apply it to the span. For example,

.important {
  background-color: yellow;
  color: red;
}

Creating a span using the visual editor Span Attributes menu. This menu has four elements: ID, Classes, CSS Styles, and Other. The Classes element in the menu shows .important.

Spans can also be used to define fragments in Quarto revealjs presentations. Use the left arrow on your keyboard to advance the slides below to

Output
Code

## Fragments

::: columns
::: {.column width="50%"}
[This shows up first,]{.fragment fragment-index="1" style="color:orange;"}
:::

::: {.column width="50%"}
[then this,]{.fragment fragment-index="2" style="color: blue;"}
:::
:::

[then this.]{.fragment fragment-index="3" style="color: pink;"}

Learn more

Site Resources