RMarkdown with knitr to HTML: How to hide bullets

问题:

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

回答1:

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.

回答2:

If you want to avoid having an additional (css) file besides the HTML file you can put the CSS code into your Rmd file directly:

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