通过 CSS 更改 ioslides 中的项目符号类型

编程问答 2022-05-24

问题描述

我希望能够通过 CSS 文件在 ioslides 文档范围内更改 R-Markdown 生成的项目符号的样式。

我知道我可以使用 HTML 来更改 R Markdown 中 ioslides 文件正文中无序列表的格式，正如讨论的 here 更改颜色。对每个项目符号列表都这样做似乎很笨拙。

我尝试将其添加到 CSS 文件中：

ul {list-style-type: circle;}

除了 ioslides 放置的默认项目符号之外，还添加了一个例如圆形项目符号。

因此看来，关键可能是找到一种方法从 ioslides 中的无序列表中删除项目符号（之后可以添加样式项目符号来代替它们），但将其添加到 CSS 文件中：

ul {list-style: none;}

（在我们没有前一个属性的情况下）不会移除项目符号。

尽管 ioslides reference manual 非常有用，但它和 other searches 都没有提供进一步的见解。

RStudio 中 ioslides 演示文稿的可重现代码是：

CSS

（作为 style.html 保存到与下面的 .Rmd 片段相同的目录中。调整项目符号的代码位于第 65 - 68 行。此样式表来自给定 here 的 ioslides 默认值。 )

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

TYIA

解决方法

TL;DR：

据我所知，项目符号（和许多其他风格元素）只能在从“CSS”和 .Rmd ioslides 文件编织的幻灯片的标题中更改。

总体说明

（注意：为了方便起见，我将“CSS”文件称为 style.html，首先在 RStudio 中创建的 .Rmd 文件称为 draft.Rmd，最后的幻灯片由这两个文件编织而成作为 slideshow.html。并非所有这些文件的名称都可以由用户更改。）

我的第一个线索（很早就注意到，然后或多或少地忽略了）是“CSS”文件本身不是一个级联样式表。尽管默认命名为“样式”，但扩展名正确地为“.html”---而不是“.css”：它实际上是一个 .html 文件---尽管其中包含降级为标题的元素。

ioslides 获取 style.html 文件中的信息，并将其集成到由 style.html 和 draft.Rmd 文件创建的最终幻灯片文件的不同部分。 slideshow.html 的格式元素都在该文件的标题中。即，没有单独的 .css 文件可供 slideshow.html 访问以获取样式。

这意味着可以在 style.html 文件中修改一些（可以说是很多）样式元素，但必须在最终的 slideshow.html 中修改任何其他元素。

当然，更改 style.html 中的元素很容易，并且允许快速重新编织以测试这些更改。这也意味着 style.html 文件可以与其他 .Rmd 文件重复使用，以保持格式一致。

在对 slideshow.html 或 'draft.Rmd` 文件进行任何更改后，必须在（重新）编织的 style.html 中更改任何其他样式元素。这可以是一个简单的搜索/替换操作，远非不可能——只是不太明显或自动化。

回答我的特定问题

搜索 slideshow.html 文件中生成的标题，我发现：

ul li ul li:before {
content: '-';
font-weight: 600;
}

ul > li:before {
content: '\00B7';
margin-left: -1em;
position: absolute;
font-weight: 600;
}
  • 用 content: '\00B7'; 替换 list-style-type: circle; in ul > li:before { 用圆圈替换一阶项目符号。

第二（等等）顺序的项目符号仍然是破折号，所以：

  • 将 content: '-'; 替换为 list-style-type: circle;inul li ul li:before {` 将二阶破折号替换为圆圈。

常见的正则表达式可以加快速度，即搜索 content: '.*'; 并将其替换为某物/无物。当然，你可以为两个级别选择不同的项目符号，就像 ioslides 默认使用点和破折号一样。

bulletioslidesr-markdown

相关问答

Selenium Web驱动程序和Java元素在(x，y)点处不可单击其他元素将获得点击?
Selenium Web驱动程序和Java。元素在(x，y)点处不可单击。其...
Python-如何使用点“” 访问字典成员？
Python-如何使用点“。” 访问字典成员？
Java 字符串是不可变的到底是什么意思？
Java 字符串是不可变的。到底是什么意思？
Java中的“ final”关键字如何工作？我仍然可以修改对象
Java中的“ final”关键字如何工作？（我仍然可以修改对象。...
“loop:”在Java代码中这是什么，为什么要编译？
“loop:”在Java代码中。这是什么，为什么要编译？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常为什么？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbc...