⚠️The latest release refactored our HTML, so double-check your custom CSS rules!⚠️

# Theme-specific elements#

This page contains a number of reference elements to see how they look in this theme. The information is not meant to be easy to read or understand, just browse through and see how things look!

## Full-width elements#

### Code cells#

## A full-width square figure
fig, ax = plt.subplots()
ax.imshow(square)

<matplotlib.image.AxesImage at 0x7f5b92423f10>

## A full-width wide figure
fig, ax = plt.subplots()
ax.imshow(wide)

<matplotlib.image.AxesImage at 0x7f5b65dfe350>

# Now here's the same figure at regular width
fig, ax = plt.subplots()
ax.imshow(wide)

<matplotlib.image.AxesImage at 0x7f5b65dfd7e0>


### Markdown#

This is some markdown that should be shown at full width.

Here’s the Jupyter logo:

Note

### Mathematics#

(4)#$$$\int_0^\infty \frac{x^3}{e^x-1}\,dx = \frac{\pi^4}{15}$$$
$\int_0^\infty \frac{x^3}{e^x-1}\,dx = \frac{\pi^4}{15}$
(5)#$w_{t+1} = (1 + r_{t+1}) s(w_t) + y_{t+1}$

(6)#$\begin{split}w_{t+1} = (1 + r_{t+1}) s(w_t) + y_{t+1} \\ w_{t+1} = (1 + r_{t+1}) s(w_t) + y_{t+1} \\ w_{t+1} = (1 + r_{t+1}) s(w_t) + y_{t+1}\end{split}$

• $\mathcal{O}(f) = \{ g | \exists c > 0, \exists n_0 \in \mathbb{N}_0, \forall n \geq n_0 : [g(n) \leq c \cdot f(n)]\}$

A really long math equation

\begin{split} \begin{align} \mathrm{SetConv} \left( \{(x^{c},y^{c})\}_{c=1}^{C} \right)(x) \left( \{(x^{c},y^{c})\}_{c=1}^{C} \right)(x) \left( \{(x^{c},y^{c})\}_{c=1}^{C} \right)(x) &= \sum_{c=1}^{C} y^{(c)} w_{\theta} \left( x - x^{(c)} \right) \sum_{c=1}^{C} y^{(c)} w_{\theta} \left( x - x^{(c)} \right) \sum_{c=1}^{C} y^{(c)} w_{\theta} \left( x - x^{(c)} \right)\\ &= \left( y^{(c')} w_{\theta} \left( x - x^{(c')} \right) \right) + \sum_{c \neq c'} y^{(c)} w_{\theta} \left( x - x^{(c)} \right) \\ &= 0 + \sum_{c \neq c'} y^{(c)} w_{\theta} \left( x - x^{(c)} \right) \end{align} \end{split}

Full width equations work

\begin{split}\begin{align} \mathrm{SetConv} \left( \{(x^{c},y^{c})\}_{c=1}^{C} \right)(x) \left( \{(x^{c},y^{c})\}_{c=1}^{C} \right)(x) \left( \{(x^{c},y^{c})\}_{c=1}^{C} \right)(x) &= \sum_{c=1}^{C} y^{(c)} w_{\theta} \left( x - x^{(c)} \right) \sum_{c=1}^{C} y^{(c)} w_{\theta} \left( x - x^{(c)} \right) \sum_{c=1}^{C} y^{(c)} w_{\theta} \left( x - x^{(c)} \right)\\ &= \left( y^{(c')} w_{\theta} \left( x - x^{(c')} \right) \right) + \sum_{c \neq c'} y^{(c)} w_{\theta} \left( x - x^{(c)} \right) \\ &= 0 + \sum_{c \neq c'} y^{(c)} w_{\theta} \left( x - x^{(c)} \right) \end{align}\end{split}

## Margins#

Margin content can include all kinds of things, such as code blocks:

as well as admonitions and images:

### Margins with toggle buttons#

Here’s some margin content, let’s see how it interacts w/ the toggle button

Here’s a toggleable note:

Note

My note

### Margins with full-width content#

Note

This is my test

Let’s see what happens

## code cell in the margin with output
fig, ax = plt.subplots()
ax.imshow(wide)

<matplotlib.image.AxesImage at 0x7f5b65dfd810>


### More content after the margin content#

This is extra content after the margins to see if cells overlap and such. Also to make sure you can still interact with the margin content. This is extra content after the margins to see if cells overlap and such. Also to make sure you can still interact with the margin content.

a = 2


This is extra content after the margins to see if cells overlap and such. Also to make sure you can still interact with the margin content. This is extra content after the margins to see if cells overlap and such. Also to make sure you can still interact with the margin content. This is extra content after the margins to see if cells overlap and such. Also to make sure you can still interact with the margin content.

### Figures with margin captions#

The margin-caption class should cause a figure’s caption to pop out to the right.

Note

This note should not overlap with the margin caption!

Entire figures in the margin:

## Sidenotes and marginnotes#

Here’s a sentence1Test sidenote 1. with multiple 2Test sidenote 2. sidenotes.

Here’s a sentence Test marginnote 1. with multiple marginnotes Test marginnote 2..

Sidenotes inside of admonitions should behave the same:

Note

These aren’t theme-specific, but we still show below to make sure they work.

Note

Here’s a note!

Tip

And a tip!

## MyST Markdown elements#

Here are a few design elements to show off MyST Markdown.

### Table alignment#

To ensure that markdown alignment is rendered properly.

Left Align

Right Align

Center Align

Cell 1

Cell 2

Cell 3

Cell 4

Cell 1

Cell 2

Cell 3

Cell 4

### List table width#

Testing list tables take width as expected.

 a b c d