Using Rmarkdown (pagedown) and changing Table of Contents

Question

Hello guys I've trying to solve this but I have no way to go:

This is my code:

---
title: "A Multi-page HTML Document"
author: "Yihui Xie and Romain Lesur"
date: "`r Sys.Date()`"
output:
  pagedown::html_paged:
    toc: true
    toc_depth: 3
    # change to true for a self-contained document, but it'll be a litte slower for Pandoc to render
    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>

I want to mantain the Table of Content structure. In other words I want to click on "Exercise 1" and it takes me to the page of Exercise one. BUT I want the Header to be this customized header below(I want to click on "Exercise 1" e only see this Exercise 1 style below):

<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>

Am I clear?

For example, If I do this :

# {-}
<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>

The word "Exercise 1 " in my TOC desapears.

Many many thanks for yout help

Laura

Answer 1

The table of contents is automatically built by Pandoc: its entries strictly correspond to the section titles. This is why in the last example (the one with # {-}), the word "Exercise 1" disappears in the TOC.

There are many ways to achieve your goal. Given your example, the most straightforward one is probably to use CSS.

Having in mind that this markdown line

# Exercise 1{-}

leads to this HTML snippet

<div id="exercise-1" class="section level1 unnumbered">
  <h1>Exercise 1</h1>
  ...
</div>

you can hide the h1 content with the following CSS declaration:

h1 {
  display: none;
}

For such a small CSS, you can use the knitr CSS engine in your Rmd file:

---
title: "A Multi-page HTML Document"
author: "Yihui Xie and Romain Lesur"
date: "`r Sys.Date()`"
output:
  pagedown::html_paged:
    toc: true
    toc_depth: 3
    # change to true for a self-contained document, but it'll be a litte slower for Pandoc to render
    self_contained: false
---

```{css, echo=FALSE}
h1 {
  display: none;
}
```

# 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>