reST Cheat Sheet

Conf.py

conf.py used in examples on this page

from datetime import datetime
import os
import sys

# -- Project information -----------------------------------------------------

copyright = f"2025–{datetime.now().year}, Theo Langstraat"
project = 'Document server'

# -- General configuration ---------------------------------------------------

extensions = [
    'myst_parser',
    'sphinx_copybutton',
    'sphinx_design',
    'notfound.extension',
    'sphinxcontrib.mermaid',
    'sphinx_tabs.tabs',
    'sphinxcontrib.bibtex',
]

# Geef het BibTeX-bestand op (bijvoorbeeld refs.bib in dezelfde map)
bibtex_bibfiles = ['refs.bib']

# -- sphinx_design - Default dropdown ----------------------------------------

sd_custom_directives = {
    "dropdown-source-code": {
        "inherit": "dropdown",
        "argument": "**Source code**",
        "options": {
            #"open": "",             # Open the dropdown by default.
            "color": "secondary",    # Set the color of the dropdown header (background and font). 
                                     # One of the semantic color names:
                                     # primary, secondary, success, danger, warning, info, light, dark, muted.
            "icon": "code",          # Set an octicon icon to prefix the dropdown header.
            #"chevron": "",          # The open-close direction of the chevron. One of: right-down, down-up.
            #"animate": "",          # Animate the dropdown opening (fade-in or fade-in-slide-down).
            "margin": "3 3 0 0",     # Outer margin of grid. 
                                     # One (all) or 
                                     # four (top bottom left right) values from: 0, 1, 2, 3, 4, 5, auto.
            #"name": "",             # Set a reference-able name for the dropdown container.
            #"class-container": "",  # Additional CSS classes for the container element.
            #"class-title": "",      # Additional CSS classes for the title element.
            #"class-body": "",       # Additional CSS classes for the body element.
        },
    }
}

myst_enable_extensions = ["colon_fence"]

templates_path = ['_templates']
exclude_patterns = []

# -- Options for HTML output -------------------------------------------------

html_theme = 'sphinx_rtd_theme'

html_theme_options = {
    "collapse_navigation": False,
    "sticky_navigation": True,
    "navigation_depth": 6,
    "titles_only": False,
    "logo_only": True,
}

html_static_path = ['_static']
html_favicon = 'images/favicon.png'
html_logo = 'images/logo - blauw transparent.png'
html_show_sphinx = False
html_show_sourcelink = False
html_permalinks = False

html_css_files = [
    'css/custom-fonts.css', 'css/custom.css',
    'css/fontawesome/css/all.min.css',
]

html_js_files = ['js/init.js']

# -- Python path adjustments -------------------------------------------------

sys.path.insert(0, os.path.abspath(os.path.dirname(__file__)))

# -- Release info ------------------------------------------------------------

from releases import (
    author,
    release,
    release_dv_typo3,
    release_dv_nc,
    release_phiki_typo3,
)

rst_epilog = """
.. |author| replace:: {author}
.. |release| replace:: {release}
.. |release_dv_typo3| replace:: {release_dv_typo3}
.. |release_dv_nc| replace:: {release_dv_nc}
.. |release_phiki_typo3| replace:: {release_phiki_typo3}
""".format(
    author=author,
    release=release,
    release_dv_typo3=release_dv_typo3,
    release_dv_nc=release_dv_nc,
    release_phiki_typo3=release_phiki_typo3
)

Chart.js

Weer

Weer Historie Rotterdam

buienradar.nl

Inzoomen = scrollen met het muiswiel, Pannen = houd shift ingedrukt en klik met de muis

Kwadratische vergelijking

a: 2 b: 4 c: -50

Berekening actuele waarden

Source code

.. raw:: html

   <!-- kwadratische vergelijkings grafiek -->
   <canvas id="myChart"></canvas>
   <div class="input-graph">
      <label for="a">a: </label>
      <span id="a-value">2</span>
      <input id="a" type="range" min="-5" max="5" step="0.1" value="2">
      <label for="b">b: </label>
      <span id="b-value">4</span>
      <input id="b" type="range" min="-20" max="20" step="0.1" value="4">
      <label for="c">c: </label>
      <span id="c-value">-50</span>
      <input id="c" type="range" min="-100" max="100" step="1" value="-50">
   </div>
   <script src="/_static/js/dynamicGraph.js"></script>

