Formatting Titles in Table of Contents Rmarkdown (R)

Question

That’s my code in Rmarkdown:

---
title: "Formatando Table of Contents"
author: "Laura"
date: "`r Sys.Date()`"
output:
  pagedown::html_paged:
    toc: true
    toc_depth: 3

    self_contained: false
---

# Exercise 1{-}

<div style="width: 100%; height: 20px; border-bottom: 1px solid black; text-align: center">
  <span style="font-size: 40px; background-color: white; padding: 0 10px;">
    Exercicio 1 <!--Padding is optional-->
  </span>
</div>

In this format when I click on the table of Contents in "Exercise 1" it takes me on the page referring to the Title "Exercise 1", obviously.

Only I want to take out the "Exercise 1" not formatted and leave only the formatted by html/css code. And still continue with the text "Exercise 1" in Table of Contents.

I was able to explain?

For example, if I do this notice that the unformatted Text "Exercise 1" disappears (which is very good!) and that is the formatted Text. But I "lose" this text in the Table of Contents

# {-}

<div style="width: 100%; height: 20px; border-bottom: 1px solid black; text-align: center">
  <span style="font-size: 40px; background-color: white; padding: 0 10px;">
    Exercicio 1 <!--Padding is optional-->
  </span>
</div>

I do not know if the question was clear I apologize but I do not know how to solve it.

I suspect it will be necessary to create a . css file to format header 1 (H1) but do not know how to do it.

Some help?

Answer 1

You can add css by code Chuck (or in another document style.css if it is too large) to change the document style. Remembering that it is easier to format the class (in your case h2) that format you every time we use, like you were doing.

---
title: "Formatando Table of Contents"
author: "Laura"
date: "`r Sys.Date()`"
output:
  html_document:
    toc: true
    toc_depth: 3
---

```{css, echo=FALSE}
h2 {
  width: 100%;
  height: 48px;
  border-bottom: 1px solid black;
  text-align: center;
  font-size:40px;
  padding: 0 10px;
}
```

## Exercicio 1

Alguma coisa 1

## Exercise 2

Alguma coisa 2

<div style="width: 100%; height: 20px; border-bottom: 1px solid black; text-align: center">
  <span style="font-size: 40px; background-color: white; padding: 0 10px;">
    Exercicio 3 <!--Padding is optional-->
  </span>
</div>

Alguma coisa 3

PS: I don’t know much about css, so I had to increase the height for 48 so the line doesn’t cross the words