entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://www.w3schools.com/howto/howto_css_bullet_color.asp|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/f39426ee13aa10d8c7c8c7bd9ea5ba4d.png|imageAlt|blocks|key|944n8|text|您可以通过向Xaringan演示文稿的YAML标题添加自定义CSS来更改项目符号颜色。|unstyled|depth|inlineStyleRanges|entityRanges|9rvih|下面是一个完全可重现的最小示例。|csfj6|标记文件|2i92b|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}|code-block|syntax|javascript|10f4v|选项(htmltools.dir.version=+FALSE)|3p3h0|##+Change+bullet+point+colour

*+An+item
*+Another+item|qip8|自定义custom.css|offset|length|style|CODE|27r7m|我们采用了相关的CSS代码来主题化here中的要点。|fn29v|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)+*/
}|ajk3i|输出|5sgoo|​|de6qg|?|atomic|6gqpb|ug9f^0|0|0|0|0|0|0|3|A|0|H|4|0|0|0|0|0|0|1|1|0|0^^$0|$1|$2|3|4|5|6|$7|8]]|9|$2|A|4|B|6|$C|D|E|-4]]]|F|@$G|H|I|J|2|K|L|1K|M|@]|N|@]|6|$]]|$G|O|I|P|2|K|L|1L|M|@]|N|@]|6|$]]|$G|Q|I|R|2|K|L|1M|M|@]|N|@]|6|$]]|$G|S|I|T|2|U|L|1N|M|@]|N|@]|6|$V|W]]|$G|X|I|Y|2|K|L|1O|M|@]|N|@]|6|$]]|$G|Z|I|10|2|U|L|1P|M|@]|N|@]|6|$V|W]]|$G|11|I|12|2|K|L|1Q|M|@$13|1R|14|1S|15|16]]|N|@]|6|$]]|$G|17|I|18|2|K|L|1T|M|@]|N|@$13|1U|14|1V|G|1W]]|6|$]]|$G|19|I|1A|2|U|L|1X|M|@]|N|@]|6|$V|W]]|$G|1B|I|1C|2|K|L|1Y|M|@]|N|@]|6|$]]|$G|1D|I|1E|2|K|L|1Z|M|@]|N|@]|6|$]]|$G|1F|I|1G|2|1H|L|20|M|@]|N|@$13|21|14|22|G|23]]|6|$]]|$G|1I|I|1E|2|K|L|24|M|@]|N|@]|6|$]]|$G|1J|I|-4|2|K|L|25|M|@]|N|@]|6|$]]]]

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

<p>Following is a fully reproducible minimal example.</p>

<h2>Markdown file</h2>

<pre><code>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
</code></pre>

<h2>Custom <code>custom.css</code></h2>

<p>We have taken the relevant CSS code to theme the bullet points from <a href="https://www.w3schools.com/howto/howto_css_bullet_color.asp" rel="nofollow noreferrer">here</a>.</p>

<pre class="lang-css prettyprint-override"><code>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) */
}
</code></pre>

<h2>Output</h2>

<p><a href="https://i.stack.imgur.com/6TZMf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6TZMf.png" alt="enter image description here"></a></p>


entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://www.w3schools.com/howto/howto_css_bullet_color.asp|1|https://en.wikipedia.org/wiki/Bullet_(typography%2529#In_Unicode)|blocks|key|7dcam|text|xaringan的输出是超文本标记语言，所以你可以通过css更改任何部分(例如，使用this+guide将项目符号颜色更改为红点)。以此为模板，您可以在Rmd的YAML之后不久添加此块，以将其更改为红色项目符号：|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|9b2tf|```{css,+echo=F}|code-block|syntax|javascript|elf4g|ul+{|f98gh|list-style:无；/删除默认项目符号/|6ge8|}|3997r|ul+li：：之前{|796bo|content："+\2022+"；/+Add+content：\2022是项目符号的CSS代码/unicode/|fc705|颜色:红色；/更改颜色/|7v7pf|font-weight:加粗；/如果希望加粗/|ddqbc|display:+inline-block；/需要在项目符号和文本之间添加空格/|2ckp|宽度:+1em；/也需要空间(如果需要可以调整)/|tvg1|空白处-左：-1em；/也需要空间(如果需要可以调整)/|e94sf|7e5ev|ejcgq|将样式与内容分开|4vkq7|或者更好的(因为它将样式组件从幻灯片内容中分离出来)，创建一个css文件，比如style.css，它包含：|3iotl|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)+*/
}|bqcvr|然后添加YAML，确保style.css与Rmd在相同的路径中。|2g8oh|css:+[xaringan-themer.css,+style.css]|c9qdu|调整项目符号形状|base6|您可以使用content中提供的不同unicode来更改项目符号的形状(例如，将\2023用于三角形项目符号-请参阅其他常见类型here。|a8ra5|更改项目符号颜色|4u1qm|您只需将red替换为您选择的颜色。您也可以将其替换为十六进制颜色代码。|d2alo^0|0|8|16|A|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|13|9|0|0|0|0|0|5|7|14|5|1S|4|1|0|0|4|3|0^^$0|$1|$2|3|4|5|6|$7|8]]|9|$2|3|4|5|6|$7|A]]]|B|@$C|D|E|F|2|G|H|1Y|I|@$J|1Z|K|20|L|M]]|N|@$J|21|K|22|C|23]]|6|$]]|$C|O|E|P|2|Q|H|24|I|@]|N|@]|6|$R|S]]|$C|T|E|U|2|G|H|25|I|@]|N|@]|6|$]]|$C|V|E|W|2|G|H|26|I|@]|N|@]|6|$]]|$C|X|E|Y|2|G|H|27|I|@]|N|@]|6|$]]|$C|Z|E|10|2|G|H|28|I|@]|N|@]|6|$]]|$C|11|E|12|2|G|H|29|I|@]|N|@]|6|$]]|$C|13|E|14|2|G|H|2A|I|@]|N|@]|6|$]]|$C|15|E|16|2|G|H|2B|I|@]|N|@]|6|$]]|$C|17|E|18|2|G|H|2C|I|@]|N|@]|6|$]]|$C|19|E|1A|2|G|H|2D|I|@]|N|@]|6|$]]|$C|1B|E|1C|2|G|H|2E|I|@]|N|@]|6|$]]|$C|1D|E|Y|2|G|H|2F|I|@]|N|@]|6|$]]|$C|1E|E|-4|2|Q|H|2G|I|@]|N|@]|6|$R|S]]|$C|1F|E|1G|2|G|H|2H|I|@]|N|@]|6|$]]|$C|1H|E|1I|2|G|H|2I|I|@$J|2J|K|2K|L|M]]|N|@]|6|$]]|$C|1J|E|1K|2|Q|H|2L|I|@]|N|@]|6|$R|S]]|$C|1L|E|1M|2|G|H|2M|I|@]|N|@]|6|$]]|$C|1N|E|1O|2|Q|H|2N|I|@]|N|@]|6|$R|S]]|$C|1P|E|1Q|2|G|H|2O|I|@]|N|@]|6|$]]|$C|1R|E|1S|2|G|H|2P|I|@$J|2Q|K|2R|L|M]|$J|2S|K|2T|L|M]]|N|@$J|2U|K|2V|C|2W]]|6|$]]|$C|1T|E|1U|2|G|H|2X|I|@]|N|@]|6|$]]|$C|1V|E|1W|2|G|H|2Y|I|@$J|2Z|K|30|L|M]]|N|@]|6|$]]|$C|1X|E|-4|2|G|H|31|I|@]|N|@]|6|$]]]]

<p><code>xaringan</code> output is html so you can change any parts by css (e.g. using <a href="https://www.w3schools.com/howto/howto_css_bullet_color.asp" rel="nofollow noreferrer">this guide</a> 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:</p>

<pre><code>```{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) */
}
```
</code></pre>

<h2>Separate style from content</h2>

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

<pre><code>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) */
}
</code></pre>

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

<pre><code>css: [xaringan-themer.css, style.css]
</code></pre>

<h2>Tweaking the bullet shape</h2>

<p>You can change the shape the bullet using a different unicode supplied in <code>content</code> (e.g. use <code>\2023</code> for a triangle bullet - see other common types <a href="https://en.wikipedia.org/wiki/Bullet_(typography)#In_Unicode" rel="nofollow noreferrer">here</a>).</p>

<h2>Changing the bullet color</h2>

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


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

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


Bullet color in Xaringan presentation

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

 是否可以更改Xaringan演示文稿中的项目符号颜色？文本应该有不同的颜色。 我没有在xaringanthemer包中找到任何选项，也没有检查css文件。我在remark.js文档中找不到任何信息。 

问Xaringan演示文稿中的项目符号颜色
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Xaringan演示文稿中的项目符号颜色EN