Xaringan文本块带有>

huangapple
go评论74阅读模式
英文:

Xaringan text block with >

问题

我正在使用R-Markdown来构建一个HTML演示文稿。

我正在尝试弄清楚如何使用CSS更改Xaringan演示文稿中缩进文本块的选项，但我无法弄清楚环境是什么。

例如，如果我正在使用以下R标记：

  • 可再生能源和非可再生能源

可再生能源 是从自然过程中提取的能量，其补充速度等于或快于其消耗速度，例如来自太阳能、风能、地热能、水力能和海洋资源的能量。

  • 清洁 vs 脏 能源

我得到了我想要的输出，但我想更改影响缩进文本外观的选项。

生成的HTML源代码如下：

  • 可再生能源和非可再生能源
    > 可再生能源 是从自然过程中提取的能量，其补充速度等于或快于其消耗速度，例如来自太阳能、风能、地热能、水力能和海洋资源的能量。
  • 清洁 vs 脏 能源

我如何更改缩进文本周围的间距，或者更好的是，如何创建其他类似的环境，我可以在我的幻灯片中使用？

这是我所说的内容的基本可重现示例：

---
output:
  xaringan::moon_reader:
    nature:
      countIncrementalSlides: false
      ratio: "16:9"
editor: 
  mode: source
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)

R Markdown

  • 可再生能源和非可再生能源
    > 可再生能源 是从自然过程中提取的能量，其补充速度等于或快于其消耗速度，例如来自太阳能、风能、地热能、水力能和海洋资源的能量。
  • 清洁 vs 脏 能源

<details>
<summary>英文:</summary>

I&#39;m using R-Markdown to build an html presentation.

I am trying to figure out how to change options for the indented text blocks in Xaringan presentations using css, but I can&#39;t figure out what the environment is. 

