reveal.js - 如何在reveal.js中获得左对齐的段落？

Question

标准 HTML 段落由reveal.js 居中显示。我想将其更改为左对齐，就像在普通网页上一样。我已经看到了这样做的reveal.js 演示，但是这是如何工作的？

Answer 1

解决方案

您可以通过向演示文稿添加一些自定义 CSS 来更改幻灯片的显示方式。例如，添加

<style type="text/css">
p { text-align: left; }
</style>

左对齐所有段落。

更多例子

您只询问了左对齐段落，但这里有一些更复杂的示例，以防有人发现它们有用:

重新设计非标题幻灯片的标题部分:

<style type="text/css">
.reveal .slide h1 { font-size: 200%; text-decoration: underline; }
</style>

重新设计标题幻灯片的标题部分:

<style type="text/css">
.reveal .slides .title {
  /* Ugly ... */
  text-shadow: 0px 0px 25px rgb(100,256,0); 
  font-size: 300%;
}
</style>

Reveal.js 默认的 CSS 文件很复杂，例如 reveal.css ，但我很幸运，只需查看生成的 HTML 即可确定我的 CSS 应该定位什么。

潘多克

如果您从 markdown 生成reveal.js 幻灯片，所有这些仍然有效使用 Pandoc ，我强烈推荐。在这种情况下，输入 <style>阻止文件并告诉 Pandoc 使用 pandoc --include-in-header=<file with <style> block> ... 插入它.