Styling
The most basics styling
Global settings
One can set a global style applied for all slides in your notebook. You need to use HTML or WLX cels for it and redefine .reveal
class
.wlx
<style>
.reveal {
font-family: Arial;
}
</style>
now the default font will be Arial
.slide
# Hey, I am Arial!
Local
One can do the same with an individual slide by wrapping the text into HTML or WLX tags
.slide
<div style="font-family: Arial">
# Title, I am Arial
</div>
I am not Arial
In order to mix Markdown with HTML or WLX correctly, remove white spaces from the beginning markdown, i.e.
.slide
<div>
# It wont work
</div>
but instead
.slide
<div>
# It will work
</div>
Or one can define a class for it early
.wlx
<style>
.specialClass {
font-family: Arial;
}
</style>
.slide
<div class="specialClass">
# Title, I am Arial
</div>
I am not Arial
Using data attributes
It might come handy to use RevealJS styling option for individual elements instead of writing plain XML
.slide
<!-- .slide: data-background-color="black" -->
# Hey, I am white <!-- .element: style="color:white" -->
# Hey, I am red <!-- .element: style="color:red" -->
Here slide
is applied to an entire slide, while element
is localized to the last markdown element.
Misc
Align things on a slide
There are many ways on how to do that, here is one of the examples
Local style
Define your own class inside slide or outside in HTML cell for example
.slide
<style>
.center-x{
margin-left:auto;
margin-right:auto;
margin-top: 2rem;
border: none;
border-radius: 4px
}
</style>
## Programming Languages
### Wolfram Language
<iframe class="center-x" width="800" height="500" src="https://www.wolfram.com"/>
Inline styles
The same as before, but explicitly as style
attribute
...
<iframe style="margin-left: auto; margin-right:auto" width="800" height="500" src="https://www.wolfram.com"/>
Tailwind utility classes
The same as before, but explicitly as class
attribute
...
<iframe class="mr-auto ml-auto" width="800" height="500" src="https://www.wolfram.com"/>
Collapse / Expand section
Use native HTML5 tag for it
.slide
# Title
<details>
<summary>Hidden section</summary>
## Subtitle
</details>
Scroll bar
If the content is too large, but you still want to keep it on a single slide, one can tune the settings for a slide element
.slide
<!-- .slide: style="height:100%; overflow-y:scroll" -->
...large content goes
Align content
.slide
<!-- .slide: style="text-align:left" -->
# Heading
Some text