Geek Answers Handbook

RMarkdown with knitr for HTML: How to hide bullets in TOC (table of contents)?

How can I suppress marker points before TOC elements in the generated HTML file? I want to see only the header numbers ...

Example File Test.Rmd :

---
title: "Untitled"
author: "Author"
date: "01/25/2015"
output:
  html_document:
    number_sections: true
    toc: yes
    toc_depth: 3
---

*Content*

# Headline 1
## Sub headline 1.1
## Sub headline 1.2
### Sub sub headline 1.2.1
# Headline 2

The TOC of the resulting HTML document will look like this (with undesirable markers indicated here by * char):

Untitled
Author

01/25/2015

* 1 Headline 1
  * 1.1 Sub headline 1.1
  * 1.2 Sub headline 1.2
    * 1.2.1 Sub sub headline 1.2.1
* 2 Headline 2
...

The reason for bullet points is the li tag, which knitr uses with the default HTML template. The generated HTML is as follows:

<div id="TOC">
<ul>
<li><a href="#headline-1"><span class="toc-section-number">1</span> Headline 1</a><ul>
<li><a href="#sub-headline-1.1"><span class="toc-section-number">1.1</span> Sub headline 1.1</a></li>
<li><a href="#sub-headline-1.2"><span class="toc-section-number">1.2</span> Sub headline 1.2</a><ul>
<li><a href="#sub-sub-headline-1.2.1"><span class="toc-section-number">1.2.1</span> Sub sub headline 1.2.1</a></li>
</ul></li>
</ul></li>
<li><a href="#headline-2"><span class="toc-section-number">2</span> Headline 2</a></li>
</ul>
</div>

I read a little about CSS to suppress markers, but I don't know how to solve this problem:

<li> ,

+4
2

styles.css:

div#TOC li {
    list-style:none;
    background-image:none;
    background-repeat:none;
    background-position:0;
}

Rmd YAML:

---
title: "Untitled"
author: "Author"
date: "01/25/2015"
output:
  html_document:
    css: styles.css
    number_sections: true
    toc: yes
    toc_depth: 3
---

#, . : styles.css Rmd .

+5

(css), HTML, CSS Rmd:

---
title: "Untitled"
author: "Author"
date: "01/25/2015"
output:
  html_document:
    number_sections: yes
    toc: yes
    toc_depth: 3
---

<style type="text/css">
div#TOC li {
    list-style:none;
    background-image:none;
    background-repeat:none;
    background-position:0; 
}
</style>
Your content starts here...
0

More articles:


All Articles