====== Integration in Dokuwiki ====== Die Seite www.learnj.de, auf der Sie sich gerade befinden, basiert auf der freien Software [[https://www.dokuwiki.org/dokuwiki|Dokuwiki]]. Um darin die schwarzen "Programmierkästen" der Online-IDE zu integrieren, sind folgende Schritte notwendig. ===== Ablegen der Dateien der Online-IDE ===== Fügen Sie auf oberster Ebene der Dokuwiki-Installation einen Ordner **javaonline** ein und kopieren Sie dorthinein alle Ordner (die Dateien auf der obersten Ebene werden nicht gebraucht), die sich im [[https://github.com/martin-pabst/Online-IDE/tree/master/htdocs|htdocs-Ordner der Online-IDE]] befinden. \\ Der Hauptordner der Dokuwiki-Installation sieht also so aus: {{ :integration:dokuwiki:pasted:20211202-153610.png }} Im Unterordner **javaonline** sollten sich also folgende Ordner des Online-IDE-Projekts befinden: {{ :integration:dokuwiki:pasted:20211202-153810.png }} ===== Anpassung des Template ===== Damit die Skripte der Online-IDE bei jedem Seitenaufruf geladen werden muss das Template angepasst werden. Im Standardtemplate "dokuwiki" passen Sie bitte die **Datei /lib/tpl/dokuwiki/main.php** folgendermaßen an, indem Sie darin am Ende des -tags folgendes einfügen:

===== Programmierkästen im Skript ===== Damit die Programmierkästen im Wiki erscheinen, füge ich sie einfach innerhalb des Wiki-Markup in HTML-Abschnitten ein, also bspw. so:

Damit diese HTML-Abschnitte erlaubt sind, muss vorher im Wiki unter Admin->Konfiguration im Abschnitt "Bearbeitung" das Häkchen bei "HTML erlauben" gesetzt sein: {{ :integration:dokuwiki:pasted:20211202-161514.png }} \\ \\ ===== Empfohlene Plugins ===== Folgende Plugins verwende ich für dieses Wiki: ==== imgPaste-Plugin ==== {{:integration:dokuwiki:pasted:20211202-154642.png }}

Dieses Plugin ermöglicht es, per Copy/Paste Bilder von der Zwischenablage ins Wiki einzufügen. Es beschleunigt das Erstellen von Wiki-Seiten ungemein! ==== MathJax-Plugin ==== {{:integration:dokuwiki:pasted:20211202-154858.png }}

Damit lassen sich mathematische Terme wie $\sqrt{\frac{3 + x}{x^2+2}}$ ganz einfach in [[https://de.wikipedia.org/wiki/TeX|Tex-Syntax]] einfügen. ==== Navigation-Plugin ==== {{:integration:dokuwiki:pasted:20211202-155604.png }}

Damit habe ich das Navigationsmenü auf der linken Seite erstellt. Leider ist das Plugin nicht mit dem Standard-Template von Dokuwiki kompatibel. Daher musste ich in der Datei /lib/plugins/navi/style.less noch folgendes ändern:


div.plugin__navi {
    li {
        list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFAQMAAAC3obSmAAAAA1BMVEWZmZl86KQWAAAACklEQVQI12OAAwAACgABaQY5MgAAAABJRU5ErkJggg==);
        /* all: unset */
    }

    li.open {
        list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHAQMAAAD+nMWQAAAABlBMVEUAAACZmZl+9SADAAAAAXRSTlMAQObYZgAAABNJREFUeAFj+AeENQwWDAIMQAAAHhICwcrz0MAAAAAASUVORK5CYII=);
        /* all: unset */
    }
    
    /* Martin Pabst, 28.12.2020 */
    li.close>div.li { margin-bottom: 5px }

    li.level1>div.li a {
       color: #1f981d;
       font-size: 120%;
    }
usw...