Bullet color in Xaringan presentation

自古美人都是妖i 提交于 2019-12-11 23:41:54

问题


Is it possible to change the bullet colors in Xaringan presentation? The text should have a different color.

I have not find any option in xaringanthemer package neither going through the css file. I could not find any information remark.js documentation.


回答1:


You can change the bullet point colour by adding a custom CSS to the YAML header of your Xaringan presentation.

Following is a fully reproducible minimal example.

Markdown file

title: "Example"
author: "Author"
date: "`r Sys.Date()`"
output:
  xaringan::moon_reader:
    css: 
        - default
        - default-fonts
        - custom.css
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
---

```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)
```

## Change bullet point colour

* An item
* Another item

Custom custom.css

We have taken the relevant CSS code to theme the bullet points from here.

ul {
  list-style: none; /* Remove default bullets */
}

ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: red; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

Output




回答2:


xaringan output is html so you can change any parts by css (e.g. using this guide to change bullet color to a red dot. Taking this as a template, you can add this chunk soon after the YAML of the Rmd to change it to a red bullet:

```{css, echo=F}
ul {
  list-style: none; /* Remove default bullets */
}

ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: red; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */ 
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}
```

Separate style from content

Or more preferably (since it separates out the style component from slide content), create a css file, say style.css which contains:

ul {
  list-style: none; /* Remove default bullets */
}

ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: red; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */ 
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

then add in the YAML, making sure that style.css is in the same path as your Rmd,

css: [xaringan-themer.css, style.css]

Tweaking the bullet shape

You can change the shape the bullet using a different unicode supplied in content (e.g. use \2023 for a triangle bullet - see other common types here).

Changing the bullet color

You just need to replace red with the color of your choice. You can replace it with the hex color code instead too.



来源:https://stackoverflow.com/questions/56338948/bullet-color-in-xaringan-presentation

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!