restructuredtext.rst

Example components - reStructuredText

Here is an example page containing the components of designed into this Sphinx theme. This text is part of the first header, but you should only use the first header once per page! All text on this page is written in reStructuredText (ReST).

You should see me in the sidebar in the On this page section.

Heading 2

Here is some text under Heading 2. You should see me in the sidebar in the On this page section.

Heading 3

Here is some text under Heading 3. You should see me in the sidebar in the On this page section.

Heading 4

Here is some text under Heading 4. You should see me in the sidebar in the On this page section.

Heading 5

Here is some text under Heading 5. You should see me in the sidebar in the On this page section.

Heading 6

Here is some text under Heading 6. You should see me in the sidebar in the On this page section.

Adding mathematics

To render mathematics in Sphinx, you need to have the Sphinx MathJax extension enabled. This example is taken directly from the documentation for MyST. If you write the following block of amsmath syntax_: :

.. math::
    :label: eqn_a

    \begin{gather*}
    a_1=b_1+c_1\\
    a_2=b_2+c_2-d_2+e_2
    \end{gather*}

.. math::
    :label: eqn_b

    \begin{align}
    a_{11}& =b_{11}&
    a_{12}& =b_{12}\\
    a_{21}& =b_{21}&
    a_{22}& =b_{22}+c_{22}
    \end{align}

this will be rendered as:

$$\begin{aligned} \begin{gather*} a_1=b_1+c_1\\\ a_2=b_2+c_2-d_2+e_2 \end{gather*} \end{aligned}$$

$$\begin{aligned} \begin{align} a_{11}& =b_{11}& a_{12}& =b_{12}\\\ a_{21}& =b_{21}& a_{22}& =b_{22}+c_{22} \end{align} \end{aligned}$$

Adding tables

Tables are rendered using standard ReST table styles, so this: :

+--------------------+-------------------------+
| Column 1           | Column 2                |
+====================+=========================+
| This is some data. | This is some more data. |
+--------------------+-------------------------+

becomes the following rendered output in the Sphinx documentation:

Column 1	Column 2
This is some data.	This is some more data.

Note only left-aligned columns are supported by ReST, without injecting raw HTML.

Including images

We have a GOV.UK logo image at ../_static/images/govuk-logo.png that we will use in the following example. To include the image in ReST, add the following text: :

.. image:: ../_static/images/govuk-logo.png
    :alt: GOV.UK logo
    :width: 200px

to include the image with the alt text GOV.UK logo at a set width of 200 pixels, like so:

GOV.UK Design System components

Some of the GOV.UK Design System components are incorporated into this theme .

Notification banner

To add a notification banner, add the following code to your ReST file: :

.. note:: Notification banner title

    A notification to flag some useful information to the user.

which produces:

Note

Notification banner title

A notification to flag some useful information to the user.

Warning

To add a warning, add the following code to your ReST file: :

.. warning::

    A warning.

which produces:

Warning

A warning.