Quellcode nach HTML konvertieren
Problemstellung:
Quellcode in meiner Homepage sieht anders aus, als anderer Text. Er liegt dort in Form einer HTML-Tabelle mit 2 Spalten und n Zeilen vor. Zudem ist die Schriftart Courier New. Neuer Quellcode ist grün hinterlegt, damit er sich vom bestehenden Quellcode abhebt.
Die Konvertierung in eine HTML-Tabelle ist zeitraubend und fehleranfällig.
Lösung:
Das Python-Programm "quellcode_nach_html.py" hat die Aufgabe,
- zeilenweise den Inhalt einer csv-Datei einzulesen
- jede Zeile als HTML-Tabelle umzuwandeln und
- das Ergebnis in eine HTML-Datei zu schreiben.
- Ergänzend werden die Tags
<table class="coding">und<tbody>vorangestellt - bzw.
</tbody>und</table>an das Ende geschrieben
Ohne Anpassungen erwartet das Programm die Datei "ein.csv" im gleichen Ordner vorzufinden, wie auch der auszuführende Programmcode, ein Beispiel ist ebenfalls im Downloadordner enthalten. Die Datei "out.html" wird erzeugt, falls sie nicht existieren sollte.
Die Anweisungtable class="coding"ist in der css-Datei unter anderem mit den Parameternfont-family: "Courier New", monospace;undwhite-space: pre;hinterlegt, das sorgt dafür, dass auch Leerzeichen angezeigt und nicht abgeschnitten werden. Wichtig für die korrekte Darstellung der Verschachtelungen in Python.
Vorgehen:
- Datei "ein.csv" mit einem Tabellenkalkulationsprogramm öffnen (nicht mit dem Text-Editor!)
- Den zu transformierenden Quellcode in die zweite Spalte einfügen
- Soll die Zeile mit neuem Code farblich hervorgehoben werden, muss in der ersten Spalte ein "c" stehen
- Das muss für jede Zeile separat entschieden werden
- Sobald alles okay ist, Datei als "ein.csv" speichern – nicht in das Format des Tabellenkalkulationsprogramms(!)
Wechsel in den Python-Editor in das Programm "quellcode_nach_html.py"
Achtung: Aktuell ist der Code für das Beispiel hinterlegt. Das heißt, der Start der Zeilennummerierung beginnt mit der Nummer 55. Den Wert in Zeil 4 des Programms mit dem neuen Startwert überschreiben!
- Nach der Änderung das Programm laufen lassen
- Im gleichen Ordner liegt dann die Datei "out.html"
- Diese mit einem Texteditor öffnen, alles markieren, kopieren und im HTML-Dokument einfügen
- Fertig 😉
Bilder und Erklärungen zum Beispiel in der zip-Datei:
Ausschnitt aus dem Quellcode in "ein.csv":
In der Python-Datei "quellcode_nach_html.py" ist die Startpositionierung bei Zeilennummer 55:
Nach Lauf des Python-Programms, ist der Inhalt der Datei "out.html":
Kopieren und in die eigene Homepage integrieren:
| 55 | … |
| 56 | ################################################### |
| 57 | # Definition der Funktionen |
| 58 | ################################################### |
| 59 | |
| 60 | def futter_vorbereiten(): |
| 61 | #print('in futter_vorbereiten') |
| 62 | e_x = 0 |
| 63 | e_y = 0 |
| 64 | for i in range (0, int(BREITE/quadrat_seite)): |
| 65 | liste_essen_x.append(e_x) |
| 66 | e_x += quadrat_seite |
| 67 | #print('liste_essen_x = ', liste_essen_x) |
| 68 | for i in range (0, int(HOEHE/quadrat_seite)): |
| 69 | liste_essen_y.append(e_y) |
| 70 | e_y += quadrat_seite |
| 71 | #print('liste_essen_y = ', liste_essen_y) |
| 72 | |
| 73 | |
| 74 | def fenster_definieren(): |
| 75 | #print('in fenster_definieren') |
| 76 | pygame.init() |
| 77 | f = pygame.display.set_mode((BREITE,HOEHE)) |
| 78 | pygame.display.set_caption('Snake – das Schlangenspiel') |
| 79 | return f |
| 80 | … |