7

I would like to color a word in a sentence that is being rendered in quarto to HTML. In R Markdown I would just add a css tag but I don't see how to do that in quarto. The quarto documentation says that it is possible to write inline css but there is no example. There is a hyperlink that shows a R Markdown example:

```{css, echo=FALSE}
body {
  color: red;
}
```

When I do that, quarto displays the code as a code block and does not use the CSS.

How do I add a CSS code block to a quarto document?

shafee
  • 15,566
  • 3
  • 19
  • 47
itsMeInMiami
  • 2,324
  • 1
  • 13
  • 34

1 Answers1

15

Just surround the word you want to style by [] and write the styles in {}, like this

the color is [red]{style="color: red;"}

so the word red will be in the color red.

To add more details,

---
title: "inline style"
format: html
---

## inline style in Quarto

We can apply styles to a sentence or a word 
by creating spans using `[]` to surround the
sentence or word that we want to style and 
use `{}` to define the style that we want to 
apply. For example,

The color of this word is [red]{style="color: red;"}. 
And [this line has a yellow background]{style="background-color: yellow"}.

After rendering, we get this,

quarto-doc-with-inline-css

shafee
  • 15,566
  • 3
  • 19
  • 47
  • 1
    Thank you so much @shafee. This is perfect. You should fork the quarto documentation on GitHub and add this example. – itsMeInMiami Jul 10 '22 at 14:26
  • 1
    @itsMeInMiami, it is already there, I think [this is it](https://quarto.org/docs/authoring/markdown-basics.html#divs-and-spans). – shafee Jul 10 '22 at 14:35
  • @shafee How do we add meta tags so that when we share the HTML file in chat ( whatsapp or others) display like this [SO example](https://stackoverflow.com/questions/19778620/provide-an-image-for-whatsapp-link-sharing). I specifically, want to share a self-contain html report as text, but would like to display some info in the image and text, rather than just a file name – user5249203 Oct 02 '22 at 11:19
  • @user5249203, can please make a separate question so that others along with me can answer that properly : ) ? – shafee Oct 02 '22 at 11:41
  • here is the [new SO post with Q](https://stackoverflow.com/questions/73925668/sharing-self-contained-html-file-as-text) – user5249203 Oct 02 '22 at 12:05