markdown - 为 reveal.js 演示文稿缩小字体大小和右对齐字体

标签 markdown pandoc reveal.js

您好:我正在用 markdown 编写一些讲座并将它们转换为 reveal.js 幻灯片。老实说,它工作得很好,除了有一些我想修改的基本功能,但我只是不知道如何使用 CSS。

我怎样才能:

  1. 左对齐幻灯片上的大部分文本。
  2. 缩小大部分幻灯片正文的字体大小。一般来说,我想这样做,但我必须特别为引用页面这样做。

谢谢!!

最佳答案

第一步是转到 <head></head>部分。在底部创建一个新的 <style></style>自定义 CSS 样式的标记。

在 reveal.js 中对齐幻灯片上的一段文本

创建一个名为 left 的新类。 .left { } 在你的类(class)里,把text-align: left; .您的代码应如下所示:

<style>
  .left {
    text-align: left;
  }
</style>

在您的 HTML 中,添加 left类到你的任何元素。例如。

<section class="left">Slide 1</section>

或者:

<section>
  I'm just normal text.
  <p class="left">But I'm not!</p>
</section>

在 reveal.js 中更改元素的字体大小

首先要做的是创建一个新类,就像我们为对齐文本所做的那样。

<head>
  <!-- Custom Styles For Our Presentation -->
  <style>
    .left {
      text-align: left;
    }
    
    .size {
      
    }
  </style>
</head>

然后添加以下内容: font-size: /*custom font size*/; 您可以在那里更改大小。 CSS 也有一些内置样式,例如 large , mediumsmall . 之后,只需将类添加到您选择的元素中即可。您还可以像这样将类添加到一个元素:<section class="left size">Slide 1</section> . 您的完成代码可能是这样的:

<head>
  <!-- Custom Styles For Our Presentation -->
  <style>
    .left {
      text-align: left;
    }
    
    .size {
      font-size: 80px;
    }
  </style>
</head>
<body>
  <div class="reveal">
    <div class="slides">
      <section class="left size">Slide 1</section>
      <section>Slide 2 <p class="left">Text aligned left</p></section>
    </div>
  </div>
</body>

关于markdown - 为 reveal.js 演示文稿缩小字体大小和右对齐字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65585659/

相关文章:

markdown - 使用 Pandoc 时禁用 'TeX math'

ms-word - MS Word 是邪恶的!有没有好的替代方案?

r - LaTeX 环境中的特殊字符(& 符号)

r - Rmarkdown 中同一行的 Kableextra 表和 ggplot 图(PDF - 不是 Flexdashboard)

html5-video - 如何在 HTML5(和 Reveal.js)中使用视频字幕

javascript - 在reveal.js中嵌入本地html文件

javascript - CSS 动画 Onclick

git - 如何在 VS Preview 中查看自述文件以及 TFS 欢迎页面

html - CSS 产生一个奇怪的空间

image - 使用 pandoc 选择最佳图像格式