Mobilesteuerung: Blättern oben links oder rechts
Fulllscreen Mode oben mitte.
Tastensteuerung: Blättern: '→←↑↓';
Farbe Modus: 'm'
Anzeige abschalten (blank): 'b'
Virtuel Pointer ein/aus (laser): 'l'
Zeichengröße an Höhe anpassen: 'w'
Touchbedienung erlauben/verbieten: 'v'
Steuerelemente: Anzeige ein/ausschalten: unten recht
Seite Schnellwahl (ein/aus): 'g'
A B M • ↓ W

Mslide Beispiele

Jean-Jacques Sarton

Die Beispiele

Die Leistungsfähigkeit von HTML unter Einsatz von Markdown und ein CSS Code wird hier demonstriert.wenig.

Syntax unsere Dateien <NAME>.md

Titeln, Listen, Paragrafen, …

Titeln

# Titel Ebene 1

## Titel Ebene 2
...
###### Titel Ebene 6

Listen

* Element 1
* Element 2
   * Sub-element 2.1
   * Sub-element 2.2
* Element 3

Block

> block Text,
> Weiterführung des Textes.
>
> Immer noch teil des Blockes, 2. Paragraf.

block Text, Weiterführung des Textes.

Immer noch teil des Blockes, 2. Paragraf.

Paragraf

Text, Paragraph 1,
selber Paragraf.

Ein weitere Paragraf.

Text, Paragraph 1, selber Paragraf.

Ein weitere Paragraf

Zentrierte Bild

![Image title](image.jpg)

Änderung des Aussehen

{.classe1}
{.classe1 .classeN}

Klassen können einige Elementen zugewiesen werden.

Diese Elementen sind Title. Verweise, Bilder und schließlich das Div Element, Unter Pandoc “:::” oder Code Block (“```” oder “~~~”).

Selbstverständlich muss das entsprechende Code in der CSS Dateien vorhanden sein.

.incremental    for lists
.nonincremental for lists
.nl             supress list bullet, ...
.numberLines    for code block (```** or ~~~)
.col2           for div ::: with  2 columns
.col2p          for div (:::) containing paragraphs with 2 columns
.vis            display a ":::" block for your presentation
.noDoc          don't output this to documentation
.DocOnly        only for documentation
.sectiontitle   allow to display a title as for the first presentation page.
                this page will not appear on the documentation
.border         display a border for the (``` or ~~~) element
.invis          don't display slide title
.h10 .h15 .h20  adjust the height of pictures. 
... .h75 .h80

Beispiel sichtbare Multi-spalten Paragraf

:::{.vis .col2p}
La Lunea, dite aussi Terre ...
:::

La Lunea, dite aussi Terre, est l’unique satellite naturel permanent de la planète Terre. Il s’agit du cinquième plus grand satellite naturel du Système solaire, et du plus grand des satellites planétaires par rapport à la taille de la planète autour de laquelle il orbite. Elle est le deuxième satellite le plus dense du Système solaire après Io, un satellite de Jupiter.

.vis stellt sicher, dass es auf den Folien sichtbar ist.

Beispiel unsichtbaren Multi-spalten Paragraf

:::{.col2p}
La Lunea, dite aussi Terre ...
:::

La Lunea, dite aussi Terre, est l’unique satellite naturel permanent de la planète Terre. Il s’agit du cinquième plus grand satellite naturel du Système solaire, et du plus grand des satellites planétaires par rapport à la taille de la planète autour de laquelle il orbite. Elle est le deuxième satellite le plus dense du Système solaire après Io, un satellite de Jupiter.

Dies erscheint nur in den Dokumentationsdateien.

Beispiel 2 Bilder

:::{.col2 .h40}
![Circle](./circle.png){alt="Ein Kreis"}

![Spiral](./spiral.png){alt="Eine Spirale"}
:::
Ein Kreis
Circle
Eine Spirale
Spiral

Die Leerzeile zwischen beie Bilderdeklaration ist wichtig!

Beispiel 2 Bilder in ein Paragraf

:::{.col2p .vis .h40}
![Circle](./circle.png)
![Spiral](./spiral.png)
:::

Circle Spiral

Die Bilderunterschriften werden nicht angezeigt!

Dies sollte vermieden werden, einige Brwoser und Weasyprint kommen nicht damit klar!.

Unsichtbare Titel

## Unsichtbare Titel {.invis}

Unsichtbare Titel

Unsichtbare Titel

Vorhergehende Folie hat kein Inhalt, es wird ein leere Blatt angezeigt. Diese Folie beinhaltet nur dieser Text (unsichtbare Titel).

Paragraf

This is a paragraph,
and the continuation.

A new paragraph.

This is a paragraph, and the continuation.

A new paragraph.

Dies wird nicht auf der Folien angezeit, dafür in der Dokumentationsdateien.

Folie mit zentrierten Titel

## Folie mit zentrierten Titel {.titlesection .noDoc}

Diese Seite wird als Vortragsseite angezeigt, jedoch nicht in der Dokumentation (class .noDoc).

Beispiel Folie mit zentrierten Titel

Eigene CSS

html[mode=dark] body {
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("./DSC00109.JPG");
    background-position: bottom left;
    min-height: 100vh; font-weight: bold;
}
html[mode=dark] *, html[mode=dark] h1.titlesection, html[mode=dark] h1.title {
    text-shadow: .05em .05em .1em var(--h1-shadow);
    background-color: transparent!important;
}
html[mode=dark] *, html[mode=dark] pre, html[mode=dark] pre code {
    color: #ffffff;
    background-color: transparent!important;
}
html[mode=dark] pre code span,html[mode=dark] pre code, html[mode=dark] li, html[mode=dark] p {
    text-shadow: .07em 0 0 var(--background), 0 .07em 0 var(--background),
                -.07em 0 0 var(--background), 0 -.07em 0 var(--background);
}
html[mode=dark] div.sourceCode {
    background-color: var(--pre-bg);
}

Die CSS Datei ist im Verzeichnis des Vortrages erzeugt und wurde im Build-Script eingefügt. Damit wurde einiges geändert.

Danke