CODEWITHSUNDEEP
cssr-markdownxaringan
itsMeInMiami
itsMeInMiami

Reputation: 2773

How can I show angle braces < text > when using CSS in xaringan

I would like to color different words in xaringan slides using CSS.

I made a file called stuff.css that contains this:

.red {
color: red;  
}

And my rmarkdown file has this:

---
title: "test"
output:
  xaringan::moon_reader:
    css: ["stuff.css"]
    lib_dir: libs
---

blah .red[<command]

blah .red[command>]

blah .red[<command>]

The first two lines display as I expect (with the text inside of the [ ] in red) but the third one only shows blah. Why is this happening? How can I get the third line to display blah followed by the word command in angle braces?

Upvotes: 4

Views: 87

Answers (2)

bttomio
bttomio

Reputation: 2306

EDIT

This should do the trick. Add these to your css file:

.red {
  color: red;  
}

.red:before {
    content: '\003C';
}

.red:after {
    content: '\003E';
}

Then, just call .red[command]. The special characters < and > will be added before, with red:before, and after, with red:after, respectively.

Upvotes: 3

Daniel_j_iii
Daniel_j_iii

Reputation: 3252

You can use CSS multiple ways in Rmarkdown to control colored words in the output. The overall body color is red, while I can override the color with inline CSS code.

---
title: "test"
output:
  xaringan::moon_reader:
    lib_dir: libs
---

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

red

<span style="color:black">black</span>

<span style="color:green">green</span>

enter image description here

Upvotes: 1

Related Questions