Übungen mit reStructuredText schreiben

Hochschule:Hochschule Augsburg, Fakultät für Informatik (Prof. Högl)
Datum: 21. Oktober 2018
Gruppe:5
Übungsblatt:1
Gruppenmitglieder:
 
Maria Muster, #11111, INF3, <Maria.Muster@hs-augsburg.de>
Max Muster, #12345, INF3, <Max.Muster@hs-augsburg.de>

Inhalt

1   reStructuredText

Sie betrachten gerade die Datei uebungen-mit-rst.html. Diese Datei wird durch das Programm rst2html aus dem Text uebungen-mit-rst.rst erzeugt.Diesen Text kann man mit jedem beliebigen Programmier-Editor schreiben. Die Dateiendung ist .rst, was für reStructuredText steht. Sie sollten sich gleich die .rst Datei ansehen und mit der HTML Ausgabe vergleichen.

Die HTML Datei erzeugen Sie mit dem rst2html Kommando im einfachsten Fall so:

rst2html --language=de uebungen-mit-rst.rst uebungen-mit-rst.html

Wenn man syntax highlighting haben möchte, muss man noch ein Stylesheet auf der Kommandozeile mitgeben (das ist eine lange Kommandozeile, der backslash dient nur zum Umbrechen der Zeilen zur besseren Lesbarkeit):

rst2html.py --generator --source-link --language=de \
--stylesheet=hsa-rest-style.css --syntax-highlight=short \
uebungen-mit-rst.rst uebungen-mit-rst.html

Mehr zum Highlighting ist im Abschnitt Syntax Highlighting.

Es kann zu Fehlermeldungen kommen, die in der Ausgabedatei angezeigt werden. In HTML sieht so eine Fehlermeldung z.B. so aus:

rst-error.jpg

Eine Fehlermeldung beim Umwandeln von .rst nach .html.

Kontrollieren Sie also immer, ob die Ausgabe frei von Fehlern ist.

Mit rst2html --help bekommt man alle Kommandozeilenoptionen von rst2html.

Das Stylesheet finden Sie hier zum Download:

http://hhoegl.informatik.hs-augsburg.de/hhweb/etc/hsa-rest-style.css

Das rst2html Programm ist in dem Python Paket docutils enthalten, Sie finden das Paket im Python Package Index, man kann es mit dem pip Paketmanager installieren. Das Programm ist auch im Paketmanager der Linux Distribution verfügbar, dort heisst es meistens python-docutils (Python 2) oder python2-docutils (Python 3).

Sie ahnen sicher schon, dass es auch noch andere Zielformate als HTML gibt, folglich müsste es noch ein paar andere rst2... Programme geben (bitte selber herausfinden).

Die einfachsten Formatanweisungen finden Sie in der Quickref.

Die Homepage für ReST im Internet ist

http://docutils.sourceforge.net/rst.html

Restructured Text wurde im Rahmen der Programmiersprache Python entwickelt. Das Format wurde zu Beginn der 2000er Jahre entwickelt, um die gesamte Dokumentation des Python Projekt (auch der Docstrings in Python-Quelltexten) in einer einheitlichen Markup-Syntax zu erstellen.

Restructured Text bildet die Basis für das aufwendige Sphinx Dokumentationswerkzeug, siehe http://www.sphinx-doc.org. In Sphinx gibt es noch viele weitere Formatanweisungen. Wie man einen Bericht mit Sphinx schreibt, habe ich hier zusammengefasst:

http://hhoegl.informatik.hs-augsburg.de/dva/sphinxbericht

2   Tipps zum Editieren einer .rst Datei

3   Einige Formatierbefehle

Wenn man diesen Text im HTML Format anschaut, dann sieht man am Ende einen Link "View document source". Wenn man draufklickt sieht man den Text im .rst Rohformat (das macht die Option --source-link beim Aufrufen von rst2html).

3.1   Überschriften

Die Überschriften sind so geordnet:

=========
Ganz oben
=========


Erste Ebene   (das gibt 1.)
===========

Zweite Ebene  (das gibt 1.1)
------------

Dritte Ebene  (das gibt 1.1.1)
````````````

Vierte Ebene  (das gibt 1.1.1.1)
............

Wichtig ist, dass die Länge der Unterstreichung mindestens so lang ist wie der Unterschriftentext. So eine Überschrift führt also sofort zu einer Warnung:

Dritte Ebene
`````````

In diesem Abschnitt habe ich eine dritte und vierte Ebene angelegt zum Test.

3.1.1   Dritte Ebene

(nur zum Test)

3.1.1.1   Vierte Ebene

(nur zum Test)

3.2   Textstile

Die wichtigsten Textstile sind kursiv, fett und verbatim. Man schreibt sie *kursiv*, **fett** und ``verbatim``.

3.3   Kommentare

Einen Kommentar macht man so:

.. Das ist nun ein Kommentar,
   den man in der Ausgabedatei
   nicht sieht.

3.4   Aufzählungspunkte

Eine Liste von "Items" macht man so:

  • Punkt 1
  • Punkt 2
  • Punkt 3

Eine Aufzählung

  1. Äpfel
  2. Birnen
  3. Orangen

Der Rohtext lautet:

1. Äpfel
2. Birnen
3. Orangen

oder kurz

  1. Äpfel
  2. Birnen
  3. Orangen

Der Rohtext lautet:

1. Äpfel
#. Birnen
#. Orangen

Wichtig ist bei den Aufzählungen die richtige Einrücktiefe. So klappt es z.B. nicht:

1. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor
incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi
consequat...

#. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor
incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi
consequat...

Es muss statt dessen so geschrieben werden:

1. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor
   incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
   nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi
   consequat...

#. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor
   incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
   nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi
   consequat...

Wenn man bei einem Item-Punkt weitere Item-Unterpunkte anführen möchte, muss man schreiben:

1. Äpfel

   - Gelbe Äpfel
   - Rote Äpfel
   - Grüne Äpfel

#. Birnen
#. Orangen

Wichtig ist auch, dass man vor den Item-Punkten eine Leerzeile einfügt. Wenn man das nicht macht, dann sieht die Ausgabe so aus:

  1. Äpfel - Gelbe Äpfel - Rote Äpfel - Grüne Äpfel

Die Eingabe dazu war:

1. Äpfel
   - Gelbe Äpfel
   - Rote Äpfel
   - Grüne Äpfel

3.5   Verbatim-Text

Häufig müssen Sie in der Informatik Textabschnitte 1:1 ohne Formatierung wiedergeben, man nennt diese Abschnitte auch verbatim text bzw. literal text. Im einfachsten Fall schreiben Sie das in reST so (die Leerzeile nach :: ist wichtig!):

::

  Zeile 1
  Zeile 2
  Zeile 3

Die Ausgabe ist:

Zeile 1
Zeile 2
Zeile 3

Falls der Verbatim-Block in einer bestimmten Programmiersprache verfasst ist, wählen Sie folgende Formatierung:

.. code:: c

   int main()
   {
       printf("Hallo Leute!\n");
       return 0;
   }

Die Ausgabe ist:

int main()
{
    printf("Hallo Leute!\n");
    return 0;
}

Statt dem kleinen c (Sprache C) können Sie viele weitere Sprachen wählen, z.B. python, asm, shell und java, eine Liste ist hier: http://pygments.org/languages/.

Python:

import matplotlib.pyplot as plt
import matplotlib as mpl
import numpy as np

x = np.linspace(0, 40, 100)
plt.plot(x, np.sin(x))
plt.show()

GNU Assembler (gas):

 5 add_one:           # Funktion add_one
 6    pushl   %ebp
 7    movl    %esp, %ebp
 8    subl    $4, %esp
 9    movl    8(%ebp), %eax
10    addl    $1, %eax
11    movl    %eax, -4(%ebp)
12    movl    %ebp, %esp
13    popl    %ebp
14    ret

Shell:

# if running bash
if [ -n "$BASH_VERSION" ]; then
  # include .bashrc if it exists
  if [ -f "$HOME/.bashrc" ]; then
      . "$HOME/.bashrc"
  fi
fi

export PATH=$PATH:/opt/Python-3.7.0/bin/
export PATH=/opt/gcc-arm-none-eabi-7-2018-q2-update/bin:$PATH
export PATH=/snap/bin:$PATH

Konsole:

rst2html.py --generator --source-link --language=de  uebungen-mit-rst.rst uebungen-mit-rst.html

Bilder kann man auch einfach einbinden. Die Formatierung lautet

.. figure:: hsa-logo.jpg
   :scale: 30%
   :target: http://www.hs-augsburg.de
   :align: center

   Das HS-A Logo. Durch Klicken auf das Bild gelangt
   man zur Website.

Die Ausgabe ist:

hsa-logo.jpg

Das HS-A Logo. Durch Klicken auf das Bild gelangt man zur Website.

Man kann auch zwei Bilder nebeneinander setzen:

f1 f1

Das kann man mit folgendem Rohtext erzielen:

.. class:: center

   |f1| |f1|

 .. |f1| image:: frog.jpg

Powered by Python Logo (man kann auf das Logo klicken). Die nötigen Definitionen dazu sind hier:

.. |Python| image:: python-snake.png
   :alt: Python Logo
   :align: middle
   :class: borderless
   :width: 193
   :height: 32

.. _Python: http://www.python.org

3.6   Fussnoten

Fussnoten [1] kann man auch schreiben.

3.7   Tabellen

Die folgenden Beispiele habe ich aus den "reStructuredText Directives" entnommen:

http://docutils.sourceforge.net/docs/ref/rst/directives.html

Das erste Beispiel ist eine "CSV Tabelle":

Frozen Delights!
Treat Quantity Description
Albatross 2.99 On a stick!
Crunchy Frog 1.49 If we took the bones out, it wouldn't be crunchy, now would it?
Gannet Ripple 1.99 On a stick!

Der Rohtext sieht so aus:

.. csv-table:: Frozen Delights!
   :header: "Treat", "Quantity", "Description"
   :widths: 15, 10, 30

   "Albatross", 2.99, "On a stick!"
   "Crunchy Frog", 1.49, "If we took the bones out, it wouldn't be
   crunchy, now would it?"
   "Gannet Ripple", 1.99, "On a stick!"

Das zweite Beispiel ist eine "List-Table", sie sieht im Ergebnis genau so aus wie die erste Tabelle, besteht jedoch aus verschachtelten Aufzählungspunkten:

Frozen Delights!
Treat Quantity Description
Albatross 2.99 On a stick!
Crunchy Frog 1.49 If we took the bones out, it wouldn't be crunchy, now would it?
Gannet Ripple 1.99 On a stick!

Der Rohtext dazu sieht so aus:

.. list-table:: Frozen Delights!
   :widths: 15 10 30
   :header-rows: 1

   * - Treat
     - Quantity
     - Description
   * - Albatross
     - 2.99
     - On a stick!
   * - Crunchy Frog
     - 1.49
     - If we took the bones out, it wouldn't be
       crunchy, now would it?
   * - Gannet Ripple
     - 1.99
     - On a stick!

3.8   Inhaltsverzeichnis

Möchte man ein Inhaltsverzeichnis haben (wie in dieser Datei am Anfang), verwendet man die beiden Zeilen

.. contents:: Inhalt
.. sectnum::
[1]Das ist die Fussnote.

3.9   Boxen

Es gibt eine Reihe von gerahmten Ausgaben, die im Englischen als admonitions bezeichnet werden. Folgende Typen werden unterschieden: "attention", "caution", "danger", "error", "hint", "important", "note", "tip", "warning", "admonition".

Wenn man die --language=de Option bei rst2html gibt, werden die Typen ins Deutsche übersetzt.

Aus dem Rohtext ...

.. hint::
   Dieser Text dient als "Schnellstarter" zum Schreiben von Lösungen für
   die Übungsaufgaben in meinen Fächern.

   Viele Grüsse,

   Hubert Högl (<Hubert.Hoegl@hs-augsburg.de>)

... wird dann diese Ausgabe:

Hinweis

Dieser Text dient als "Schnellstarter" zum Schreiben von Lösungen für die Übungsaufgaben in meinen Fächern.

Viele Grüsse,

Hubert Högl (<Hubert.Hoegl@hs-augsburg.de>)

3.10   Formeln

Formeln schreibt man wie in Latex:

.. math::

    A \Longrightarrow B

    E = m \cdot c^{2}

    \frac{2 \pm \sqrt{7}}{3}

    α_t(i) = P(O_1, O_2, … O_t, q_t = S_i λ)

Hier ist die Ausgabe:

AB
E = mc2
((7))/(3)
αt(i) = P(O1, O2, …Ot, qt = Siλ)

Es funktioniert auch innerhalb einer Zeile: ψ(r) = exp( − 2r), (x2 − 1), (1)/(2), (1)/(2)n

4   Syntax Highlighting

Das Syntax Highlighting wird durch das pygments Python-Paket gemacht. Es gibt verschiedene Lexer (Sprachen), Formatierer (Ausgabeformate) und Highlighting-Stile, die mit pygmentize -L angezeigt werden. Die Highlighting-Stile alleine werden mit pygmentize -L styles ausgegeben.

Prinzipiell funktioniert es so, dass man mit pygmentize die CSS Datei mit dem gewünschten Stil (in dem Beispiel der Stil colorful) erzeugt:

pygmentize -S colorful -f html -a pre.code > pygments.css

In das Stylesheet hsa-rest-style.css, das ich eingangs erwähnt habe, sind einige nützliche CSS Einstellungen zusammenkopiert, unter anderem das Standard-CSS, das pygments.css und ein paar weitere Einstellungen. In [4] kann man nachlesen, was man im Detail alles machen muss. Es funktioniert übrigens auch, wenn man Code-Schnipsel in einen Satz schreibt, wie z.B. hier: print("Hello World").

Mit der Option

pygmentize -H formatter html

bekommt man genauere Informationen zum html-Formatierer.

Literatur:

[1] https://pypi.org/project/Pygments

[2] http://docutils.sourceforge.net/sandbox/stylesheets

[3] http://docutils.sourceforge.net/docs/howto/html-stylesheets.html

[4] http://www.futurile.net/2015/08/07/writing-highlighting-code-restructured-text

[5] Cheatsheet: https://github.com/ralsina/rst-cheatsheet

6   Kontakt

Hinweise und Verbesserungen zu diesem Text schicken Sie bitte an <Hubert.Hoegl@hs-augsburg.de>.