/_static/js/dynamicGraph.js

$(function() {
    $(document).ready(function() {

        // Plugin om dikke nul-assen te tekenen
        const zeroAxesPlugin = {
        id: 'zeroAxes',
        afterDraw(chart) {
            const {ctx, chartArea: {left, right, top, bottom}, scales: {x, y}} = chart;

            ctx.save();
            ctx.strokeStyle = '#666';
            ctx.lineWidth = 1;

            // Horizontale nul-as (y = 0)
            const yZero = y.getPixelForValue(0);
            ctx.beginPath();
            ctx.moveTo(left, yZero);
            ctx.lineTo(right, yZero);
            ctx.stroke();

            // Verticale nul-as (x = 0)
            const xZero = x.getPixelForValue(0);
            ctx.beginPath();
            ctx.moveTo(xZero, top);
            ctx.lineTo(xZero, bottom);
            ctx.stroke();

            ctx.restore();
        }
    };

    chart = new Chart(document.getElementById('myChart'), {
        type: 'line',
        data: {
            datasets: [{
                label: 'f(x)',
                type: 'line',
                fill: false,
                borderWidth: 2,
                backgroundColor: "#c96500",
                borderColor: "#c96500",
                pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
                pointHoverBorderColor: "rgba(59, 89, 152, 1)",
                pointStyle: 'line',
                pointRadius: 0,
                cubicInterpolationMode: 'monotone',
                data: [],
            }]
        },
        options: {
            //parsing: false,
            responsive: true,
            scales: {
                x: {
                    min: -20,
                    max: 20,
                    grid: { color: '#eee' },
                    type: 'linear',
                    position: 'bottom'
                },
                y: {
                    min: -100,
                    max: 200,
                    grid: { color: '#eee' }
                }
            },
            plugins: {
                legend: { display: false }
            }
        },
        plugins: [zeroAxesPlugin] // plugin activeren
    });

    const params = new URLSearchParams({
        a: 2,
        b: 4,
        c: -50
    });

    fetch(`/_static/php/kwadratische_functie.php?${params}`)
        .then(response => response.json())
        .then(data => {
            chart.data.datasets[0].data = data;
            chart.update();
        });
        updateChart();
    });
});

function debounce(func, delay) {
    let timeoutId;

    return function (...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => func.apply(this, args), delay);
    };
}

const debouncedUpdateChart = debounce(updateChart, 250);
const mathElement = document.getElementById('math');
      mathElement.style.visibility = 'hidden';

function updateInfo(a, b, c) {
    const D = b * b - 4 * a * c;
    const discriminant = fmt(D, 2);
    const x1 = fmt((-b + Math.sqrt(D)) / (2 * a), 1);
    const x2 = fmt((-b - Math.sqrt(D)) / (2 * a), 1);
    const xT = -b / (2 * a);
    const xTop = fmt(xT, 1);
    const yTop = fmt(a * xT * xT + b * xT + c, 1);

    const formulas =
        `\\[
        \\begin{aligned}
            f(x) & = ax^2 + bx + c = ${a}x^2 ${b >= 0 ? '+' : '-'} ${Math.abs(b)}x ${c >= 0 ? '+' : '-'} ${Math.abs(c)} \\\\[8pt]
            
            x_1, x_2 & = \\frac{-b\\pm\\sqrt{b^2 - 4ac}}{2a} \\\\[8pt]

            D & = b^2 - 4ac = ${b}^2 - 4 \\cdot ${a} \\cdot ${c} = ${discriminant} \\\\[8pt]

            x_1 & = \\frac{-b + \\sqrt{D}}{2\\cdot a} = \\frac{-(${b}) + \\sqrt{${discriminant}}}{2\\cdot${a}} =
                ${x1} \\\\
            x_2 & = \\frac{-b - \\sqrt{D}}{2\\cdot a} = \\frac{-(${b}) - \\sqrt{${discriminant}}}{2\\cdot${a}} =
                ${x2} \\\\[8pt]

            x_{\\text{top}} & = \\frac{-b}{2a} = ${xTop} \\\\[4pt]
            y_{\\text{top}} &= ${yTop} \\\\[8pt]
        \\end{aligned}
        \\]`;
        
    mathElement.innerHTML = formulas;

    document.getElementById('a-value').innerHTML = a;
    document.getElementById('b-value').innerHTML = b;
    document.getElementById('c-value').innerHTML = c;

    if (window.MathJax) {
        MathJax.typesetPromise([mathElement]).then(() => {
        });
    }
}

