5.2 KiB
+++ author = "Hugo Autoren & Radek" title = "Beispielvorführung" date = "2025-04-09T07:01:12+02:00" description = "Beispielartikel, der grundlegendes Styling und Formatierungen für HTML-Elemente zeigt." tags = ['showcase', 'markdown', 'styling'] +++
Dieser Artikel bietet ein Beispiel für grundlegende Markdown-Syntax, die in Hugo-Inhaltsdateien verwendet werden kann. Er zeigt auch, ob grundlegende HTML-Elemente mit CSS in einem Hugo-Theme dekoriert sind.
Überschriften
Die folgenden HTML-Elemente <h1>—<h6> repräsentieren sechs Ebenen von Abschnittsüberschriften. <h1> ist die höchste Abschnittsebene, während <h6> die niedrigste ist.
H1
H2
H3
H4
H5
H6
Absatz
Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
Bilder
Abbildung mit Beschriftung
{{< figure src="/img/terminal-theme.png" alt="Terminal Theme Preview" position="center" caption="Terminal Theme Preview" captionPosition="center" >}}
Zitate
Das Blockquote-Element stellt Inhalte dar, die aus einer anderen Quelle zitiert werden, optional mit einer Zitation, die innerhalb eines footer- oder cite-Elements enthalten sein muss, und optional mit Inline-Änderungen wie Anmerkungen und Abkürzungen.
Blockquote ohne Attribution
Tiam, ad mint andaepu dandae nostion secatur sequo quae. Beachte, dass du Markdown-Syntax innerhalb eines Blockquotes verwenden kannst.
Blockquote mit Attribution
Kommuniziere nicht durch das Teilen von Speicher, teile Speicher durch Kommunizieren.
— Rob Pike1
Buttons und Links
Button Link Link
Tabellen
Tabellen sind nicht Teil der Kern-Mardown-Spezifikation, aber Hugo unterstützt sie standardmäßig.
| Name | Alter |
|---|---|
| Bob | 27 |
| Alice | 23 |
Inline Markdown innerhalb von Tabellen
| Kursiv | Fett | Code |
|---|---|---|
| kursiv | fett | code |
Formulare
Option 1 Option 2 Option 3
Ich verstehe
Absenden
Code-Blöcke
Code-Block mit Backticks
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Beispiel HTML5-Dokument</title>
</head>
<body>
<p>Test</p>
</body>
</html>
Code-Block eingerückt mit vier Leerzeichen
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Beispiel HTML5-Dokument</title>
</head>
<body>
<p>Test</p>
</body>
</html>
Code-Block mit Hugos internem Highlight-Shortcode
{{< highlight html >}} <!doctype html>
<html lang="de"> <head> </head>Test
</html> {{< /highlight >}}Code-Block mit benutzerdefiniertem eingebautem {{ < code > }} Shortcode
{{< code title="Hey, dies ist der Titel eines Code-Blocks" language="css" >}} pre { background: #1a1a1d; padding: 20px; border-radius: 8px; font-size: 1rem; overflow: auto;
@media (--phone) { white-space: pre-wrap; word-wrap: break-word; }
code { background: none !important; color: #ccc; padding: 0; font-size: inherit; } } {{< /code >}}
Listenarten
Geordnete Liste
- Erstes Element
- Zweites Element
- Drittes Element
Ungeordnete Liste
- Listenelement
- Weiteres Element
- Noch ein Element
Verschachtelte Liste
- Obst
- Apfel
- Orange
- Banane
- Milchprodukte
- Milch
- Käse
Andere Elemente — abbr, sub, sup, kbd, mark
GIF ist ein Bitmap-Bildformat.
H2O
Xn + Yn = Zn
Drücke CTRL+ALT+Entf, um die Sitzung zu beenden.
Die meisten Salamander sind nachtaktiv und jagen nach Insekten, Würmern und anderen kleinen Lebewesen.