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 0x7f6b6e116350>

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

<matplotlib.image.AxesImage at 0x7f6b6c02ded0>

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

<matplotlib.image.AxesImage at 0x7f6b6c0c6bc0>

Markdown

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

Here’s the Jupyter logo:

Note

Here’s a full-width admonition!

Mathematics

(4)\[\begin{equation} \int_0^\infty \frac{x^3}{e^x-1}\,dx = \frac{\pi^4}{15} \end{equation}\]

\[ \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}\]

Link to above: (5)

(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}\]

Link to above: (6)

• \[ \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:

Code blocks in margins

print("here is some python")

as well as admonitions and images:

Notes in margins

Note

Wow, a note with an image in a margin!

Margin under lower level shouldn’t have different left-alignment

Notes in margins

Note

Wow, a note with an image in a margin!

Margins with toggle buttons

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

My margin

Here’s my margin content

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 0x7f6b89ea9a50>

Markdown cell with code in margin

a = 2
b = 3
def aplusb(a, b):
    return a+b

and now r

a <- 2
b <- 4
a+b

how does it look?

Markdown cell with images in sidebar

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.

Fig. 10 And here is my figure caption, if you look to the left, you can see that COOL is in big red letters. But you probably already noticed that, really I am just taking up space to see how the margin caption looks like when it is really long :-).

Note

This note should not overlap with the margin caption!

Entire figures in the margin:

Fig. 11 This figure should be entirely in the margin.

Sidenotes and marginnotes

Here’s a sentence ^{1 1}Test sidenote 1. with multiple ^{2 2}Test sidenote 2. sidenotes.

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

Sidenotes inside of admonitions should behave the same:

⁵Sidenote defined in the admonition.⁶Sidenote defined outside the admonition.

Note

An admonition with a sidenote defined in the admonition ^{5 5}Sidenote defined in the admonition. and another defined outside of the admonition ^{6 6}Sidenote defined outside the admonition..

Nested admonitions

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.

Default Header	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

---