colorsquarto

Quarto inline font color is not rendered


This is a quarto revealjs example: Using quarto version 1.4.550:

---
title: "My Slide Show"
format: revealjs
---

# Slide 1 {style="color:red"}

# Slide 2

# Slide 3

Locally it looks like this and correct: enter image description here

But when I render it looks: enter image description here

I know the workaround with css! I want to know why class color does not work?


Solution

  • If you look at the HTML code that's generated from your code, you'll see that the style element is applied to the section not the h1 heading:

    <section id="slide-1" class="title-slide slide level1 center present" style="color: red; top: 286.5px; display: block;">
    <h1>Slide 1</h1>
    </section>
    

    The styling for the h1 headings is then inherited from the default Quarto h1 styling.

    If you want to apply the color just to the heading text, put the heading text in square brackets:

    # [Slide 1]{style="color:red"}