CSS Styling
Box colors , highlight code blocks , inverse style , …
September 22, 2025
Samantha Monty
Chair for Human-Computer Interaction, University of Würzburg

Box colors

Each section or element can use style classes:

(- primary - secondary - success - danger - warning - info)

  • question
  • answer
  • observation
  • definition
  • alert
  • example
  • note

Samples

Question

Is this Question?



Answer

I am the answer .



Source code :

## Question {.question}

Is this Question?

## Answer {.answer}

I am the answer .

Samples

Observation

This is Observation.



Source code :

## Observation {.observation}

This is Observation.

Samples

Definition

This is definition.



Source code :

## Definition {.definition}

This is definition.

Samples

Alert

This is Alert !



Source code :

## Alert {.alert}

This is Alert !

Samples

Example

This is Example.



Source code :

## Example {.example}

This is Example.

Samples

Note

This is your note.



Source code :

## Note {.note}

This is your note.

Samples

Equation

\(e=mc^2\)



Source code :

## Equation {.note}

$e=mc^2$

Dark Mode / Inverse Styling

  • The .inverse class applies a dark theme to that slide.

  • Background becomes black, text becomes light.

  • Good for displaying bright images or highlighting contrast.

Inverse Colors sample

Color scheme

  • Background is black
  • Font color is almost white

Alert Box

colored boxes also look ok.

Source code

# Inverse Colors sample {.inverse}

## Color scheme

-   Background is black
-   Font color is almost white

## Alert Box {.fragment .alert}

colored boxes also look ok.

Code Blocks with Syntax Highlighting

You can embed code blocks and set the language to get proper highlighting:

Code block sample

ghci> :type [1,2,3,4]
[1,2,3,4] :: Num a => [a]
![some text as an ALT](include/06-metal.png)

code block source code

## Code block sample
``` {.haskell label="Haskell"}
ghci> :type [1,2,3,4]
[1,2,3,4] :: Num a => [a]
```

```markdown
![some text as an ALT](include/06-metal.png)
```

Verbatim and text blocks

Verbatim block

ghci> :type [1,2,3,4]
[1,2,3,4] :: Num a => [a]

Text block

ghci> :type [1,2,3,4]
[1,2,3,4] :: Num a => [a]

Source code :

## Verbatim block 

    ghci> :type [1,2,3,4]
    [1,2,3,4] :: Num a => [a]

## Text block 

```{.txt}
ghci> :type [1,2,3,4]
[1,2,3,4] :: Num a => [a] ```

Emojie (Smile)

This shows a big smile emoji rendered as part of the content.

:smile:

the output :

😄



you can also have styled Emojie.

This shows a big smile emoji rendered as part of the content :

[:smile:]{.xx-large}

the output :

😄



Also see here for more markdown emoji markup