HTML und Markdown¶
Diverse Formatierungen mit HTML und Markdown
Beispiele mit Ansicht und Markdown
(durch extension - attr_list und - md_in_html
möglich)
Test mit Kommentaren¶
Content Tab¶
Block mit 2 Spalten¶
mit extension `- pymdownx.blocks.html``
Spalten lassen sich mit div[style="float: left; width: 45%; margin-right: 5%;"]in der Breite und beim Abstand anpassen…
Markdown Formatierung innerhalb der Spalten ist möglich.
Allerdings kein Umbruch auf kleinen Dispays…?
Version 1¶
Hier steht der Inhalt der linken Spalte. Sie können hier ganz normal Text, Bilder oder Listen einfügen.
Linke Spalte¶
Markdown Formatierung ist hier möglich
Hier steht der Inhalt der rechten Spalte. Abstand auf 5% mit margin-right (CSS Style) leider kein Umbruch bei kleinen Displays
Rechte Spalte¶
Markdown Formatierung ist hier möglich
/// html | div[style="float: left; width: 45%; margin-right: 5%;"]
Hier steht der Inhalt der **linken** Spalte. Sie können hier ganz normal Text, Bilder oder Listen einfügen.
#### Linke Spalte
***Markdown*** *Formatierung* ist hier **möglich**
///
/// html | div[style="float: left; width: 45%;"]
Hier steht der Inhalt der **rechten** Spalte.
Abstand auf 5% mit margin-right (CSS Style)
#### Rechte Spalte
***Markdown*** *Formatierung* ist hier **möglich**
///
/// html | div[style="clear: both;"]
///
Version 2¶
[markdown here]
Linke Spalte¶
Markdown Formatierung ist hier möglich Bild mit width=100 und align=left
Abstand noch über CSS style definieren?
/// html | div[style='float: left; width: 45%; margin-right: 5%;']
[markdown here]
#### Linke Spalte
{ width=100 align=left }
***Markdown*** *Formatierung* ist hier **möglich**
Bild mit width=100 und align=left
Abstand noch über CSS style definieren?
///
/// html | div[style='float: right; width: 45%; margin-right: 5%;']
[markdown here]
#### Rechte Spalte
{ width=200 }
***Markdown*** *Formatierung* ist hier **möglich**
///
/// html | div[style='clear: both;']
///
Version 2 - angepasst - entspricht jetzt Version 1…
Grid¶
Test mit “grid” class und markdown
funktioniert mit <div class="grid" markdown="1">
(in jedem <div> muss markdown="1" eingefügt werden)
Vorteil: wird auf kleinen Displays umgebrochen
<div class="grid" markdown="1">
<div markdown="1"> <!-- Spalte 1 -->
<h3>Linke Spalte</h3>
***Markdown*** *Formatierung* ist hier **möglich**
Inhalt **hier...**
</div>
<div markdown="1"> <!-- Spalte 2 -->
### Rechte Spalte
***Markdown*** *Formatierung* ist hier **möglich**
Inhalt **hier...**
</div>
</div>
Grid mit Blocks¶
Version mit Blocks und Markdown zwischen div
- Sed sagittis eleifend rutrum
- Donec vitae suscipit est
- Nulla tempor lobortis orci
- Sed sagittis eleifend rutrum
- Donec vitae suscipit est
- Nulla tempor lobortis orci
<div class="grid" markdown>
=== "Unordered list"
* Sed sagittis eleifend rutrum
* Donec vitae suscipit est
* Nulla tempor lobortis orci
=== "Ordered list"
1. Sed sagittis eleifend rutrum
2. Donec vitae suscipit est
3. Nulla tempor lobortis orci
``` title="Content tabs"
=== "Unordered list"
* Sed sagittis eleifend rutrum
* Donec vitae suscipit est
* Nulla tempor lobortis orci
=== "Ordered list"
1. Sed sagittis eleifend rutrum
2. Donec vitae suscipit est
3. Nulla tempor lobortis orci
```
</div>
Grid Cards¶
Test mit <div class="grid cards" markdown>
-
Set up in 5 minutes
Installmkdocs-materialwithpipand get up and running in minutes -
It’s just Markdown
Focus on your content and generate a responsive and searchable static site -
Made to measure
Change the colors, fonts, language, icons, logo and more with a few lines
-
Open Source, MIT
Material for MkDocs is licensed under MIT and available on [GitHub]
<div class="grid cards" markdown>
- :material-clock-fast:{ .lg .middle } __Set up in 5 minutes__
---
{: style="width:350px"}<br>
Install [`mkdocs-material`](#) with [`pip`](#) and get up
and running in minutes
[:octicons-arrow-right-24: Getting started](#)
- :fontawesome-brands-markdown:{ .lg .middle } __It's just Markdown__
---
{: style="width:350px"}<br>
Focus on your content and generate a responsive and searchable static site
[:octicons-arrow-right-24: Reference](#)
- :material-format-font:{ .lg .middle } __Made to measure__
---
Change the colors, fonts, language, icons, logo and more with a few lines
[:octicons-arrow-right-24: Customization](#)
- :material-scale-balance:{ .lg .middle } __Open Source, MIT__
---
Material for MkDocs is licensed under MIT and available on [GitHub]
[:octicons-arrow-right-24: License](#)
</div>
Grid Cards als Links¶
# Documentation
<div class="grid cards" markdown>
- <a class="card-link" href="https://www.github.com" target="_blank" rel="noreferrer">
:fontawesome-brands-github:{ .xxxl .middle .center }
<span class="card-title center">GitHub</span>
</a>
</div>
Grid Cards komplett als Link - Anpassung in der Markdown Datei und in extra.css erforderlich
// extra.css
a.card-link center {
width: fit-content;
display: block;
margin: 0 auto;
}
a.card-link .card-title {
font-size: 1.5em;
}
a.card-link {
color: initial; // Make cards have white text until hovered.
}
Bei Bedarf noch testen…
Beispieltext¶
Eiusmod tempor elit et excepteur. Culpa commodo ullamco irure esse fugiat exercitation fugiat deserunt ad. Amet deserunt aute laborum aute in adipisicing sunt consectetur deserunt. Culpa sit irure non tempor. Id quis irure veniam aliqua consequat consequat deserunt minim sunt qui qui incididunt culpa pariatur. Consectetur dolore nisi reprehenderit occaecat tempor voluptate deserunt ex tempor ut eiusmod tempor consectetur ut. Ad occaecat enim id amet velit eu anim.
Info Boxen¶
FAQ Version 1¶
Wie kann ich mich bei der POICloud anmelden?
Anmeldung bei der POICloud¶
mit Mailadresse und Passwort
Wie kann ich mich bei der POICloud anmelden?
Anmeldung bei der POICloud¶
mit Mailadresse und Passwort
Wie kann ich mich bei der POICloud anmelden?
Anmeldung bei der POICloud¶
mit Mailadresse und Passwort
Wie kann ich mich bei der POICloud anmelden?
Anmeldung bei der POICloud¶
mit Mailadresse und Passwort
Wie kann ich mich bei der POICloud anmelden?
Anmeldung bei der POICloud¶
mit Mailadresse und Passwort
Wie kann ich mich bei der POICloud anmelden?
Anmeldung bei der POICloud¶
mit Mailadresse und Passwort
Nachteil: Titel von Info Box kann nicht direkt verlinkt werden
FAQ Version 2¶
Wie kann ich mich bei der POICloud anmelden?¶
Antwort: mit Mailadresse und Passwort
Wie kann ich mich bei der POICloud anmelden?¶
Antwort: mit Mailadresse und Passwort
Wie kann ich mich bei der POICloud anmelden?¶
Antwort: mit Mailadresse und Passwort
Wie kann ich mich bei der POICloud anmelden?¶
Antwort: mit Mailadresse und Passwort
Wie kann ich mich bei der POICloud anmelden?¶
Antwort: mit Mailadresse und Passwort
FAQ mit :target¶
Version mit :target - braucht noch Anpassungen für dark/light mode in extra.css
(ist auskommentiert - evtl. zum Testen mit _v1 und _v2 benennen?)
FAQ mit Flexbox¶
Version mit CSS Flexbox
md_in_html funktioniert hier nicht beim header…?
Anweisung in der extra.css wegen br ist z.Zt. auskommentiert
evtl. wieder zurück zur 1. Version ohne zusätzliche divs…?
This is the content for item 1. It expands when clicked.
This is the content for item 2. You can place any HTML here.
This is the content for item 3. Click again to collapse.