async function updateChart() {
    const a = Number(document.getElementById('a').value);
    const b = Number(document.getElementById('b').value);
    const c = Number(document.getElementById('c').value);

    const response = await fetch(
        `/_static/php/kwadratische_functie.php?a=${a}&b=${b}&c=${c}`
    );

    chart.data.datasets[0].data = await response.json();
    chart.update();
    updateInfo(a, b, c);
}

document.querySelectorAll('input').forEach(input => {
    input.addEventListener('input', debouncedUpdateChart);
});

const formatters = {};

function fmt(n, decimals = 1) {
    if (!formatters[decimals]) {
        formatters[decimals] = new Intl.NumberFormat(navigator.language, {
            minimumFractionDigits: 0,
            maximumFractionDigits: decimals,
            useGrouping: false
        });
    }

    return formatters[decimals].format(n);
}

MathJax.startup.promise.then(() => {
    //init();
            mathElement.style.visibility = 'visible';

});

.. card::  Berekening actuele waarden
   :margin: 2 2 0 0
   :shadow: none

      .. raw:: html

         <div class="math-container"">
            <div id="math" class="math-hidden"></div>
         </div>

Admonition

Attention

Information that requires the reader’s attention. The content of the directive should be written in complete sentences and include all appropriate punctuation.

Caution

Information with regard to which the reader should exercise care. The content of the directive should be written in complete sentences and include all appropriate punctuation.

Danger

Information which may lead to near and present danger if not heeded. The content of the directive should be written in complete sentences and include all appropriate punctuation.

Error

Information relating to failure modes of some description. The content of the directive should be written in complete sentences and include all appropriate punctuation.

Hint

Information that is helpful to the reader. The content of the directive should be written in complete sentences and include all appropriate punctuation.

Important

Information that is of paramount importance and which the reader must not ignore. The content of the directive should be written in complete sentences and include all appropriate punctuation.

Note

An especially important bit of information that the reader should know. The content of the directive should be written in complete sentences and include all appropriate punctuation.

Tip

Some useful tidbit of information for the reader. The content of the directive should be written in complete sentences and include all appropriate punctuation.

Warning

An important bit of information that the reader should be very aware of. The content of the directive should be written in complete sentences and include all appropriate punctuation.

Belangrijk!

Dit is een aangepaste admonition. Je kunt hier elke tekst, lijst of codeblok in plaatsen.

Card

Rspamd installatie

Installeer eerst de repository.

Header

Title 1

Card content

Footer

Title 2

B

Title

Text

Header

Title

Content

Footer

Header

Title

Content

Footer

Code

This is a normal text paragraph. The next paragraph is a code sample:

It is not processed in any way, except
that the indentation is removed.

It can span multiple lines.

This is a normal text paragraph again.

>>> 1 + 1
2

Code-block

#!/bin/bash
#
# Weekly maintenance print voor Canon Pro 300
# Met foutdetectie, queue-checks en logging voor cron
#

set -euo pipefail

# Log alles naar stdout/stderr zodat cron het mailt
echo "=== Weekly print gestart: $(date) ==="

Footnotes

Fontawesome

An icon , some more text

Footnotes

Lorem ipsum [1] dolor sit amet … [2]

Headings

Use # to underline 1st level headers.
Use * to underline 2nd level headers.
Use = to underline 3rd level headers.
Use - to underline 4th level headers.
Use ^ to underline 5th level headers.
Use “ to underline 6th level headers.

Inline markup

The standard reStructuredText inline markup is quite simple: use

one asterisk: text for emphasis (italics),

two asterisks: text for strong emphasis (boldface), and

backquotes: text for code samples.

If text is indented, it is treated as a block quotation:

Should array indices start at 0 or 1? My suggested compromise of 0.5 was rejected without, I thought, proper consideration – Stan Kelly-Bootle

Links

This is a paragraph that contains a link.

Lists

This is a bulleted list.
It has two items, the second item uses two lines.

This is a numbered list.
It has two items too.
This is a numbered list.
It has two items too.

Math

