通过 CSS 在 ioslides 中更改项目符号类型
Changing Bullet Type in ioslides via CSS
我希望能够通过 CSS 文件在 ioslides 文档范围内更改 R-Markdown 生成的项目符号的样式。
我知道我可以使用 HTML 更改 R Markdown 中 ioslides 文件正文中无序项目符号列表的格式，如讨论的那样 here 更改颜色。对每个项目符号列表都这样做似乎很笨拙。
我尝试将其添加到 CSS 文件中：
ul {list-style-type: circle;}
除了 ioslides 放置的默认项目符号之外，它还添加了一个圆形项目符号 。
因此看来关键可能是找到一种方法从 ioslides 中的无序列表中删除项目符号（之后可以添加样式项目符号代替它们），但是将其添加到 CSS 文件中：
ul {list-style: none;}
(with our without the previous attribute) 不删除项目符号。
尽管 ioslides reference manual is quite useful, neither it nor 提供了进一步的见解。
RStudio 中 ioslides 演示文稿的可重现代码是：
CSS
（另存为 style.html 与下面的 .Rmd 片段位于同一目录中。调整项目符号的代码位于第 65 - 68 行。此样式 sheet 来自 ioslides默认给定 here.)
<!DOCTYPE html>
<html$if(lang)$ lang="$lang$" xml:lang="$lang$"$endif$>
<head>
<title>$if(title-prefix)$$title-prefix$ - $endif$$pagetitle$</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="generator" content="pandoc" />
$if(date-meta)$
<meta name="date" content="$date-meta$" />
$endif$
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<base target="_blank">
<script type="text/javascript">
var SLIDE_CONFIG = {
// Slide settings
settings: {
$if(title)$
title: '$title$',
$endif$
$if(subtitle)$
subtitle: '$subtitle$',
$endif$
useBuilds: true,
usePrettify: true,
enableSlideAreas: true,
enableTouch: true,
$if(analytics)$
analytics: '$analytics$',
$endif$
$if(logo)$
favIcon: '$logo$',
$endif$
},
// Author information
presenters: [
$for(author)$
{
name: $if(author.name)$ '$author.name$' $else$ '$author$' $endif$,
company: '$author.company$',
gplus: '$author.gplus$',
twitter: '$author.twitter$',
www: '$author.www$',
github: '$author.github$'
},
$endfor$
]
};
</script>
$for(header-includes)$
$header-includes$
$endfor$
<style type="text/css">
ul {list-style: none;} /* Does not repress ioslides-generated bullets */
li::marker {display: none;} /* Does not repress ioslides-generated bullets */
li {list-style-type: circle;} /* Creates bullest *in addition to* those created by ioslides */
b, strong {
font-weight: bold;
}
em {
font-style: italic;
}
summary {
display: list-item;
}
slides > slide {
-webkit-transition: all $transition$s ease-in-out;
-moz-transition: all $transition$s ease-in-out;
-o-transition: all $transition$s ease-in-out;
transition: all $transition$s ease-in-out;
}
.auto-fadein {
-webkit-transition: opacity 0.6s ease-in;
-webkit-transition-delay: $transition$s;
-moz-transition: opacity 0.6s ease-in $transition$s;
-o-transition: opacity 0.6s ease-in $transition$s;
transition: opacity 0.6s ease-in $transition$s;
opacity: 0;
}
/* https://github.com/ropensci/plotly/pull/524#issuecomment-468142578 */
slide:not(.current) .plotly.html-widget{
display: block;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
span.underline{text-decoration: underline;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
$if(quotes)$
q { quotes: "“" "”" "‘" "’"; }
$endif$
$if(highlighting-css)$
$highlighting-css$
$endif$
$if(displaymath-css)$
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
$endif$
$if(logo)$
slides > slide:not(.nobackground):before {
font-size: 12pt;
content: "";
position: absolute;
bottom: 20px;
left: 60px;
background: url($logo$) no-repeat 0 50%;
-webkit-background-size: 30px 30px;
-moz-background-size: 30px 30px;
-o-background-size: 30px 30px;
background-size: 30px 30px;
padding-left: 40px;
height: 30px;
line-height: 1.9;
}
$endif$
</style>
$for(css)$
<link rel="stylesheet" href="$css$" $if(html5)$$else$type="text/css" $endif$/>
$endfor$
</head>
<body style="opacity: 0">
$if(widescreen)$
<slides class="layout-widescreen">
$else$
<slides>
$endif$
$if(include-before)$
$for(include-before)$
$include-before$
$endfor$
$else$
<slide class="title-slide segue nobackground">
$if(logo)$
<aside class="gdbar"><img src="$logo$"></aside>
$endif$
<!-- The content of this hgroup is replaced programmatically through the slide_config.json. -->
<hgroup class="auto-fadein">
<h1 data-config-title><!-- populated from slide_config.json --></h1>
$if(subtitle)$<h2 data-config-subtitle><!-- populated from slide_config.json --></h2>$endif$
<p data-config-presenter><!-- populated from slide_config.json --></p>
$if(date)$
<p style="margin-top: 6px; margin-left: -2px;">$date$</p>
$endif$
</hgroup>
</slide>
$endif$
RENDERED_SLIDES
$for(include-after)$
$include-after$
$endfor$
<slide class="backdrop"></slide>
</slides>
$if(mathjax-url)$
<!-- dynamically load mathjax for compatibility with self-contained -->
<script>
(function () {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "$mathjax-url$";
document.getElementsByTagName("head")[0].appendChild(script);
})();
</script>
$endif$
<!-- map slide visiblity events into shiny -->
<script>
(function() {
if (window.jQuery) {
window.jQuery(document).on('slideleave', function(e) {
window.jQuery(e.target).trigger('hidden');
});
window.jQuery(document).on('slideenter', function(e) {
window.jQuery(e.target).trigger('shown');
});
}
})();
</script>
</body>
</html>
.rmd ioslides 代码
（如 test.Rmd 保存在与上述 style.html 相同的目录中。此代码来自 ioslides manual。）
---
title: "Habits"
author: John Doe
output:
ioslides_presentation:
template: style.html
---
# In the morning
## Getting up
- Turn off alarm
- Get out of bed
## Breakfast
- Eat eggs
- Drink coffee
# In the evening
## Dinner
- Eat spaghetti
- Drink wine
蒂亚
长话短说：
据我所知，项目符号（和许多其他样式元素）只能在从“CSS”和 .Rmd ioslides 编织的幻灯片的 header 中更改文件。
总体说明
(N.b.: 为方便起见，我将“CSS”文件称为 style.html，首先在 RStudio 中创建的 .Rmd 文件称为 draft.Rmd，最后的幻灯片从这两个文件编织为 slideshow.html。并不是说所有这些文件的名称都可以由用户更改。）
我的第一条线索（很早就注意到了，然后或多或少地忽略了）是“CSS”文件不是级联样式sheet本身。尽管默认情况下名为“style”，但扩展名是正确的“.html”——而不是“.css”：它实际上是一个 .html 文件——尽管包含归入 headers.
的元素
ioslides 获取 style.html 文件中的信息并将其集成到根据 style.html 和 draft.Rmd 文件创建的最终幻灯片文件的不同部分。 slideshow.html 的格式元素都在该文件的 header 中。即，slideshow.html 没有单独的 .css 文件访问样式。
这意味着 一些（可以说是很多）文体元素可以在 style.html 文件中修改，但任何其他元素必须在最终 slideshow.html.
当然，更改 style.html 中的元素很容易，并且可以快速 re-knits 测试这些更改。这也意味着 style.html 文件可以与其他 .Rmd 文件重复使用以实现一致的格式。
在 style.html 或“draft.Rmd”文件发生任何更改后，必须更改 slideshow.html 中的任何其他样式元素（重新）编织。这可以是一个简单的 search/replace 操作，远非不可能 --- 只是不那么明显或自动化。
回答我的特定问题
搜索slideshow.html文件中生成的header，发现：
ul li ul li:before {
content: '-';
font-weight: 600;
}
ul > li:before {
content: '[=10=]B7';
margin-left: -1em;
position: absolute;
font-weight: 600;
}
- 将
content: '[=26=]B7'; 替换为 list-style-type: circle;
在 ul > li:before { 中用圆圈替换 first-order 项目符号。
第二个（等）顺序项目符号仍为破折号，因此：
- 将
content: '-'; 替换为 list-style-type: circle;inul li ul li:before {` 将 second-order 破折号替换为圆圈。
常见的正则表达式可以加快这个过程，即搜索 content: '.*'; 并将其替换为 something/nothing else。当然，可以为两个级别选择不同的项目符号，因为 ioslides 默认使用点和破折号。
以下内容似乎有效，并且可能比编辑实际 slideshow.html 更简单：
首先，在您的 .Rmd 中包含一个 style.css 文件：
output:
ioslides_presentation:
css: styles.css
其次，创建 styles.css 文件（与您的 .Rmd 相同的文件夹）并向其中添加以下内容：
ul li ul li:before {
content: "CB";
}
ul li:before {
content: "CF";
}
这会更改第一级（使用十六进制代码 25CF 表示实心圆）和第二级（25CB，空心圆）的项目符号样式类型。
我希望能够通过 CSS 文件在 ioslides 文档范围内更改 R-Markdown 生成的项目符号的样式。
我知道我可以使用 HTML 更改 R Markdown 中 ioslides 文件正文中无序项目符号列表的格式，如讨论的那样 here 更改颜色。对每个项目符号列表都这样做似乎很笨拙。
我尝试将其添加到 CSS 文件中：
ul {list-style-type: circle;}
除了 ioslides 放置的默认项目符号之外，它还添加了一个圆形项目符号 。
因此看来关键可能是找到一种方法从 ioslides 中的无序列表中删除项目符号（之后可以添加样式项目符号代替它们），但是将其添加到 CSS 文件中：
ul {list-style: none;}
(with our without the previous attribute) 不删除项目符号。
尽管 ioslides reference manual is quite useful, neither it nor
RStudio 中 ioslides 演示文稿的可重现代码是：
CSS
（另存为 style.html 与下面的 .Rmd 片段位于同一目录中。调整项目符号的代码位于第 65 - 68 行。此样式 sheet 来自 ioslides默认给定 here.)
<!DOCTYPE html>
<html$if(lang)$ lang="$lang$" xml:lang="$lang$"$endif$>
<head>
<title>$if(title-prefix)$$title-prefix$ - $endif$$pagetitle$</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="generator" content="pandoc" />
$if(date-meta)$
<meta name="date" content="$date-meta$" />
$endif$
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<base target="_blank">
<script type="text/javascript">
var SLIDE_CONFIG = {
// Slide settings
settings: {
$if(title)$
title: '$title$',
$endif$
$if(subtitle)$
subtitle: '$subtitle$',
$endif$
useBuilds: true,
usePrettify: true,
enableSlideAreas: true,
enableTouch: true,
$if(analytics)$
analytics: '$analytics$',
$endif$
$if(logo)$
favIcon: '$logo$',
$endif$
},
// Author information
presenters: [
$for(author)$
{
name: $if(author.name)$ '$author.name$' $else$ '$author$' $endif$,
company: '$author.company$',
gplus: '$author.gplus$',
twitter: '$author.twitter$',
www: '$author.www$',
github: '$author.github$'
},
$endfor$
]
};
</script>
$for(header-includes)$
$header-includes$
$endfor$
<style type="text/css">
ul {list-style: none;} /* Does not repress ioslides-generated bullets */
li::marker {display: none;} /* Does not repress ioslides-generated bullets */
li {list-style-type: circle;} /* Creates bullest *in addition to* those created by ioslides */
b, strong {
font-weight: bold;
}
em {
font-style: italic;
}
summary {
display: list-item;
}
slides > slide {
-webkit-transition: all $transition$s ease-in-out;
-moz-transition: all $transition$s ease-in-out;
-o-transition: all $transition$s ease-in-out;
transition: all $transition$s ease-in-out;
}
.auto-fadein {
-webkit-transition: opacity 0.6s ease-in;
-webkit-transition-delay: $transition$s;
-moz-transition: opacity 0.6s ease-in $transition$s;
-o-transition: opacity 0.6s ease-in $transition$s;
transition: opacity 0.6s ease-in $transition$s;
opacity: 0;
}
/* https://github.com/ropensci/plotly/pull/524#issuecomment-468142578 */
slide:not(.current) .plotly.html-widget{
display: block;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
span.underline{text-decoration: underline;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
$if(quotes)$
q { quotes: "“" "”" "‘" "’"; }
$endif$
$if(highlighting-css)$
$highlighting-css$
$endif$
$if(displaymath-css)$
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
$endif$
$if(logo)$
slides > slide:not(.nobackground):before {
font-size: 12pt;
content: "";
position: absolute;
bottom: 20px;
left: 60px;
background: url($logo$) no-repeat 0 50%;
-webkit-background-size: 30px 30px;
-moz-background-size: 30px 30px;
-o-background-size: 30px 30px;
background-size: 30px 30px;
padding-left: 40px;
height: 30px;
line-height: 1.9;
}
$endif$
</style>
$for(css)$
<link rel="stylesheet" href="$css$" $if(html5)$$else$type="text/css" $endif$/>
$endfor$
</head>
<body style="opacity: 0">
$if(widescreen)$
<slides class="layout-widescreen">
$else$
<slides>
$endif$
$if(include-before)$
$for(include-before)$
$include-before$
$endfor$
$else$
<slide class="title-slide segue nobackground">
$if(logo)$
<aside class="gdbar"><img src="$logo$"></aside>
$endif$
<!-- The content of this hgroup is replaced programmatically through the slide_config.json. -->
<hgroup class="auto-fadein">
<h1 data-config-title><!-- populated from slide_config.json --></h1>
$if(subtitle)$<h2 data-config-subtitle><!-- populated from slide_config.json --></h2>$endif$
<p data-config-presenter><!-- populated from slide_config.json --></p>
$if(date)$
<p style="margin-top: 6px; margin-left: -2px;">$date$</p>
$endif$
</hgroup>
</slide>
$endif$
RENDERED_SLIDES
$for(include-after)$
$include-after$
$endfor$
<slide class="backdrop"></slide>
</slides>
$if(mathjax-url)$
<!-- dynamically load mathjax for compatibility with self-contained -->
<script>
(function () {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "$mathjax-url$";
document.getElementsByTagName("head")[0].appendChild(script);
})();
</script>
$endif$
<!-- map slide visiblity events into shiny -->
<script>
(function() {
if (window.jQuery) {
window.jQuery(document).on('slideleave', function(e) {
window.jQuery(e.target).trigger('hidden');
});
window.jQuery(document).on('slideenter', function(e) {
window.jQuery(e.target).trigger('shown');
});
}
})();
</script>
</body>
</html>
.rmd ioslides 代码
（如 test.Rmd 保存在与上述 style.html 相同的目录中。此代码来自 ioslides manual。）
---
title: "Habits"
author: John Doe
output:
ioslides_presentation:
template: style.html
---
# In the morning
## Getting up
- Turn off alarm
- Get out of bed
## Breakfast
- Eat eggs
- Drink coffee
# In the evening
## Dinner
- Eat spaghetti
- Drink wine
蒂亚
长话短说：
据我所知，项目符号（和许多其他样式元素）只能在从“CSS”和 .Rmd ioslides 编织的幻灯片的 header 中更改文件。
总体说明
(N.b.: 为方便起见，我将“CSS”文件称为 style.html，首先在 RStudio 中创建的 .Rmd 文件称为 draft.Rmd，最后的幻灯片从这两个文件编织为 slideshow.html。并不是说所有这些文件的名称都可以由用户更改。）
我的第一条线索（很早就注意到了，然后或多或少地忽略了）是“CSS”文件不是级联样式sheet本身。尽管默认情况下名为“style”，但扩展名是正确的“.html”——而不是“.css”：它实际上是一个 .html 文件——尽管包含归入 headers.
的元素ioslides 获取 style.html 文件中的信息并将其集成到根据 style.html 和 draft.Rmd 文件创建的最终幻灯片文件的不同部分。 slideshow.html 的格式元素都在该文件的 header 中。即，slideshow.html 没有单独的 .css 文件访问样式。
这意味着 一些（可以说是很多）文体元素可以在 style.html 文件中修改，但任何其他元素必须在最终 slideshow.html.
当然，更改 style.html 中的元素很容易，并且可以快速 re-knits 测试这些更改。这也意味着 style.html 文件可以与其他 .Rmd 文件重复使用以实现一致的格式。
在 style.html 或“draft.Rmd”文件发生任何更改后，必须更改 slideshow.html 中的任何其他样式元素（重新）编织。这可以是一个简单的 search/replace 操作，远非不可能 --- 只是不那么明显或自动化。
回答我的特定问题
搜索slideshow.html文件中生成的header，发现：
ul li ul li:before {
content: '-';
font-weight: 600;
}
ul > li:before {
content: '[=10=]B7';
margin-left: -1em;
position: absolute;
font-weight: 600;
}
- 将
content: '[=26=]B7';替换为list-style-type: circle;在ul > li:before {中用圆圈替换 first-order 项目符号。
第二个（等）顺序项目符号仍为破折号，因此：
- 将
content: '-';替换为 list-style-type: circle;inul li ul li:before {` 将 second-order 破折号替换为圆圈。
常见的正则表达式可以加快这个过程，即搜索 content: '.*'; 并将其替换为 something/nothing else。当然，可以为两个级别选择不同的项目符号，因为 ioslides 默认使用点和破折号。
以下内容似乎有效，并且可能比编辑实际 slideshow.html 更简单：
首先，在您的 .Rmd 中包含一个 style.css 文件：
output:
ioslides_presentation:
css: styles.css
其次，创建 styles.css 文件（与您的 .Rmd 相同的文件夹）并向其中添加以下内容：
ul li ul li:before {
content: "CB";
}
ul li:before {
content: "CF";
}
这会更改第一级（使用十六进制代码 25CF 表示实心圆）和第二级（25CB，空心圆）的项目符号样式类型。