For example, if I am using the following R-markdown:

    - Renewable and Non-Renewable Energy  
    &gt; [Renewable energy](https://www.nrcan.gc.ca/our-natural-resources/energy-sources-distribution/renewable-energy/about-renewable-energy/7295) is energy derived from natural processes that are replenished at a rate that is equal to or faster than the rate at which they are consumed, e.g. energy generated from solar, wind, geothermal, hydropower and ocean resources.  
    - *Clean* vs *Dirty* Energy  

I get the output that I want, but I&#39;d like to change the options that affect the appearance of the indented text.

![output[1]][1]

The html source code that&#39;s generated comes out as:

    - Renewable and Non-Renewable Energy  
    &amp;gt; [Renewable energy](https://www.nrcan.gc.ca/our-natural-resources/energy-sources-distribution/renewable-energy/about-renewable-energy/7295) is energy derived from natural processes that are replenished at a rate that is equal to or faster than the rate at which they are consumed, e.g. energy generated from solar, wind, geothermal, hydropower and ocean resources.  
    - *Clean* vs *Dirty* Energy  

How can I change the spacing around the indented text or, even better, create other similar environments that I can use in my slides?

Basic reproducible example of what I&#39;m talking about:

    ---
    output:
      xaringan::moon_reader:
        nature:
          countIncrementalSlides: false
          ratio: &quot;16:9&quot;
    editor: 
      mode: source
    ---
    
    ```{r setup, include=FALSE}
    knitr::opts_chunk$set(echo = FALSE)
    ```
    
    ## R Markdown
    - Renewable and Non-Renewable Energy  
    &gt; [Renewable energy](https://www.nrcan.gc.ca/our-natural-resources/energy-sources-distribution/renewable-energy/about-renewable-energy/7295) is energy derived from natural processes that are replenished at a rate that is equal to or faster than the rate at which they are consumed, e.g. energy generated from solar, wind, geothermal, hydropower and ocean resources.  
    - *Clean* vs *Dirty* Energy  


  [1]: https://i.stack.imgur.com/tZaEf.png




</details>


# 答案1
**得分**: 1

你可以使用[内容类](https://bookdown.org/yihui/rmarkdown/xaringan-format.html#content-classes)来为幻灯片上的任何元素分配类。语法是`.className[content]`。

所以，要更改缩进文本周围的间距（即`blockquote`标签内的`p`标签中的文本），您可以将其包装在内容类中，并为此类定义CSS属性，我们还可以将这个类`space`用于其他缩进文本。

```yaml
---
output:
  xaringan::moon_reader:
    nature:
      countIncrementalSlides: false
      ratio: "16:9"
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)

.space blockquote {
  margin: 2em 1em;
  padding-top: 0.5px;
  padding-bottom: 0.5px;
}

.space blockquote p {
  line-height: 2em;
}

R Markdown

  • 可再生和不可再生能源
    .space[

可再生能源 是从自然过程中获取的能源，其补充速度与其消耗速度相等或更快，例如太阳能、风能、地热能、水力能源和海洋资源产生的能源。
]

  • 清洁与脏能源
    .space[

清洁燃料是指这些燃料类别：煤油、液化石油气（LPG）、电力。相比之下，脏燃料指的是在固态状态下排放大量有毒物质和烟雾的燃料。
]


<hr>

[![带间距的缩进文本][1]][1]

<hr>

要为整个幻灯片分配一个类，可以使用[`class`](https://bookdown.org/yihui/rmarkdown/xaringan-format.html#slides-and-properties)幻灯片属性。

  [1]: https://i.stack.imgur.com/ifUwM.png
```

<details>
<summary>英文:</summary>

You can use [Content classes](https://bookdown.org/yihui/rmarkdown/xaringan-format.html#content-classes) to assign classes to any elements on a slide, too. The syntax is `.className[content]`.

So to change the spacing around the indented text (i.e. text in `p` tag within `blockquote` tag), you can wrap it with a content class and define css property for this class and we can use this class `space` for other indented text too.

output:
xaringan::moon_reader:
nature:
countIncrementalSlides: false
ratio: "16:9"

knitr::opts_chunk$set(echo = FALSE)

.space blockquote {
  margin: 2em 1em;
  padding-top: 0.5px;
  padding-bottom: 0.5px;
}

.space blockquote p {
  line-height: 2em;
}

R Markdown

  • Renewable and Non-Renewable Energy
    .space[
    > Renewable energy is energy derived from natural processes that are replenished at a rate that is equal to or faster than the rate at which they are consumed, e.g. energy generated from solar, wind, geothermal, hydropower and ocean resources.
    ]

  • Clean vs Dirty Energy
    .space[
    > Clean fuel refers to these categories of fuels: kerosene, Liquefied Petroleum Gas (LPG), electricity. In contrast, dirty fuels refer to fuels that are in their solid-state that emit a lot of toxic substances and smoke.
    ]


&lt;hr&gt;

[![spaced indented text][1]][1]

&lt;hr&gt;

And to assign a class for a whole slide, there&#39;s a [`class`](https://bookdown.org/yihui/rmarkdown/xaringan-format.html#slides-and-properties) slide property.

  [1]: https://i.stack.imgur.com/ifUwM.png

</details>



# 答案2
**得分**: 1

谢谢。

对我（提问不清楚的）问题的回答是：

1) R-Markdown中的"&gt;"触发了blockquote类，因此您可以使用CSS来更改其外观/属性。

2) 使用CSS创建一个具有类似属性的新样式。

在我的情况下，我想要在引用块下面创建一个小的引用区域，所以我用以下方式实现了这一目标：

```{css, echo=FALSE}
blockquote {
  border-left: .2px solid #275d38;
  margin: -5px 80px -5px 20px;
  padding-top: -0.5px;
  padding-bottom: -0.5px;
  line-height: 1.35em;
}

.cite {
  margin: -20px 80px -25px 80px; 
  padding-top: -0.5px;
  padding-bottom: -0.5px;
  line-height: 1.25em;
  font-size: 20px;
}
```
这既更改了blockquote的参数，又为引用创建了一个新样式，使其看起来像这样：

[![示例幻灯片][1]][1]

感谢所有人的答案和评论。

[1]: https://i.stack.imgur.com/Vm7xp.png

<details>
<summary>英文:</summary>

Thank you. 

The answers to my (poorly posed) question(s) was/were:

1) The &quot;&gt;&quot; in R-Markdown triggers the blockquote class, so you can change appearance/ properties for that using CSS.

2) Use CSS to create a new / incremental style with similar properties.

In my case, I was looking to create a small area for citations under blockquotes, so I&#39;ve accomplished that with:

    ```{css, echo=FALSE}
    blockquote {
      border-left: .2px solid #275d38;
      margin: -5px 80px -5px 20px;
      padding-top: -0.5px;
      padding-bottom: -0.5px;
      line-height: 1.35em;
    }
    
    .cite {
      margin: -20px 80px -25px 80px; 
      padding-top: -0.5px;
      padding-bottom: -0.5px;
      line-height: 1.25em;
      font-size: 20px;
    }
    ```
which both changes the blockquote parameters and creates a new style for the citation under the quote, so it looks like this:

[![sample slide][1]][1]

Thanks to all for the answers and comments.

  [1]: https://i.stack.imgur.com/Vm7xp.png

</details>

huangapple
  • 本文由 发表于 2023年1月9日 04:59:41
  • 转载请务必保留本文链接：https://go.coder-hub.com/75051251.html
  • css
  • html
  • r-markdown
  • xaringan
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定