WebDev4R: Understanding Quarto Notation

Quarto is a great tool to create all kinds of documents from the same source code. But it’s notation can sometimes feel random and confusing. For example, if you’ve ever wondered why you had to use

::: {.panel-tabset}

## Panel 1

## Panel 2

:::

to create a few tabs in your document, you’re not alone. I’ve wondered about the same thing too. Until I realized that it borrows a lot of its notation from HTML and CSS. That’s what I’m going to show you today. As always, you can find the video version of this blog post on YouTube:

Creating div containers

Since Quarto in a way is Markdown and Markdown is HTML & CSS, you can use HTML and CSS code works out of the box. You could just insert this into your Quarto document as is:

<div>
  <p>Some text</p>
  <p>Some more text</p>
</div>

But using vanilla HTML & CSS kind of defeats the purpose. This is why Quarto has a lot of different notation for the same things that you want to do. In Quarto, you can create a div container using the triple colon notation :::. Just wrap whatever you want to stick into this container into these triple colons, and all of this will be nested inside a container. And for new paragraphs (like we did with the <p> tags), you can just use a blank line.

::: {}
  Some text
  Some more text
:::

Adding Classes to Containers

Notice how I used the curly braces {} after the triple colons. This one is actually necessary to create a container. Otherwise, it won’t render properly. And it feels superfluous but that’s only because we’re not adding any classes or style instructions to this container. That’s what the curly braces are for.

For example, you can use the text-danger class from Bootstrap that Quarto uses. That way, your text will become the color your theme uses for error messages etc.

::: {.text-danger}
  Some text
  
  Some more text
:::

Similarly, you can add more of these utility classes:

::: {.text-danger .text-center}
  Some text
  
  Some more text
:::

Adding styles to containers

Also, you can add custom styles using the style argument. Just make sure that you’re not using whitespaces before and after the equal sign, otherwise it won’t work.

::: {.text-danger .text-center style="-weight:600;-family:Merriweather;"}
  Some text
  
  Some more text
:::

Inline Text Styling

The same thing also works with inline text. For example, if you want to highlight a specific word in your text, you could make this happen by wrapping that word in your Quarto document into brackets and then use curly braces to add style instructions.

::: {.text-danger .text-center style="-weight:600;-family:Merriweather;"}
  Some text
  
  Some [more]{style="color:blue"} text
:::

Styling Sections

The same thing works with sections via headlines as well. Just be careful that if you create a new headline, it will also create the whole section for this, and the whole style will be applied to this section.

### A new blue section {style="color:blue"}

Some text here to show you that everything in the style instruction is applied to this section.

A new blue section

Some text here to show you that everything in the style instruction is applied to this section.

Conclusion

So, coming back to the tabset panel, you can see that this is just a container with a class that Quarto uses for panels. In this case, that class name is .panel-tabset. I hope this short article untangles some of the mysteries behind the Quarto notation. And if you found this helpful, here are some other ways I can help you:

• 3 Minute Wednesdays: A weekly newsletter with bite-sized tips and tricks for R users
• Insightful Data Visualizations for “Uncreative” R Users: A course that teaches you how to leverage {ggplot2} to make charts that communicate effectively without being a design expert.