585 lines
25 KiB
HTML
585 lines
25 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
|
|
<title>Beispielvorführung :: Privacynerd's blog</title>
|
|
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Beispielartikel, der grundlegendes Styling und Formatierungen für HTML-Elemente zeigt." />
|
|
<meta name="keywords" content="" />
|
|
|
|
<meta name="robots" content="noodp" />
|
|
|
|
<link rel="canonical" href="https://blog.privacynerd.de/de/posts/showcase/" />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="https://blog.privacynerd.de/css/buttons.min.86f6b4c106b6c6eb690ae5203d36b442c1f66f718ff4e8164fa86cf6c61ad641.css">
|
|
|
|
|
|
<link rel="stylesheet" href="https://blog.privacynerd.de/css/code.min.4f0ccc8439f99bf7f7970298556b94011aabc1fcae743b6842fc3361a2da9ea3.css">
|
|
|
|
|
|
<link rel="stylesheet" href="https://blog.privacynerd.de/css/fonts.min.5bb7ed13e1d00d8ff39ea84af26737007eb5051b157b86fc24487c94f3dc8bbe.css">
|
|
|
|
|
|
<link rel="stylesheet" href="https://blog.privacynerd.de/css/footer.min.eb8dfc2c6a7eafa36cd3ba92d63e69e849e2200e0002a228d137f236b09ecd75.css">
|
|
|
|
|
|
<link rel="stylesheet" href="https://blog.privacynerd.de/css/gist.min.a751e8b0abe1ba8bc53ced52a38b19d8950fe78ca29454ea8c2595cf26aad5c0.css">
|
|
|
|
|
|
<link rel="stylesheet" href="https://blog.privacynerd.de/css/header.min.75c7eb0e2872d95ff48109c6647d0223a38db52e2561dd87966eb5fc7c6bdac6.css">
|
|
|
|
|
|
<link rel="stylesheet" href="https://blog.privacynerd.de/css/main.min.15870410d15d02abd22fb5ef00996f65a00d04b3a7435e9f83831c7c2298de88.css">
|
|
|
|
|
|
<link rel="stylesheet" href="https://blog.privacynerd.de/css/menu.min.3c17467ebeb3d38663dce68f71f519901124fa5cbb4519b2fb0667a21e9aca39.css">
|
|
|
|
|
|
<link rel="stylesheet" href="https://blog.privacynerd.de/css/pagination.min.bbb986dbce00a5ce5aca0504b7925fc1c581992a4bf57f163e5d69cc1db7d836.css">
|
|
|
|
|
|
<link rel="stylesheet" href="https://blog.privacynerd.de/css/post.min.e6dddd258e64c83e05cec0cd49c05216742d42fc8ecbfbe6b67083412b609bd3.css">
|
|
|
|
|
|
<link rel="stylesheet" href="https://blog.privacynerd.de/css/syntax.min.a0773cce9310cb6d8ed23e50f005448facf29a53001b57e038828daa466b25c0.css">
|
|
|
|
|
|
<link rel="stylesheet" href="https://blog.privacynerd.de/css/terminal.min.e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css">
|
|
|
|
|
|
<link rel="stylesheet" href="https://blog.privacynerd.de/css/terms.min.b81791663c3790e738e571cdbf802312390d30e4b1d8dc9d814a5b5454d0ac11.css">
|
|
|
|
|
|
<link rel="stylesheet" href="https://blog.privacynerd.de/terminal.css">
|
|
|
|
|
|
|
|
|
|
<link rel="shortcut icon" href="https://blog.privacynerd.de/favicon.png">
|
|
<link rel="apple-touch-icon" href="https://blog.privacynerd.de/apple-touch-icon.png">
|
|
|
|
|
|
<meta name="twitter:card" content="summary" />
|
|
|
|
|
|
<meta name="twitter:site" content="" />
|
|
|
|
<meta name="twitter:creator" content="Hugo Autoren & Radek" />
|
|
|
|
|
|
|
|
<meta property="og:locale" content="de" />
|
|
<meta property="og:type" content="article" />
|
|
<meta property="og:title" content="Beispielvorführung">
|
|
<meta property="og:description" content="Beispielartikel, der grundlegendes Styling und Formatierungen für HTML-Elemente zeigt." />
|
|
<meta property="og:url" content="https://blog.privacynerd.de/de/posts/showcase/" />
|
|
<meta property="og:site_name" content="Privacynerd's blog" />
|
|
|
|
<meta property="og:image" content="https://blog.privacynerd.de/og-image.png">
|
|
|
|
<meta property="og:image:width" content="1200">
|
|
<meta property="og:image:height" content="627">
|
|
|
|
|
|
<meta property="article:published_time" content="2025-04-09 07:01:12 +0200 CEST" />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style>
|
|
#banner {
|
|
width: 100%;
|
|
height: 2rem;
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
background: var(--accent);
|
|
}
|
|
|
|
#banner span {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
#banner a {
|
|
color: var(--background);
|
|
display: inline;
|
|
}
|
|
|
|
#banner > button {
|
|
padding: 0 5px 0 0;
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
|
|
<div id="banner"><span><a href="https://git.privacynerd.de/git.privacynerd.de/blog.privacynerd.de">Baustelle 🚧 | laufende Arbeiten</a></span></div>
|
|
|
|
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<div class="container center">
|
|
|
|
<header class="header">
|
|
<div class="header__inner">
|
|
<div class="header__logo">
|
|
<a href="/de">
|
|
<div class="logo">
|
|
Privacynerd's blog
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<ul class="menu menu--mobile">
|
|
<li class="menu__trigger">Menu ▾</li>
|
|
<li>
|
|
<ul class="menu__dropdown">
|
|
|
|
|
|
<li><a href="/de/about">Über</a></li>
|
|
|
|
|
|
|
|
<li><a href="/de/tags">Tags</a></li>
|
|
|
|
|
|
|
|
<hr />
|
|
|
|
|
|
|
|
<li>
|
|
|
|
<a href="/en/posts/showcase/">English</a>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li>
|
|
<b>
|
|
<a href="/de/posts/showcase/">Deutsch</a>
|
|
</b>
|
|
</li>
|
|
|
|
|
|
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
|
|
<ul class="menu menu--desktop menu--language-selector">
|
|
<li class="menu__trigger">de ▾</li>
|
|
<li>
|
|
<ul class="menu__dropdown">
|
|
|
|
|
|
|
|
<li>
|
|
|
|
<a href="/en/posts/showcase/">English</a>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li>
|
|
<b>
|
|
<a href="/de/posts/showcase/">Deutsch</a>
|
|
</b>
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<nav class="navigation-menu">
|
|
<ul class="navigation-menu__inner menu--desktop">
|
|
|
|
|
|
|
|
<li><a href="/de/about" >Über</a></li>
|
|
|
|
|
|
|
|
<li><a href="/de/tags" >Tags</a></li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
|
|
</header>
|
|
|
|
|
|
<div class="content">
|
|
|
|
<article class="post">
|
|
<h1 class="post-title">
|
|
<a href="https://blog.privacynerd.de/de/posts/showcase/">Beispielvorführung</a>
|
|
</h1>
|
|
<div class="post-meta"><time class="post-date">2025-04-09</time><span class="post-author">Hugo Autoren & Radek</span><span class="post-reading-time">5 Minuten Lesezeit (488 Wörter)</span></div>
|
|
|
|
|
|
<span class="post-tags">
|
|
|
|
#<a href="https://blog.privacynerd.de/de/tags/showcase/">showcase</a>
|
|
|
|
#<a href="https://blog.privacynerd.de/de/tags/markdown/">markdown</a>
|
|
|
|
#<a href="https://blog.privacynerd.de/de/tags/styling/">styling</a>
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="table-of-contents">
|
|
<h2>
|
|
Inhaltsverzeichnis
|
|
</h2>
|
|
<nav id="TableOfContents">
|
|
<ul>
|
|
<li><a href="#überschriften">Überschriften</a></li>
|
|
</ul>
|
|
|
|
<ul>
|
|
<li><a href="#h2">H2</a>
|
|
<ul>
|
|
<li><a href="#h3">H3</a></li>
|
|
<li><a href="#h4">H4</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#absatz">Absatz</a></li>
|
|
<li><a href="#bilder">Bilder</a>
|
|
<ul>
|
|
<li><a href="#abbildung-mit-beschriftung">Abbildung mit Beschriftung</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#zitate">Zitate</a>
|
|
<ul>
|
|
<li><a href="#blockquote-ohne-attribution">Blockquote ohne Attribution</a></li>
|
|
<li><a href="#blockquote-mit-attribution">Blockquote mit Attribution</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#buttons-und-links">Buttons und Links</a></li>
|
|
<li><a href="#tabellen">Tabellen</a>
|
|
<ul>
|
|
<li><a href="#inline-markdown-innerhalb-von-tabellen">Inline Markdown innerhalb von Tabellen</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#formulare">Formulare</a></li>
|
|
<li><a href="#code-blöcke">Code-Blöcke</a>
|
|
<ul>
|
|
<li><a href="#code-block-mit-backticks">Code-Block mit Backticks</a></li>
|
|
<li><a href="#code-block-eingerückt-mit-vier-leerzeichen">Code-Block eingerückt mit vier Leerzeichen</a></li>
|
|
<li><a href="#code-block-mit-hugos-internem-highlight-shortcode">Code-Block mit Hugos internem Highlight-Shortcode</a></li>
|
|
<li><a href="#code-block-mit-benutzerdefiniertem-eingebautem---code---shortcode">Code-Block mit benutzerdefiniertem eingebautem <code>{{ < code > }}</code> Shortcode</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#listenarten">Listenarten</a>
|
|
<ul>
|
|
<li><a href="#geordnete-liste">Geordnete Liste</a></li>
|
|
<li><a href="#ungeordnete-liste">Ungeordnete Liste</a></li>
|
|
<li><a href="#verschachtelte-liste">Verschachtelte Liste</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#andere-elemente--abbr-sub-sup-kbd-mark">Andere Elemente — abbr, sub, sup, kbd, mark</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
|
|
<div class="post-content"><div>
|
|
<p>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.</p>
|
|
<h2 id="überschriften">Überschriften<a href="#überschriften" class="hanchor" ariaLabel="Anchor">#</a> </h2>
|
|
<p>Die folgenden HTML-Elemente <code><h1></code>—<code><h6></code> repräsentieren sechs Ebenen von Abschnittsüberschriften. <code><h1></code> ist die höchste Abschnittsebene, während <code><h6></code> die niedrigste ist.</p>
|
|
<h1 id="h1">H1<a href="#h1" class="hanchor" ariaLabel="Anchor">#</a> </h1>
|
|
<h2 id="h2">H2<a href="#h2" class="hanchor" ariaLabel="Anchor">#</a> </h2>
|
|
<h3 id="h3">H3<a href="#h3" class="hanchor" ariaLabel="Anchor">#</a> </h3>
|
|
<h3 id="h4">H4<a href="#h4" class="hanchor" ariaLabel="Anchor">#</a> </h3>
|
|
<h4 id="h5">H5<a href="#h5" class="hanchor" ariaLabel="Anchor">#</a> </h4>
|
|
<h5 id="h6">H6<a href="#h6" class="hanchor" ariaLabel="Anchor">#</a> </h5>
|
|
<h2 id="absatz">Absatz<a href="#absatz" class="hanchor" ariaLabel="Anchor">#</a> </h2>
|
|
<p>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.</p>
|
|
<p>Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.</p>
|
|
<h2 id="bilder">Bilder<a href="#bilder" class="hanchor" ariaLabel="Anchor">#</a> </h2>
|
|
<p><img src="/img/terminal-theme.png" alt="Terminal Theme Preview"></p>
|
|
<h3 id="abbildung-mit-beschriftung">Abbildung mit Beschriftung<a href="#abbildung-mit-beschriftung" class="hanchor" ariaLabel="Anchor">#</a> </h3>
|
|
<figure><img src="/img/terminal-theme.png"
|
|
alt="Terminal Theme Preview"><figcaption>
|
|
<p>Terminal Theme Preview</p>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
<h2 id="zitate">Zitate<a href="#zitate" class="hanchor" ariaLabel="Anchor">#</a> </h2>
|
|
<p>Das Blockquote-Element stellt Inhalte dar, die aus einer anderen Quelle zitiert werden, optional mit einer Zitation, die innerhalb eines <code>footer</code>- oder <code>cite</code>-Elements enthalten sein muss, und optional mit Inline-Änderungen wie Anmerkungen und Abkürzungen.</p>
|
|
<h3 id="blockquote-ohne-attribution">Blockquote ohne Attribution<a href="#blockquote-ohne-attribution" class="hanchor" ariaLabel="Anchor">#</a> </h3>
|
|
<blockquote>
|
|
<p>Tiam, ad mint andaepu dandae nostion secatur sequo quae.
|
|
<strong>Beachte</strong>, dass du <em>Markdown-Syntax</em> innerhalb eines Blockquotes verwenden kannst.</p></blockquote>
|
|
<h3 id="blockquote-mit-attribution">Blockquote mit Attribution<a href="#blockquote-mit-attribution" class="hanchor" ariaLabel="Anchor">#</a> </h3>
|
|
<blockquote>
|
|
<p>Kommuniziere nicht durch das Teilen von Speicher, teile Speicher durch Kommunizieren.<!-- raw HTML omitted -->
|
|
— <!-- raw HTML omitted -->Rob Pike<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup><!-- raw HTML omitted --></p></blockquote>
|
|
<h2 id="buttons-und-links">Buttons und Links<a href="#buttons-und-links" class="hanchor" ariaLabel="Anchor">#</a> </h2>
|
|
<p><!-- raw HTML omitted -->Button<!-- raw HTML omitted -->
|
|
<!-- raw HTML omitted -->Link<!-- raw HTML omitted -->
|
|
<!-- raw HTML omitted -->Link<!-- raw HTML omitted --></p>
|
|
<h2 id="tabellen">Tabellen<a href="#tabellen" class="hanchor" ariaLabel="Anchor">#</a> </h2>
|
|
<p>Tabellen sind nicht Teil der Kern-Mardown-Spezifikation, aber Hugo unterstützt sie standardmäßig.</p>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Alter</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Bob</td>
|
|
<td>27</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Alice</td>
|
|
<td>23</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<h3 id="inline-markdown-innerhalb-von-tabellen">Inline Markdown innerhalb von Tabellen<a href="#inline-markdown-innerhalb-von-tabellen" class="hanchor" ariaLabel="Anchor">#</a> </h3>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Kursiv</th>
|
|
<th>Fett</th>
|
|
<th>Code</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>kursiv</em></td>
|
|
<td><strong>fett</strong></td>
|
|
<td><code>code</code></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<h2 id="formulare">Formulare<a href="#formulare" class="hanchor" ariaLabel="Anchor">#</a> </h2>
|
|
<!-- raw HTML omitted -->
|
|
<h2 id="code-blöcke">Code-Blöcke<a href="#code-blöcke" class="hanchor" ariaLabel="Anchor">#</a> </h2>
|
|
<h3 id="code-block-mit-backticks">Code-Block mit Backticks<a href="#code-block-mit-backticks" class="hanchor" ariaLabel="Anchor">#</a> </h3>
|
|
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!doctype html></span>
|
|
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"de"</span><span class="p">></span>
|
|
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">title</span><span class="p">></span>Beispiel HTML5-Dokument<span class="p"></</span><span class="nt">title</span><span class="p">></span>
|
|
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
|
|
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">></span>Test<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
|
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span>
|
|
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">html</span><span class="p">></span>
|
|
</span></span></code></pre></div><h3 id="code-block-eingerückt-mit-vier-leerzeichen">Code-Block eingerückt mit vier Leerzeichen<a href="#code-block-eingerückt-mit-vier-leerzeichen" class="hanchor" ariaLabel="Anchor">#</a> </h3>
|
|
<pre><code><!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Beispiel HTML5-Dokument</title>
|
|
</head>
|
|
<body>
|
|
<p>Test</p>
|
|
</body>
|
|
</html>
|
|
</code></pre>
|
|
<h3 id="code-block-mit-hugos-internem-highlight-shortcode">Code-Block mit Hugos internem Highlight-Shortcode<a href="#code-block-mit-hugos-internem-highlight-shortcode" class="hanchor" ariaLabel="Anchor">#</a> </h3>
|
|
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!doctype html></span>
|
|
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"de"</span><span class="p">></span>
|
|
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">title</span><span class="p">></span>Beispiel HTML5-Dokument<span class="p"></</span><span class="nt">title</span><span class="p">></span>
|
|
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
|
|
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">></span>Test<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
|
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span>
|
|
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">html</span><span class="p">></span></span></span></code></pre></div>
|
|
<h3 id="code-block-mit-benutzerdefiniertem-eingebautem---code---shortcode">Code-Block mit benutzerdefiniertem eingebautem <code>{{ < code > }}</code> Shortcode<a href="#code-block-mit-benutzerdefiniertem-eingebautem---code---shortcode" class="hanchor" ariaLabel="Anchor">#</a> </h3>
|
|
|
|
|
|
|
|
<details class="collapsable-code" >
|
|
<summary title="Click to interact"><span class="collapsable-code__title">Hey, dies ist der Titel eines Code-Blocks</span></summary>
|
|
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">pre</span> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="k">background</span><span class="p">:</span> <span class="mh">#1a1a1d</span><span class="p">;</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="k">padding</span><span class="p">:</span> <span class="mi">20</span><span class="kt">px</span><span class="p">;</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="k">border-radius</span><span class="p">:</span> <span class="mi">8</span><span class="kt">px</span><span class="p">;</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="k">font-size</span><span class="p">:</span> <span class="mi">1</span><span class="kt">rem</span><span class="p">;</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="k">overflow</span><span class="p">:</span> <span class="kc">auto</span><span class="p">;</span>
|
|
</span></span><span class="line"><span class="cl">
|
|
</span></span><span class="line"><span class="cl"> <span class="err">@media</span> <span class="err">(--phone)</span> <span class="err">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="k">white-space</span><span class="p">:</span> <span class="kc">pre-wrap</span><span class="p">;</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="k">word-wrap</span><span class="p">:</span> <span class="kc">break-word</span><span class="p">;</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
|
</span></span><span class="line"><span class="cl">
|
|
</span></span><span class="line"><span class="cl"> <span class="nt">code</span> <span class="p">{</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="k">background</span><span class="p">:</span> <span class="kc">none</span> <span class="cp">!important</span><span class="p">;</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="k">color</span><span class="p">:</span> <span class="mh">#ccc</span><span class="p">;</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="k">padding</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="k">font-size</span><span class="p">:</span> <span class="kc">inherit</span><span class="p">;</span>
|
|
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
|
</span></span><span class="line"><span class="cl"><span class="err">}</span></span></span></code></pre></div></details>
|
|
|
|
<h2 id="listenarten">Listenarten<a href="#listenarten" class="hanchor" ariaLabel="Anchor">#</a> </h2>
|
|
<h3 id="geordnete-liste">Geordnete Liste<a href="#geordnete-liste" class="hanchor" ariaLabel="Anchor">#</a> </h3>
|
|
<ol>
|
|
<li>Erstes Element</li>
|
|
<li>Zweites Element</li>
|
|
<li>Drittes Element</li>
|
|
</ol>
|
|
<h3 id="ungeordnete-liste">Ungeordnete Liste<a href="#ungeordnete-liste" class="hanchor" ariaLabel="Anchor">#</a> </h3>
|
|
<ul>
|
|
<li>Listenelement</li>
|
|
<li>Weiteres Element</li>
|
|
<li>Noch ein Element</li>
|
|
</ul>
|
|
<h3 id="verschachtelte-liste">Verschachtelte Liste<a href="#verschachtelte-liste" class="hanchor" ariaLabel="Anchor">#</a> </h3>
|
|
<ul>
|
|
<li>Obst
|
|
<ul>
|
|
<li>Apfel</li>
|
|
<li>Orange</li>
|
|
<li>Banane</li>
|
|
</ul>
|
|
</li>
|
|
<li>Milchprodukte
|
|
<ul>
|
|
<li>Milch</li>
|
|
<li>Käse</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<h2 id="andere-elemente--abbr-sub-sup-kbd-mark">Andere Elemente — abbr, sub, sup, kbd, mark<a href="#andere-elemente--abbr-sub-sup-kbd-mark" class="hanchor" ariaLabel="Anchor">#</a> </h2>
|
|
<p><!-- raw HTML omitted -->GIF<!-- raw HTML omitted --> ist ein Bitmap-Bildformat.</p>
|
|
<p>H<!-- raw HTML omitted -->2<!-- raw HTML omitted -->O</p>
|
|
<p>X<!-- raw HTML omitted -->n<!-- raw HTML omitted --> + Y<!-- raw HTML omitted -->n<!-- raw HTML omitted --> = Z<!-- raw HTML omitted -->n<!-- raw HTML omitted --></p>
|
|
<p>Drücke <!-- raw HTML omitted -->CTRL<!-- raw HTML omitted -->+<!-- raw HTML omitted -->ALT<!-- raw HTML omitted -->+<!-- raw HTML omitted -->Entf<!-- raw HTML omitted -->, um die Sitzung zu beenden.</p>
|
|
<p>Die meisten <!-- raw HTML omitted -->Salamander<!-- raw HTML omitted --> sind nachtaktiv und jagen nach Insekten, Würmern und anderen kleinen Lebewesen.</p>
|
|
<div class="footnotes" role="doc-endnotes">
|
|
<hr>
|
|
<ol>
|
|
<li id="fn:1">
|
|
<p>Das obige Zitat stammt aus Rob Pikes <a href="https://www.youtube.com/watch?v=PAAkCSZUG1c">Vortrag</a> während Gopherfest am 18. November 2015. <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</div></div>
|
|
|
|
|
|
|
|
<div class="pagination">
|
|
<div class="pagination__title">
|
|
<span class="pagination__title-h">Andere Posts lesen</span>
|
|
<hr />
|
|
</div>
|
|
<div class="pagination__buttons">
|
|
|
|
<a href="https://blog.privacynerd.de/de/posts/showcase-code/" class="button inline prev">
|
|
< [<span class="button__text">Varianten von Code-Blöcken</span>]
|
|
</a>
|
|
|
|
|
|
::
|
|
|
|
|
|
<a href="https://blog.privacynerd.de/de/posts/random-story/" class="button inline next">
|
|
[<span class="button__text">Eine beliebige Geschichte</span>] >
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</article>
|
|
|
|
</div>
|
|
|
|
|
|
<footer class="footer">
|
|
<style>
|
|
.antidiscovery i { display: none; }
|
|
</style>
|
|
<div class="footer__inner">
|
|
|
|
<div class="copyright copyright--user">
|
|
<span class="antidiscovery">© 2025 <i>L</i>B<i>P</i>e<i>o</i>n<i>i</i>j<i>n</i>a<i>c</i>m<i>G</i>i<i>N</i>n<i>U</i> <i>S</i>B<i>k</i>u<i>o</i>r<i>K</i>k<i>y</i>h<i>f</i>a<i>H</i>r<i>r</i>d<i>y</i>t</span>
|
|
|
|
<span style="margin-right: 10px">:: <a href="https://privacynerd.de/impressum?referrer=https%3a%2f%2fblog.privacynerd.de%2fde%2fposts%2fshowcase%2f">Impressum</a></span>
|
|
<span>:: <a href="https://github.com/panr/hugo-theme-terminal" target="_blank">Theme</a> erstellt von <a href="https://github.com/panr" target="_blank">panr</a> (angepasst)</span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript" src="/bundle.min.js"></script>
|
|
|
|
|
|
|
|
<script src="https://swetrix.privacynerd.de/script.js" defer=""></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
swetrix.init('GyBjobBbBEEC', {apiURL: 'https://swetrix.privacynerd.de/api/log',})
|
|
swetrix.trackViews()
|
|
swetrix.trackErrors({
|
|
sampleRate: 1,
|
|
callback: undefined,
|
|
})
|
|
})
|
|
</script>
|
|
<noscript>
|
|
<img
|
|
src="https://swetrix.privacynerd.de/api/log/noscript?pid=GyBjobBbBEEC"
|
|
alt=""
|
|
referrerpolicy="no-referrer-when-downgrade"
|
|
/>
|
|
</noscript>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|