[Achtung, nicht alle Objekte auf dieser Seite sind im Sinne des https-Protokolls von sicheren Quellen.]
Wenn man in einem WordPress-Web Programmkode beschreiben möchte, stehen einige Möglichkeiten zur Verfügung. Nehmen wir als Beispiel den Kode einer Html-Seite, die den Text “Hello Word” anzeigt.
Verwendung von <pre>...</pre>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Begrüßung</title>
</head>
<body>
Hello World!
</body>
</html>
Diese grundsätzliche Darstellung funktioniert allein durch die Formatierung mit dem Format “Vorformatiert”.
Plugin “SyntaxHighlighter Evolved”
[code lang=”html”]
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Begrüßung</title>
</head>
<body>
Hello World!
</body>
</html>
[/code]
Bedeutend anschaulicher ist, wenn man den Kode durch Farben auszeichnet. Man muss dazu das Plugin “SyntaxHighlighter Evolved” installieren. Es erfordert zunächst kein Veränderung der Einstellungen. Der Code wird zwischen die Zeilen
[code lang="html"] ... [/code]
eingefügt.
Diese beiden Versionen der Kode-Darstellung haben aber einen großen Nachteil: Sollte sich der Kode nach der Dokumentation wegen einer Fehlerkorrektur ändern, muss man auch die Dokumentation verändern. Wenn wir den Kode aber als Datei laden, ist es möglich, den Kode direkt in der WordPress-Seite in einem iframe einzubetten und – sofern es ein Kode ist, der auch etwas ausgibt, in einem weiteren Frame darstellen.
Kode in iframe einbetten
| Kode | Ausführung |
<iframe src="/relay.aspx ?s=s&target=buero.clubcomputer.at/helloworld.html"></iframe> |
<iframe src="buero.clubcomputer.at/helloworld.html"></iframe> |
Das Syntaxhighlighting ist eine schöne Spielweise für Designer, kann man doch die Farbgebung vielfach anpassen. Es gibt dazu den zusätzlichen Parameter t (für Thema) den man auf einen von 6 möglichen Werte setzen kann. Hier die Beispiele dazu:
| default | django |
| eclipse | emacs |
| fadetogrey | mdultra |
| midnight | rdark |
Links
- SyntaxHighlighter von Alex Gorbachev on Github
- Integration
http://alexgorbatchev.com/SyntaxHighlighter/integration.html
Franz Fiala
Letzte Artikel von Franz Fiala (Alle anzeigen)
- Neue Folgen im Physik-Universum - 18. Dezember 2023
- Große Dateien in WordPress - 17. Dezember 2023
- Wien-Panorama - 16. Dezember 2023
franzi,
schau da vim an. tags hervorheben und syntax highlighting
ist da standard….und was weiss ich noch.
aber vim, oder gvim für windows kann schon was….
lg günter
Es geht hier um die Dokumentation des Kodes auf einer Webseite.
Der vim zeigt das schön an aber um das im Web sichtbar zu machen, muss man ein Bild einfügen und das ist nur wenig dynamisch.
Die Technik hier bettet den Original-Kode ein, d.h. wenn sich der Kode aus irgendeinem Grund ändert, ist die Dokumentation immer auch aktuell ohne dass man daran etwas ändern muss.