堆棧內存溢出
  簡體   English   中英

通過 CSS 在 ioslides 中更改項目符號類型

[英]Changing Bullet Type in ioslides via CSS

 原文  2021-02-23 02:07:02  3   2    css/ r-markdown/ bullet/ ioslides

問題描述

我希望能夠通過 CSS 文件在 ioslides 文檔范圍內更改 R-Markdown 生成的項目符號的樣式。

我知道我可以使用 HTML 更改 R Markdown 中 ioslides 文件正文中無序項目符號列表的格式，如此處討論的那樣更改顏色。 對每個項目符號列表都這樣做似乎很笨拙。

我嘗試將其添加到 CSS 文件中：

ul {list-style-type: circle;}

除了ioslides 放置的默認項目符號外，它還添加了一個圓形項目符號。

因此，看來關鍵可能是找到一種方法從 ioslides 中的無序列表中刪除項目符號（之后可以添加樣式項目符號代替它們），但將其添加到 CSS 文件中：

ul {list-style: none;}

（with our without the previous attribute）不刪除項目符號。

盡管ioslides 參考手冊非常有用，但它和其他搜索都沒有提供進一步的見解。

RStudio 中 ioslides 演示文稿的可重現代碼是：

CSS

（作為 style.html 保存到與下面的 .Rmd 片段相同的目錄中。調整項目符號的代碼位於第 65 - 68 行。此樣式表來自此處給出的 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 手冊。）

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

蒂亞

2 個解決方案

解決方案1
 1  2022-02-15 10:18:58

什么似乎有效，並且可能比編輯實際的幻燈片更簡單。html 如下：

首先，在 your.Rmd 中包含一個 style.css 文件：

output:
  ioslides_presentation:
    css: styles.css

其次，創建 styles.css 文件（與 your.Rmd 相同的文件夾）並向其中添加以下內容：

ul li ul li:before {
  content: "\25CB";
}

ul li:before {
  content: "\25CF";
}

這會更改第一級（使用十六進制代碼 25CF 表示實心圓）和第二級（25CB，空心圓）的項目符號樣式類型。

解決方案2
 0 已采納  2021-03-21 22:28:03

TL;博士：

據我所知，項目符號（和許多其他風格元素）只能在從“CSS”和.Rmd ioslides 文件編織的幻燈片的 header 中更改。

整體解釋

(Nb: for ease, I'll refer to the "CSS" file as style.html , the.Rmd file first created in RStudio as draft.Rmd , and the final slideshow knit from those two files as slideshow.html . Not that用戶可以更改所有這些文件的名稱。）

我的第一個線索（早期注意到然后或多或少忽略）是“CSS”文件本身不是級聯樣式表。 雖然默認命名為“style”，但擴展名是正確的“.html”——而不是“.css”：它實際上是一個.html 文件——盡管它包含歸為標題的元素。

ioslides 獲取style.html文件中的信息，並將其集成到從style.html和draft.Rmd文件創建的最終幻燈片文件的不同部分。 slideshow.html的格式化元素。html 都在該文件的 header 中。 即，沒有單獨的.css 文件可供slideshow.html .html 訪問styles。

這意味着可以在style.html文件中修改一些（可以說是許多）風格元素，但必須在最終的slideshow.html中修改任何其他元素。

當然，更改style.html中的元素很容易，並且允許快速重新編織以測試這些更改。 這也意味着style.html文件可以與其他 .Rmd 文件重復使用以實現一致的格式。

在對style.html或“draft.Rmd”文件進行任何更改后（重新）編織的slideshow.html中的任何其他風格元素都必須更改。 這可以是一個簡單的搜索/替換操作，遠非不可能——只是不太明顯或自動化。

回答我的特定問題

搜索slideshow.html中生成的header.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; 在ul > li:before {用圓圈替換一階項目符號。

第二（等）順序項目符號仍將是破折號，因此：

  • 替換content: '-'; 使用列表樣式類型：圓形； in ul li ul li:before {` 用圓圈替換二階破折號。

常見的正則表達式可以加快這一點，即搜索content: '.*'; 並用一些東西/沒有別的東西代替它。 當然，可以為兩個級別選擇不同的項目符號，就像 ioslides 默認使用點和破折號一樣。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 CSS：更改列表中項目符號的顏色？ 使用css配置ioslides后台 Rmarkdown ioslides更改表頭 將自定義 CSS 應用於單個 ioslides CSS 去除了 ioslides 中的 Kable 樣式 在R中使用CSS自定義ioslides 通過JS更改CSS 閃亮的演示文稿（幻燈片）：自定義CSS和徽標Windows 7/8 是否有任何 RMarkdown “ioslides-CSS”參考指南？ 通過 css 更改 JavaFX 微調器
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM