Wiki2Reveal/Einbindung von Quellcode

Quellcodedarstellung in Wiki2Reveal

Im MINT-Bereich ist es oft notwendig, in OER-Lerneinheiten auch Codefragmente^[1] für die Nutzung von OpenSource-Software zu zeigen.

In diesem Tutorial wird behandelt, wie man Quellcode im MediaWiki einbinden kann und wie dieser bei der Nutzung von Wiki2Reveal über RevealJS^[2] dargestellt wird.

Einleitung

Wiki2Reveal ist ein Tool, das Wikiversity-Seiten direkt in Präsentationen umzuwandelt. Es unterstützt verschiedene Quellcode-Formate und ermöglicht es, diese in einer ansprechenden Weise darzustellen. Bei der Konvertierung direkt aus Wikiversity ist es notwendig, die Codefragement in Wikiversity zu parsen und in die entsprechende Syntax für die Codedarstellung in RevealJS zu konvertieren. Dies erfolgt automatisch bei der Darstellung der Wikiversity-Seite als RevealJS-Präsentation. Die Konvertierung übernimmt Wiki2Reveal.

Einbinden von Quellcode im MediaWiki

Um Quellcode im MediaWiki einzubinden, können Sie die <syntaxhighlight>-Markierung verwenden. Hier ist ein Beispiel:

<syntaxhighlight lang="python">
def hello_world():
    print("Hallo Welt!")
</syntaxhighlight>

Dieser Code wird im MediaWiki als Quellcode dargestellt. Dies sieht in Wikiversity dann gerendert wie folgt aus:

def hello_world():
    print("Hallo Welt!")

Das Syntaxhighlighting färbt spezifische Codeelemente ein, um die Lesbarkeit zu verbessern.

Darstellung in RevealJS

Wenn Sie sich den Quellcode zu Wiki2Reveal ansehen möchten, können Sie das Wiki2Reveal-Repository^[3] herunterladen und die Datei "docs/index.html" lokal in Ihrem Browser starten. Die zugehörigen Javascript-Dateien liegen wie gewohnt in dem Verzeichnis "docs/js"

Beispiel

Hier ist ein Beispiel für eine Wiki-Seite, die Quellcode enthält:

== Beispiel ==
<syntaxhighlight lang="python">
def hello_world():
    print("Hallo Welt!")
</syntaxhighlight>

Wenn Sie diese Seite mit Wiki2Reveal in eine Präsentation umwandeln, wird der Quellcode in RevealJS^[4] dargestellt.

Fazit

In diesem Tutorial haben wir Ihnen gezeigt, wie Sie Quellcode im MediaWiki einbinden und wie dieser in RevealJS dargestellt wird. Durch die Verwendung von Wiki2Reveal können Sie Ihre Wiki-Seiten in ansprechende Präsentationen umwandeln.

Weiterführende Informationen

Wiki2Reveal-GitHub-Repository: https://www.github.com/niebert/Wiki2Reveal
MediaWiki-Dokumentation: https://www.mediawiki.org/wiki/Help:Syntaxhighlighting
RevealJS-Dokumentation: https://revealjs.com/

Quellennachweis

↑ ^a ^b Hakim El Hattab (2022) RevealJS - Demo presentation - Slide 13 - Display Javascript Source Code - URL: https://niebert.github.io/Wiki2Reveal/reveal/demo.html#/6
↑ Hakim El Hattab (2025) RevealJS - GitHub-URL: https://github.com/hakimel/reveal.js/ (Zugriff: 2025/12/05)
↑ Bert Niehaus (2022) Package-ZIP: https://github.com/niebert/Wiki2Reveal/archive/master.zip (2022)
↑ Hakim El Hattab (2022) RevealJS - Demo presentation - Slide 6 - Display Markdown Source Code on RevealJS Slide - URL: https://niebert.github.io/Wiki2Reveal/reveal/demo.html#/6

Siehe auch

Wiki2Reveal

[slide13-1] Hakim El Hattab (2022) RevealJS - Demo presentation - Slide 13 - Display Javascript Source Code - URL: https://niebert.github.io/Wiki2Reveal/reveal/demo.html#/6

[2] Hakim El Hattab (2025) RevealJS - GitHub-URL: https://github.com/hakimel/reveal.js/ (Zugriff: 2025/12/05)

[3] Bert Niehaus (2022) Package-ZIP: https://github.com/niebert/Wiki2Reveal/archive/master.zip (2022)

[4] Hakim El Hattab (2022) RevealJS - Demo presentation - Slide 6 - Display Markdown Source Code on RevealJS Slide - URL: https://niebert.github.io/Wiki2Reveal/reveal/demo.html#/6

[1]

[2]

[3]

[4]