(1)\[\begin{split}(\mathcal{F}f)(y) & = \frac{1}{\sqrt{2\pi}^{\ n}} \int_{\mathbb{R}^n} f(x)\, e^{-\mathrm{i} y \cdot x} \,\mathrm{d} x. \\ \\ f(x) & = x^2 + 2xy + y^2\end{split}\]

(2)\[\begin{split} a^2 + b^2 & = c^2 \\ \\ f(x) & = x^2 + 2xy + y^2\end{split}\]

\[\begin{split}f(y) & = ax^2 + bx + c \\ \\ x_1, x_2 & = \frac{-b\pm\sqrt{b^2 - 4ac}}{2a} \\ \\ x_{\text{top}} & = \frac{-b}{2a}\end{split}\]

\[ \begin{align}\begin{aligned}x^2 + 2\frac{b}{2a}x + \left(\frac{b}{2a}\right)^2 &= \left(\frac{b}{2a}\right)^2 - \frac{c}{a}\\x + \left(\frac{b}{2a}\right)^2 &= \left(\frac{b}{2a}\right) - \frac{c}{a}\end{aligned}\end{align} \]

\[\sqrt{1+\sqrt{1+\sqrt{1+ \sqrt{1+\sqrt{1+\sqrt{1+\sqrt{1+x}}}}}}} = x \tag4\]

The :name: option puts a label on the equation that can be linked to by hyperlink references. In this case, you could link back to the previous math equation using the Fourier transform hyperlink reference.

Pythagoras

\[\begin{split}&a\cr &b \\\end{split}\]

