CODEWITHSUNDEEP
htmlcssyamlr-markdown
Mohamed Mostafa El-Sayyad
Mohamed Mostafa El-Sayyad

Reputation: 287

Rmarkdown color headers of floating TOC using external custom css file

I am using a .rmd file to generate a .html file. I have a floating TOC inside that html and I would like to color the headers inside that TOC using an external custom.css

I can color the headers using only latex for now, which I would like to avoid this workaround.

This would be my rmarkdown .rmd file where I'm referencing an external css file named 'style.css'. I have left a latex syntax that colors the last header.

---
title: "Notebook title"
output:
  html_document:
    css: style.css
    number_sections: false
    toc: true
    toc_depth: 4
    toc_float: true
---

# H1
## H2
### H3
# $\color{#B6854D}{\text{H1 colored with Latex}}$ {-}

The below is my customer 'style.css' file that I would like to color the TOC header contents. You can see that I have tweaked the TOC width referencing the #TOC id.

#TOC {
  position: fixed;
  left: 30px;
  width: 440px;
  max-width:100%;
  overflow:auto;
}

h1.title {
  color: #66b2b2;
}

h1 {
  color: #B6854D;
}

h2 {
  color: #F4B5BD;
}

The output will be as follows: TOCt

Inspecting the colored H1 element using latex in .html file I have found the following:

<li class="tocify-item list-group-item active" data-unique="(color{b6854d}{text{h1_colored_with_latex}})" style="cursor: pointer;"><span class="math inline"><span class="MathJax_Preview" style="color: inherit; display: none;"></span><span class="MathJax" id="MathJax-Element-1-Frame" tabindex="0" data-mathml="<math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot;><mstyle mathcolor=&quot;#B6854D&quot;><mtext>H1 colored with Latex</mtext></mstyle></math>" role="presentation" style="position: relative;"><nobr aria-hidden="true"><span class="math" id="MathJax-Span-1" style="width: 11.432em; display: inline-block;"><span style="display: inline-block; position: relative; width: 9.527em; height: 0px; font-size: 120%;"><span style="position: absolute; clip: rect(1.313em, 1009.53em, 2.384em, -999.997em); top: -2.199em; left: 0em;"><span class="mrow" id="MathJax-Span-2"><span class="mstyle" id="MathJax-Span-3" style="color: rgb(182, 133, 77);"><span class="mrow" id="MathJax-Span-4" style="color: rgb(182, 133, 77);"><span class="mtext" id="MathJax-Span-5" style="font-family: MathJax_Main; color: rgb(182, 133, 77);">H1 colored with Latex</span></span>
    </span>
    </span><span style="display: inline-block; width: 0px; height: 2.205em;"></span></span>
    </span><span style="display: inline-block; overflow: hidden; vertical-align: -0.068em; border-left: 0px solid; width: 0px; height: 1.004em;"></span></span>
    </nobr><span class="MJX_Assistive_MathML" role="presentation"><math xmlns="http://www.w3.org/1998/Math/MathML"><mstyle mathcolor="#B6854D"><mtext>H1 colored with Latex</mtext></mstyle></math></span></span>
    <script type="math/tex" id="MathJax-Element-1">\color{#B6854D}{\text{H1 colored with Latex}}</script>
    </span>
</li>

You can see how the hexa-color 'b6854d' I wrote using latex.

Upvotes: 1

Views: 2059

Answers (1)

Mohamed Mostafa El-Sayyad
Mohamed Mostafa El-Sayyad

Reputation: 287

The answer was posted in the below URL by user 'atusy' on github at: https://github.com/rstudio/rmarkdown/issues/1682

I have added another lower level header h2 notice #TOC>ul>ul>li

The below is the `.rmd file:

---
output:
  html_document:
    toc: true
    toc_float: true
---

```{css, echo = FALSE}
h1, #TOC>ul>li {
  color: #ff0000;
}

h2, #TOC>ul>ul>li {
  color: #F4B5BD;
  font-family:  "Times";
  font-weight: bold;
}
```

# H1 1

# H1 2

## H2

Upvotes: 1

Related Questions