Skip to main content

4 posts tagged with "docusaurus"

View All Tags


· One min read
Frank Zickert
Frank from PyQML

Docusaurus blogging features are powered by the blog plugin.

Simply add Markdown files (or folders) to the blog directory.

Regular blog authors can be added to authors.yml.

The blog post date can be extracted from filenames, such as:

  • 2019-05-30-welcome/

A blog post folder can be convenient to co-locate blog post images:

Docusaurus Plushie

The blog supports tags as well!

And if you don't want a blog: just delete this directory, and use blog: false in your Docusaurus config.

MDX Blog Post

· One min read
Frank Zickert
Frank from PyQML

And, here is a cross-reference to the output

Blog posts support Docusaurus Markdown features, such as MDX.


Use the power of React to create interactive blog posts.

This is the caption
<button onClick={() => alert('button clicked!')}>Click me!</button>
This is the **caption** of the Sine image

Hello World

This is the **caption** of the text output

First Blog Post

· One min read
Frank Zickert
Frank from PyQML


Use the MyST directive referenced in :

ψ=cosθ20+sinθ21=[cosθ2sinθ2]|\psi\rangle = cos\frac{\theta}{2}|0\rangle+sin\frac{\theta}{2}|1\rangle= \begin{bmatrix}cos\frac{\theta}{2}\\sin\frac{\theta}{2}\end{bmatrix}


see the Docusaurus reference for how to admonitions


Try changing tip to warning!

Rendered Images

Use matplotlib to create images

TODO: how to reference an output image?!

# the next cell

from IPython.display import Math
Math(r"\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}")

:::embed #my-cell :::

from base64 import b64decode
from io import BytesIO

from IPython import get_ipython
from IPython.core.magic import register_cell_magic
import PIL

def capture_png(line, cell):
' --no-stderr --no-stdout result',
out_paths = line.strip().split(' ')
for output in result.outputs:
data =
if 'image/png' in data:
path = out_paths.pop(0)
if not path:
raise ValueError('Too few paths given!')
png_bytes = data['image/png']
if isinstance(png_bytes, str):
png_bytes = b64decode(png_bytes)
assert isinstance(png_bytes, bytes)
bytes_io = BytesIO(png_bytes)
image =, 'png')
%%capture_png test_copy.png
import numpy as np
import matplotlib.pyplot as plt

time = np.arange(0, 10, 0.1);
amplitude = np.sin(time)

with plt.xkcd():

plt.plot(time, amplitude)
plt.title('Sine wave')
plt.ylabel('Amplitude = sin(time)')
plt.axhline(y = 0, color ='k')