Search code examples
htmlrknitrr-markdowntableofcontents

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


How can I suppress the bullet points in front of the TOC items in the created HTML file? I want to see only the headline numbers...

Example Test.Rmd file:

---
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 the unwanted bullet points - here indicated via the * 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 that knitr uses with the default HTML template. The created HTML code looks like this:

<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 bit about CSS to suppress bullet points but I have no idea to solve this issue:

how to hide <li> bullets in navigation menu and footer links BUT show them for listing items


Solution

  • Put this in styles.css:

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

    And then use this in the Rmd header YAML:

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

    That will give you the #'s but no •'s. NOTE: styles.css and your Rmd file need to be in the same directory.