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
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:
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
Man sollte die Zeilenbreite auf maximal 79 Zeichen stellen, so dass Absätze umgebrochen werden. Viele schreiben einen Absatz als eine einzige lange Zeile.
Ein schlechtes Beispiel:
Worin unterscheiden sich Programmiersprachen die sich zur maschinennahen (= systemnahen) Programmierung eignen von Sprachen, die man "high-level" Sprachen nennt?
Besser:
Worin unterscheiden sich Programmiersprachen die sich zur maschinennahen (= systemnahen) Programmierung eignen von Sprachen, die man "high-level" Sprachen nennt?
Gute Editoren kann man einstellen, so dass sie den Umbruch der Zeilen bei der Eingabe automatisch erledigen, ohne dass man die Eingabetaste drücken muss. Beim Vim gibt man z.B. ein:
set textwidth=79
Vim kann auch einen markierten Block in Zeilen umbrechen, dazu verwendet man das Kommando gq (in Vim :help gq eingeben).
Die 79 bzw. 80 Zeichen je Zeile stammen ursprünglich von den alten Text-Terminals. Aktuell macht diese Beschränkung aber auch noch Sinn, weil z.B. Blinde am Rechner über eine Blindenschrift-Zeile an der Tastatur ("Braille-Zeilen") die Zeilen erfühlen. Diese speziellen Zeilen haben auch meist 80 Zeichen. Somit trägt die Einhaltung der Zeilenlänge wesentlich Barrierefreiheit bei.
Gute Editoren haben einen .rst Modus. Das folgende Bild zeigt den Vim Editor beim Editieren dieser Datei:
Man sieht, dass bereits der Rohtext im Editor sehr gut zu lesen ist.
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).
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.
Die wichtigsten Textstile sind kursiv, fett und verbatim. Man schreibt sie *kursiv*, **fett** und ``verbatim``.
Einen Kommentar macht man so:
.. Das ist nun ein Kommentar, den man in der Ausgabedatei nicht sieht.
Eine Liste von "Items" macht man so:
Eine Aufzählung
Der Rohtext lautet:
1. Äpfel 2. Birnen 3. Orangen
oder kurz
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:
Die Eingabe dazu war:
1. Äpfel - Gelbe Äpfel - Rote Äpfel - Grüne Äpfel
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:
Man kann auch zwei Bilder nebeneinander setzen:
Das kann man mit folgendem Rohtext erzielen:
.. class:: center |f1| |f1| .. |f1| image:: frog.jpg
Powered by (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
Fussnoten [1] kann man auch schreiben.
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":
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:
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!
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. |
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>)
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:
Es funktioniert auch innerhalb einer Zeile: ψ(r) = exp( − 2r), √(x2 − 1), (1)/(2), ⎛⎝(1)/(2)⎞⎠n
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
Hinweise und Verbesserungen zu diesem Text schicken Sie bitte an <Hubert.Hoegl@hs-augsburg.de>.