Skip to main content

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

cell 1
.wlx

<style>
.reveal {
font-family: Arial;
}
</style>

now the default font will be Arial

cell 2
.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
warning

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

cell 1
.wlx

<style>
.specialClass {
font-family: Arial;
}
</style>
cell 2
.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