Xaringan文本块带有>

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

Xaringan text block with >

问题

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

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

例如,如果我正在使用以下R标记:

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

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

  • 清洁 vs 能源

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

生成的HTML源代码如下:

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

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

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

  1. ---
  2. output:
  3. xaringan::moon_reader:
  4. nature:
  5. countIncrementalSlides: false
  6. ratio: "16:9"
  7. editor:
  8. mode: source
  9. ---
  10. ```{r setup, include=FALSE}
  11. knitr::opts_chunk$set(echo = FALSE)

R Markdown

  • 可再生能源和非可再生能源
    > 可再生能源 是从自然过程中提取的能量,其补充速度等于或快于其消耗速度,例如来自太阳能、风能、地热能、水力能和海洋资源的能量。
  • 清洁 vs 能源
  1. <details>
  2. <summary>英文:</summary>
  3. I&#39;m using R-Markdown to build an html presentation.
  4. 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.
  5. For example, if I am using the following R-markdown:
  6. - Renewable and Non-Renewable Energy
  7. &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.
  8. - *Clean* vs *Dirty* Energy
  9. I get the output that I want, but I&#39;d like to change the options that affect the appearance of the indented text.
  10. ![output[1]][1]
  11. The html source code that&#39;s generated comes out as:
  12. - Renewable and Non-Renewable Energy
  13. &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.
  14. - *Clean* vs *Dirty* Energy
  15. How can I change the spacing around the indented text or, even better, create other similar environments that I can use in my slides?
  16. Basic reproducible example of what I&#39;m talking about:
  17. ---
  18. output:
  19. xaringan::moon_reader:
  20. nature:
  21. countIncrementalSlides: false
  22. ratio: &quot;16:9&quot;
  23. editor:
  24. mode: source
  25. ---
  26. ```{r setup, include=FALSE}
  27. knitr::opts_chunk$set(echo = FALSE)
  28. ```
  29. ## R Markdown
  30. - Renewable and Non-Renewable Energy
  31. &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.
  32. - *Clean* vs *Dirty* Energy
  33. [1]: https://i.stack.imgur.com/tZaEf.png
  34. </details>
  35. # 答案1
  36. **得分**: 1
  37. 你可以使用[内容类](https://bookdown.org/yihui/rmarkdown/xaringan-format.html#content-classes)来为幻灯片上的任何元素分配类。语法是`.className[content]`。
  38. 所以,要更改缩进文本周围的间距(即`blockquote`标签内的`p`标签中的文本),您可以将其包装在内容类中,并为此类定义CSS属性,我们还可以将这个类`space`用于其他缩进文本。
  39. ```yaml
  40. ---
  41. output:
  42. xaringan::moon_reader:
  43. nature:
  44. countIncrementalSlides: false
  45. ratio: "16:9"
  46. ---
  1. ```{r setup, include=FALSE}
  2. knitr::opts_chunk$set(echo = FALSE)
  1. .space blockquote {
  2. margin: 2em 1em;
  3. padding-top: 0.5px;
  4. padding-bottom: 0.5px;
  5. }
  6. .space blockquote p {
  7. line-height: 2em;
  8. }

R Markdown

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

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

  • 清洁能源
    .space[

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

  1. <hr>
  2. [![带间距的缩进文本][1]][1]
  3. <hr>
  4. 要为整个幻灯片分配一个类,可以使用[`class`](https://bookdown.org/yihui/rmarkdown/xaringan-format.html#slides-and-properties)幻灯片属性。
  5. [1]: https://i.stack.imgur.com/ifUwM.png
  6. ```
  7. <details>
  8. <summary>英文:</summary>
  9. 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]`.
  10. 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"

  1. knitr::opts_chunk$set(echo = FALSE)
  1. .space blockquote {
  2. margin: 2em 1em;
  3. padding-top: 0.5px;
  4. padding-bottom: 0.5px;
  5. }
  6. .space blockquote p {
  7. line-height: 2em;
  8. }

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

  1. &lt;hr&gt;
  2. [![spaced indented text][1]][1]
  3. &lt;hr&gt;
  4. 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.
  5. [1]: https://i.stack.imgur.com/ifUwM.png
  6. </details>
  7. # 答案2
  8. **得分**: 1
  9. 谢谢。
  10. 对我(提问不清楚的)问题的回答是:
  11. 1) R-Markdown中的"&gt;"触发了blockquote类,因此您可以使用CSS来更改其外观/属性。
  12. 2) 使用CSS创建一个具有类似属性的新样式。
  13. 在我的情况下,我想要在引用块下面创建一个小的引用区域,所以我用以下方式实现了这一目标:
  14. ```{css, echo=FALSE}
  15. blockquote {
  16. border-left: .2px solid #275d38;
  17. margin: -5px 80px -5px 20px;
  18. padding-top: -0.5px;
  19. padding-bottom: -0.5px;
  20. line-height: 1.35em;
  21. }
  22. .cite {
  23. margin: -20px 80px -25px 80px;
  24. padding-top: -0.5px;
  25. padding-bottom: -0.5px;
  26. line-height: 1.25em;
  27. font-size: 20px;
  28. }
  29. ```
  30. 这既更改了blockquote的参数,又为引用创建了一个新样式,使其看起来像这样:
  31. [![示例幻灯片][1]][1]
  32. 感谢所有人的答案和评论。
  33. [1]: https://i.stack.imgur.com/Vm7xp.png
  34. <details>
  35. <summary>英文:</summary>
  36. Thank you.
  37. The answers to my (poorly posed) question(s) was/were:
  38. 1) The &quot;&gt;&quot; in R-Markdown triggers the blockquote class, so you can change appearance/ properties for that using CSS.
  39. 2) Use CSS to create a new / incremental style with similar properties.
  40. In my case, I was looking to create a small area for citations under blockquotes, so I&#39;ve accomplished that with:
  41. ```{css, echo=FALSE}
  42. blockquote {
  43. border-left: .2px solid #275d38;
  44. margin: -5px 80px -5px 20px;
  45. padding-top: -0.5px;
  46. padding-bottom: -0.5px;
  47. line-height: 1.35em;
  48. }
  49. .cite {
  50. margin: -20px 80px -25px 80px;
  51. padding-top: -0.5px;
  52. padding-bottom: -0.5px;
  53. line-height: 1.25em;
  54. font-size: 20px;
  55. }
  56. ```
  57. which both changes the blockquote parameters and creates a new style for the citation under the quote, so it looks like this:
  58. [![sample slide][1]][1]
  59. Thanks to all for the answers and comments.
  60. [1]: https://i.stack.imgur.com/Vm7xp.png
  61. </details>

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

发表评论

匿名网友

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

确定