\[A=\left\{\matrix{& x & , & if x\ge0;\cr &-x & , & otherwise.\cr}\right.\]

\[A=\left(\matrix{x-\lambda&1&0\cr 0&x-\lambda&1\cr 0&0&x-\lambda\cr}\right)\]

\[\begin{split}\left\{ \begin{array}{rl} \alpha&=f(z)\\ \beta&=f(z^2)\\ \gamma&=f(z^3) \end{array} \right\}\qquad\left\{ \begin{array}{rl} x&=\alpha^2-\beta\\ y&=2\gamma \end{array} \right\}.\end{split}\]

\[\begin{split}(x+y)(x-y)&=x^2-xy+xy-y^2 \\ &=x^2-y^2 \\ (x+y)^2 &=x^2+2xy+y^2\end{split}\]

\[\begin{split}&\kappa = \begin{cases} 0, & \text{if censored} \\ 1, & \text{if not censored} \\ 2, & \text{if censored} \\ 3, & \text{if not censored} \\ 4, & \text{if censored} \\ 5, & \text{if not censored} \\ 6, & \text{bla bla bla} \end{cases} \\ \\ &M= \left[ {\begin{array}{cc} 1 & 2 \\ 3 & 4 \\ \end{array} } \right]\end{split}\]

Mermaid

chart

        xychart-beta
    title "Monthly sales"
    x-axis [Jan, Feb, Mar, Apr]
    y-axis "Sales" 0 --> 100
    bar [20, 35, 60, 85]

        xychart-beta
    title "Omzet per Maand"
    x-axis [jan, feb, mar, apr, mei, jun]
    y-axis "Omzet (in €)" 0 --> 12000
    bar [5000, 6000, 7500, 8200, 9500, 10500]
    line [5000, 6000, 7500, 8200, 9500, 10500]

flowchart

        ---
config:
   theme: 'base'
   themeVariables:
      primaryColor: '#DBE2EF80'
      primaryTextColor: '#000'
      primaryBorderColor: '#3F72AF80'
      lineColor: '#3F72AF80'
      secondaryColor: '#fff'
      tertiaryColor: '#ffff80'
---

flowchart TD
   A[Christmas] -->|Get money| B(Go shopping)
   B --> C{Let me think}
   C -->|One| D[fa:fa-laptop Laptop]
   C -->|Two| E[fa:fa-phone-square iPhone]
   C -->|Three| F[fa:fa-car Car]

Gannt

        ---
config:
   theme: 'base'
   themeVariables:
      primaryColor: '#DBE2EF80'
      primaryTextColor: '#000'
      primaryBorderColor: '#3F72AF80'
      lineColor: '#3F72AF80'
      secondaryColor: '#fff'
      tertiaryColor: '#ffff80'
---

gantt
 title Product Launch Plan
 dateFormat YYYY-MM-DD
 section Planning
     Market research      :done, research, 2024-03-01, 10d
     Define requirements  :done, reqs, after research, 7d
 section Build
     Design prototype     :active, proto, after reqs, 14d
     User testing         :testing, after proto, 7d
 section Launch
     Marketing campaign   :marketing, after proto, 14d
     Release day          :milestone, after testing, 0d
 section Planning
     Market research      :done, research, 2024-03-01, 10d
     Define requirements  :done, reqs, after research, 7d
 section Build
     Design prototype     :active, proto, after reqs, 14d
     User testing         :testing, after proto, 7d
 section Launch
     Marketing campaign   :marketing, after proto, 14d
     Release day          :milestone, after testing, 0d

sequenceDiagram

        ---
config:
   theme: 'base'
   themeVariables:
      primaryColor: '#DBE2EF80'
      primaryTextColor: '#000'
      primaryBorderColor: '#3F72AF80'
      lineColor: '#3F72AF80'
      secondaryColor: '#fff'
      tertiaryColor: '#ffff80'
---

sequenceDiagram
   participant Alice
   participant Bob
   Alice->>John: Hello John, how are you?
   loop HealthCheck
      John->>John: Fight against hypochondria
   end
   Note right of John: Rational thoughts <br/>prevail!
   John-->>Alice: Great!
   John->>Bob: How about you?
   Bob-->>John: Jolly good!

stateDiagram

        ---
title: PackML State Diagram to IEC 61131-3
config:
   theme: 'base'
   themeVariables:
      primaryColor: '#DBE2EF80'
      primaryTextColor: '#000'
      primaryBorderColor: '#3F72AF80'
      lineColor: '#3F72AF80'
      secondaryColor: '#fff'
      tertiaryColor: '#ffff80'
---

stateDiagram-v2
   direction LR
   classDef waitState fill:#3F72AF80,color:white,font-weight:bold
   class waitingState, Idle, Held, Suspended, Complete, Stopped, Aborted waitState

   state Operating {

   Idle --> Starting : Start

   Starting --> Execute : SC

   Execute --> Holding : Hold
   Holding --> Held : SC
   Held --> UnHolding : UnHold
   UnHolding --> Execute : SC

   Execute --> Suspending : Suspend
   Suspending --> Suspended : SC
   Suspended --> UnSuspending : UnSuspend
   UnSuspending --> Execute : SC

   Execute --> Completing : SC
   Completing --> Complete : SC
   Complete --> Resetting : Reset
   Resetting --> Idle : SC

   }

   Operating --> Stopping : Stop
   Stopping --> Stopped : SC

   Operating --> Aborting : Abort
   Aborting --> Aborted : SC
   Aborted --> Clearing : Clear
   Clearing --> Stopped : SC

   Stopped --> Resetting : Reset

   Note left of Aborting: SC = State Complete
   activeState : Active State
   waitingState : Waiting State

Nested lists

fruits

apple

banana

vegetables

carrot

broccoli

References

See Einstein et al. [EPR06] for an introduction to non-standard analysis. Non-standard analysis is fun [EPR06].

See Nelson [Nel87] for an introduction to non-standard analysis. Non-standard analysis is fun [Nel87].

See Langstraat and Nelson [LN06] for an introduction to non-standard analysis. Non-standard analysis is fun [LN06].

Role

In Python, 1 + 2 is equal to 3.

Tables

Header row, column 1 (header rows optional)	Header 2	Header 3	Header 4
body row 1, column 1	column 2	column 3	column 4
body row 2	…	…

A	B	A and B
False	False	False
True	False	False
False	True	False
True	True	True

Available languages and bible translations
Language	Bible translation
English	- English Standard Version - King James Version - New American Standard Bible 2020 - New Catholic Bible - New International Version - New King James Version - New Living Translation - New Revised Standard Version - World English Bible
Spanish (Español)	- La Biblia de las Américas - Nueva Versión Internacional - ReinaValera 1960 - ReinaValera 1995
Portuguese (Português)	- Almeida Revista e Atualizada - Almeida Revista e Corrigida - Nova Versão Internacional

Tabs

Debian

apt install rspamd

Ubuntu

apt install rspamd # ubuntu

Terms

term (up to a line of text)

Definition of the term, which must be indented

and can even consist of multiple paragraphs

next term

Description.