WebDev4R: Understanding Quarto Notation

[This article was first published on Albert Rapp, and kindly contributed to R-bloggers]. (You can report issue about the content on this page here)
Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.

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>

Some text

Some more text


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
:::

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
:::

Some text

Some more text

Similarly, you can add more of these utility classes:

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

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="font-weight:600;font-family:Merriweather;"}
  Some text
  
  Some more text
:::

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="font-weight:600;font-family:Merriweather;"}
  Some text
  
  Some [more]{style="color:blue"} text
:::

Some text

Some more 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:

To leave a comment for the author, please follow the link and comment on their blog: Albert Rapp.

R-bloggers.com offers daily e-mail updates about R news and tutorials about learning R and many other topics. Click here if you're looking to post or find an R/data-science job.
Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.

Never miss an update!
Subscribe to R-bloggers to receive
e-mails with the latest R posts.
(You will not see this message again.)

Click here to close (This popup will not appear again)