Spans

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.

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

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

• 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