serverPush/static.wiai.de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
static.wiai.de/latex-weekend-wise-2022/slides.de.html

3712 lines
110 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>LaTeX-Wochenende der Fachschaft WIAI</title>
<link rel="stylesheet" href="css/latex.css">
<link rel="stylesheet" href="lib/highlightjs/zenburn.css">
</head>
<body>
<section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>
<span class="chapter-number">0.</span>
Erste Schritte mit L<sup style="font-weight: bold; font-size: 73%; margin-left: -.25em; margin-right: -.05em; position: relative; top: .2em">A</sup>T<sub style="font-size: 100%; margin-left: -.1em">E</sub>X
</h1>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Exkurs: Eine Kommandozeile öffnen</h2>
<ul>
<li>Für die kommenden Aufgaben brauchen wir eine Kommandozeile</li>
<li>Je nach Betriebssystem, das verwendet wird, gibt es unteschiedliche Wege, sie zu öffnen</li>
<li>
<strong>Windows</strong>: Drückt die Windows-Taste, tippt <em>cmd</em> und drückt Enter</li>
<li>
<strong>MacOS</strong>: Drückt die <em>Command</em>-Taste und die Leertaste gleichzeitig, tippt danach <em>Terminal</em> und macht einen Doppelklick auf <em>Terminal</em>
</li>
<li>
<strong>Linux</strong>: Drückt <code>Strg + Alt + T</code>
</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Den Compiler installieren</h2>
<ul>
<li>Der Compiler übersetzt unseren LaTeX-Code in ein PDF</li>
<li>Je nach Betriebssystem stehen unterschiedliche Compiler zur Verfügung:</li>
<li>Windows: <a href="https://miktex.org/download">MikT<sub style="font-size: 100%; margin-left: -.1em">E</sub>X</a>
</li>
<li>Linux-Distributionen: <a href="https://tug.org/texlive/doc/texlive-en/texlive-en.html#installation">T<sub style="font-size: 100%; margin-left: -.1em">E</sub>XLive</a>
<ul>
<li>Debian-basierte Distros: Führt <code>sudo apt install texlive-full</code> aus</li>
<li>Andere Distributionen: Folgt den anweisungen auf der T<sub style="font-size: 100%; margin-left: -.1em">E</sub>XLive-Website</li>
</ul>
</li>
</ul>
<div class="box warning">
<p>Bitte achtet darauf, die full version mit allen Paketen zu installieren, wenn ihr die Auswahl habt!</p>
</div>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Installieren des Editors</h2>
<ul>
<li>Ein Editor kann heruntergeladen werden, sobald die Installation des Compilers fertig ist</li>
<li>Es funktioniert jeglicher Text-Editor, wie etwa <a href="https://notepad-plus-plus.org/downloads/">Notepad++</a> oder <a href="https://code.visualstudio.com/download">VSCode</a>
</li>
<li>Für Anfänger:innen empfehlen wir jedoch <a href="https://www.texstudio.org/">T<sub style="font-size: 100%; margin-left: -.1em">E</sub>Xstudio</a>, da es LaTeX-spezifische Features bietet</li>
<li>Ladet T<sub style="font-size: 100%; margin-left: -.1em">E</sub>Xstudio herunter und installiert es</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Kompilieren des Skriptes</h2>
<ul>
<li>Ladet das Projektarchiv aus dem VC herunter</li>
<li>Entpackt das Archiv</li>
<li>Öffnet die Datei main.tex in TeXstudio. Ihr findet es im Wurzelverzeichnis des Archivs</li>
<li>Kompiliert die Datei, indem ihr <span class="emoji">⏩</span> klickt</li>
<li>Einige neue Dateien sollten nun durch das Kompilieren generiert werden</li>
</ul>
<div class="box warning">
<p>Windows-Nutzer:innen: Um Dateiendungen zu aktivieren, klickt auf das Ansichts-Tab im Dateiexplorer und wählt <em>Dateiendungen</em>. So könnt ihr besser zwischen den einzelnen main-Files unterscheiden.</p>
</div>
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content titlepage">
<h1>L<sup style="font-weight: bold; font-size: 73%; margin-left: -.25em; margin-right: -.05em; position: relative; top: .2em">A</sup>T<sub style="font-size: 100%; margin-left: -.1em">E</sub>X-Wochenende</h1>
<small>
<p>Ein Workshop der Fachschaft WIAI. Erstellt von Anika Amma, Evelyn Fradtschuk, Florian Knoch, Christian Kremitzl, Fabian Lamprecht, Bernhard Luedtke und Anna Sauer.</p>
</small>
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>
<span class="chapter-number">1.</span>
Was ist L<sup style="font-weight: bold; font-size: 73%; margin-left: -.25em; margin-right: -.05em; position: relative; top: .2em">A</sup>T<sub style="font-size: 100%; margin-left: -.1em">E</sub>X?
</h1>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Entstehung</h2>
<ul>
<li>Donald <strong>Knuth</strong>, 1977–1986: Textsatzsystem <strong>TeX</strong><span class="bubble fragment">τεχ → /tɛç/</span> für The Art of Computer Programming</li>
<li>Leslie <strong>Lamport</strong>, ab 1980er: Softwarepaket <strong>LaTeX</strong> zur einfacheren Benutzung von TeX</li>
</ul>
<div style="display: flex; justify-content: space-between; align-items: stretch;">
<figure>
<img data-src="svg/chapter-01/knuth.jpg" style="height: 13em">
<figcaption>
Donald Knuth
</figcaption>
</figure>
<figure>
<img data-src="svg/chapter-01/lamport.jpg" style="height: 13em">
<figcaption>
Leslie Lamport
</figcaption>
</figure>
</div>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-01/taocp.jpg">
</div>
</div>
</article>
<article>
<div class="layout-wide-content">
<div class="layout-content">
<h2>Gründe für LaTeX: Makrotypografie</h2>
<style>
div.macro-typography {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-column-gap: 5vh;
grid-row-gap: 0;
}
@media (orientation: portrait) {
div.macro-typography {
}
div.macro-typography::after {
content: 'This demo does not work in narrow viewports. Please use a landscape format!';
position: absolute;
background: rgba(0,0,0,.8);
color: white;
padding: 30vw;
opacity: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}
div.macro-typography .example {
overflow: hidden;
margin: 0;
padding: 0;
font-size: 2vh;
font-family: 'EB Garamond';
}
div.macro-typography .caption {
font-size: .45em;
margin: .5em 0 2em;
padding: .4em;
line-height: 2em;
border-top: .1em solid currentColor;
white-space: nowrap;
}
div.macro-typography .caption::first-letter {
font-size: 2em;
vertical-align: top;
}
div.macro-typography .narrow {
grid-column: 1 / span 1;
}
div.macro-typography .normal {
grid-column: 2 / span 2;
}
div.macro-typography .wide {
grid-column: 4 / span 4;
}
div.macro-typography .tight {
grid-row: 1;
max-height: 5.9em;
line-height: 1.15em;
}
div.macro-typography .medium {
grid-row: 3;
max-height: 5.9em;
line-height: 1.4em;
}
div.macro-typography .loose {
grid-row: 5;
max-height: 7em;
line-height: 1.7em;
}
div.macro-typography .good {
color: #006600;
background: #ddffcc;
}
div.macro-typography .bad {
color: #806000;
background: #fff2cc;
}
div.macro-typography .ugly {
color: #660000;
background: #ffddcc;
}
</style>
<div class="macro-typography">
<p class="example narrow tight">Dieser Absatz soll zeigen, wie sich unter­schied­liche Zeilen­abstände bei unter­schied­lichen Satz­breiten aus­wirken. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht.</p>
<p class="caption narrow good">☺ Kurz und eng</p>
<p class="example normal tight">Dieser Absatz soll zeigen, wie sich unter­schied­liche Zeilen­abstände bei unter­schied­lichen Satz­breiten aus­wirken. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht.</p>
<p class="caption normal bad">☹ Normale Länge und enger Zeilenabstand</p>
<p class="example wide tight">Dieser Absatz soll zeigen, wie sich unter­schied­liche Zeilen­abstände bei unter­schied­lichen Satz­breiten aus­wirken. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht.</p>
<p class="caption wide ugly">☹ Lange Zeilen und enger Zeilenabstand</p>
<p class="example narrow medium">Dieser Absatz soll zeigen, wie sich unter­schied­liche Zeilen­abstände bei unter­schied­lichen Satz­breiten aus­wirken. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht.</p>
<p class="caption narrow bad">☹ Kurz und normal</p>
<p class="example normal medium">Dieser Absatz soll zeigen, wie sich unter­schied­liche Zeilen­abstände bei unter­schied­lichen Satz­breiten aus­wirken. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht.</p>
<p class="caption normal good">☺ Normale Länge und Zeilenabstand</p>
<p class="example wide medium">Dieser Absatz soll zeigen, wie sich unter­schied­liche Zeilen­abstände bei unter­schied­lichen Satz­breiten aus­wirken. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht.</p>
<p class="caption wide bad">☹ Lange Zeilen und normaler Zeilenabstand</p>
<p class="example narrow loose">Dieser Absatz soll zeigen, wie sich unter­schied­liche Zeilen­abstände bei unter­schied­lichen Satz­breiten aus­wirken. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht.</p>
<p class="caption narrow ugly">☹ Kurz und weit</p>
<p class="example normal loose">Dieser Absatz soll zeigen, wie sich unter­schied­liche Zeilen­abstände bei unter­schied­lichen Satz­breiten aus­wirken. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht.</p>
<p class="caption normal bad">☹ Normale Länge und weiter Zeilenabstand</p>
<p class="example wide loose">Dieser Absatz soll zeigen, wie sich unter­schied­liche Zeilen­abstände bei unter­schied­lichen Satz­breiten aus­wirken. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht. Dazu ist hier noch ein bisschen mehr Text nötig, damit das auch wirklich nach einem Absatz aussieht.</p>
<p class="caption wide good">☺ Lange Zeilen und weiter Zeilenabstand</p>
</div>
</div>
</div>
</article>
<article>
<div class="layout-wide-content">
<div class="layout-content">
<h2>Gründe für LaTeX: Mikrotypografie</h2>
<style>
div.micro-typography {
display: grid;
margin-top: 10vh;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 5vh;
}
div.micro-typography .example {
overflow: hidden;
margin: 0;
padding: 0;
font-size: 2vh;
font-family: 'EB Garamond';
}
div.micro-typography .caption {
font-size: .45em;
margin: .5em 0 5vh;
padding: .4em;
line-height: 2em;
border-top: .1em solid currentColor;
white-space: nowrap;
}
div.micro-typography .caption::first-letter {
font-size: 2em;
vertical-align: top;
}
div.micro-typography .narrow {
grid-column: 1 / span 1;
}
div.micro-typography .normal {
grid-column: 2 / span 1;
}
div.micro-typography .wide {
grid-column: 3 / span 1;
}
div.micro-typography .example1 {
grid-row: 1;
}
div.micro-typography .example2 {
grid-row: 3;
}
div.micro-typography .good {
color: #006600;
background: #ddffcc;
}
div.micro-typography .default {
color: #806000;
background: #fff2cc;
}
div.micro-typography .ugly {
color: #660000;
background: #ffddcc;
}
</style>
<div class="micro-typography">
<p class="example example1"><img data-src="svg/chapter-01/schriftschnitte-slanted.svg" style="height: 10vh"></p>
<p class="caption ugly">☹ schräg (verzerrt)</p>
<p class="example example1"><img data-src="svg/chapter-01/schriftschnitte-roman.svg" style="height: 10vh"></p>
<p class="caption good">☺ gerade</p>
<p class="example example1"><img data-src="svg/chapter-01/schriftschnitte-italic.svg" style="height: 10vh"></p>
<p class="caption good">☺ kursiv (eigener Schnitt)</p>
<p class="example example2"><img data-src="svg/chapter-01/schriftgrade-vergroessert.svg" style="height: 12vh"></p>
<p class="caption ugly">☹ kleine Schrift vergrößert</p>
<p class="example example2"><img data-src="svg/chapter-01/schriftgrade-korrekt.svg" style="height: 12vh"></p>
<p class="caption good">☺ jeweils passender Schriftgrad</p>
<p class="example example2"><img data-src="svg/chapter-01/schriftgrade-verkleinert.svg" style="height: 12vh"></p>
<p class="caption ugly">☹ große Schrift verkleinert</p>
</div>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Gründe für LaTeX: Plaintext</h2>
<ul>
<li>zuverlässiges Undo</li>
<li>einfache Versionierung</li>
<li>unabhängig von proprietären Programmen</li>
<li>Quelltext langfristig lesbar</li>
<li>einfache Zusammenarbeit mit anderen Programmen</li>
<li>keine Ablenkung durch Formatierung oder eingebettete Medien</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Ablauf des Workshops</h2>
<p><strong>Ziel:</strong> Wir arbeiten zusammen unser <a href="https://github.com/fs-wiai/latex-script/">LaTeX-Skript</a> durch, das ihr nach dem Wochenende als kompakte Referenz verwenden könnt.</p>
<ul>
<li>Learning by Doing</li>
<li>Verstehen, wie LaTeX funktioniert</li>
<li>Einzelheiten später nachschlagen</li>
</ul>
<div class="fragment">
<p><strong>Gliederung:</strong></p>
<ol type="1">
<li><del>Was ist LaTeX?</del></li>
<li>Wie funktioniert LaTeX?</li>
<li>Grundstruktur eines LaTeX-Dokuments</li>
<li>Projektstruktur</li>
<li>Viele Features</li>
<li>Literaturverwaltung</li>
<li>Ausblick</li>
</ol>
</div>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-01/latex-script.svg">
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>
<span class="chapter-number">2.</span>
Wie funktioniert L<sup style="font-weight: bold; font-size: 73%; margin-left: -.25em; margin-right: -.05em; position: relative; top: .2em">A</sup>T<sub style="font-size: 100%; margin-left: -.1em">E</sub>X?
</h1>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>WYSIWaaas?</h2>
<h3 data-category="Word" id="what-you-see-is-what-you-get">What You See Is What You Get</h3>
<ul>
<li>Formatierung mit unmittelbarem optischen Feedback</li>
</ul>
<section id="what-you-see-is-what-you-mean" class="fragment" data-category="LaTeX">
<h3 data-category="LaTeX">What You See Is What You Mean</h3>
<ul>
<li>Trennung von Inhalt und Struktur</li>
<li>Formatierung erst am Ende ersichtlich</li>
</ul>
</section>
<p style="margin-top:calc(.25 * var(--square));">
Bildquelle: <a href="https://xkcd.com/1341/">xkcd</a>
</p>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-02/xkcd-types-of-editors.png">
</div>
</div>
</article>
<article>
<div class="layout-preview-only">
<div class="layout-preview">
<figure>
<img data-src="svg/chapter-02/wysiwyg.svg" alt=""><figcaption>Der Weg zum fertigen Dokument</figcaption>
</figure>
</div>
</div>
</article>
<article>
<div class="layout-two-columns">
<h2 class="layout-title">Was brauchen wir dazu?</h2>
<div class="layout-column-one">
<h3 id="editor">Editor</h3>
<p>zum Schreiben unseres Quelltextes mit allen Befehlen zur semantischen Gliederung</p>
<p><a href="http://www.texstudio.org/">TeXstudio</a>, <a href="https://www.xm1math.net/texmaker/">TeXMaker</a></p>
</div>
<div class="layout-column-two">
<h3 id="compiler">Compiler</h3>
<p>erstellt aus dem Quelltext ein fertig formatiertes PDF-Dokument</p>
<p><a href="http://miktex.org/">MiKTeX</a>, <a href="http://tug.org/mactex/">MacTeX</a>, <a href="https://tug.org/texlive/">TeX Live</a></p>
</div>
</div>
</article>
<article>
<div class="layout-wide-content">
<div class="layout-content">
<h2>Befehle</h2>
<p>Allgemeiner Aufbau eine Befehls:</p>
<pre class="hljs lang-txt"><code>\&lt;befehl&gt;[&lt;optionale_parameter&gt;]{&lt;obligatorische_parameter&gt;}</code></pre>
<p class="fragment">Ein paar Beispiele:</p>
<div class="sourceCode" id="cb2"><pre class="sourceCode lang-tex tex hljs fragment"><code class="sourceCode latex"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true"></a><span class="fu">\newpage</span> <span class="co">% fügt eine neue Seite ein</span></span>
<span id="cb2-2"><a href="#cb2-2" aria-hidden="true"></a><span class="fu">\textbf</span>{fetter Text} <span class="co">% schreibt den übergebenen Text fett</span></span>
<span id="cb2-3"><a href="#cb2-3" aria-hidden="true"></a><span class="bu">\documentclass</span>[10pt,a5paper,landscape]{<span class="ex">article</span>} <span class="co">% setzt konfiguriert die Dokumentenklasse</span></span>
<span id="cb2-4"><a href="#cb2-4" aria-hidden="true"></a><span class="fu">\frac</span>{1}{4} <span class="co">% fügt den mathematischen Bruch ein</span></span></code></pre></div>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Backslash</h2>
<p>Den Backslash erzeugt ihr mit folgender Tastenkombination:</p>
<p><kbd>AltGr</kbd> + <kbd>ß</kbd> (Windows/Linux)</p>
<p><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>7</kbd> (MacOS)</p>
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>
<span class="chapter-number">3.</span>
Grundstruktur eines L<sup style="font-weight: bold; font-size: 73%; margin-left: -.25em; margin-right: -.05em; position: relative; top: .2em">A</sup>T<sub style="font-size: 100%; margin-left: -.1em">E</sub>X-Dokuments
</h1>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Präambel &amp; Dokumentumgebung</h2>
<p style="text-indent: -1.3em">
<span class="emoji">👁</span> Ein mit LaTeX gesetztes Dokument besteht aus:
</p>
<ul>
<li>
<strong>Präambel:</strong> globale Einstellungen (Dokumentklasse, Kodierung, Sprache, Seitenformat, zusäzliche Pakete, …) und</li>
<li>
<strong>Dokumentumgebung:</strong> Inhalt des Dokuments.</li>
</ul>
<pre class="lang-tex hljs fragment"><code>\documentclass[ngerman]{article}
\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\usepackage[ngerman]{babel}
\begin{document}
Hallo, Welt!
\end{document}</code></pre>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-03/hallo-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-wide-content">
<div class="layout-content">
<h2>Dokumentenklasse</h2>
<pre class="lang-tex hljs"><code>\documentclass[&lt;parameter&gt;]{&lt;dokumentklasse&gt;}</code></pre>
<p>Konkret zum Beispiel</p>
<pre class="lang-tex hljs"><code>\documentclass[10pt,a5paper,landscape]{article}</code></pre>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Kodierung</h2>
<pre class="lang-tex hljs"><code>\usepackage[utf8]{inputenc}
\usepackage[t1]{fontenc}</code></pre>
<ul>
<li>Die Zeichenkodierung bestimmt, welche Zeichen verfügbar sind.</li>
<li>
<strong>ASCII</strong> enthält kaum Sonderzeichen wie deutsche Umlaute.</li>
<li>
<strong>UTF-8</strong> ist eine universelle Kodierung.</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Sprache</h2>
<pre class="lang-tex hljs"><code>\usepackage[ngerman]{babel}</code></pre>
<ul>
<li>Das Paket <strong><code>babel</code></strong> stellt sprachspezifische Informationen (z. B. Silbentrennung, Sonderzeichen, Wechsel zwischen Fonts, Übersetzung von Labels wie ›Kapitel‹, ›Inhaltsverzeichnis‹ oder ›Abbildung‹) bereit.</li>
<li>
<strong><code>ngerman</code></strong> steht für die neue deutsche Rechschreibung.</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Fließtext</h2>
<pre class="lang-tex hljs"><code>Fließtext kann direkt in den Quelltext ↲
geschrieben werden. ↲
Einfache Zeilenumbrüche ↲
werden dabei ignoriert, ↲
genau wie mehrere Leerzeichen. ↲
↲
Leerzeilen erzeugen einen neuen Absatz,↲
standardmäßig mit Einzug. ↲
Manuelle Zeilenumbrüche können mit ↲
zwei Backslashes erzwungen werden, ↲
haben in Fließtext aber eigentlich \\ ↲
nichts verloren.</code></pre>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-03/abs%C3%A4tze-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Kommentare</h2>
<p>Nach einem Prozentzeichen wird der Rest der Zeile vom Compiler ignoriert. Der Kommentartext erscheint also nicht im fertigen Dokument.</p>
<pre class="lang-tex hljs"><code>% Beginn Steckbrief
Name: Donald Knuth \\
Geburtsdatum: \\ % TODO: einfügen
Geburtsort: Milwaukee, Wisconsin
% Ende Steckbrief</code></pre>
<p>Tastenkombinationen: <kbd>Strg</kbd> + <kbd>T</kbd> und <kbd>Strg</kbd> + <kbd>U</kbd></p>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-02/kommentare-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2 data-category="Achtung!">Reservierte Zeichen</h2>
<p>Bestimmte Zeichen lösen in LaTeX Dinge aus:</p>
<p><code># $ % ^ &amp; _ { } ~ \</code></p>
<pre class="lang-tex hljs"><code>50% sind die Hälfte.</code></pre>
<p>Lösung: »<code>\</code>« voranstellen:</p>
<pre class="lang-tex hljs"><code>50\% sind die Hälfte.</code></pre>
<p>Funktioniert nicht mit »<code>\\</code>«, nutzt <code>\textbackslash</code> stattdessen.</p>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-03/reservierte-zeichen-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Abschnitte und Kapitel</h2>
<p>Texte werden durch Überschriften in Abschnitte und Kapitel unterteilt. Immer verfügbar:</p>
<pre class="lang-tex hljs"><code>\section{Ebene 1}
\subsection{Ebene 2}
\subsubsection{Ebene 3}
\paragraph{Ebene 4}
\subparagraph{Ebene 5}</code></pre>
<p>Je nach Dokumentenklasse zusätzlich:</p>
<pre class="lang-tex hljs"><code>\chapter{Kapitel}
\part{Teil}</code></pre>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-03/abschnitte-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-wide-content">
<div class="layout-content">
<h2>Titelei</h2>
<pre class="lang-tex hljs" data-source="title.tex"><code>\title{Die Welt der Trüffel}
\author{Fooboar Rüssel \and Fachschaft WIAI}
\date{\today}
\begin{document}
\maketitle
\end{document}</code></pre>
<ul>
<li>In der Präambel werden die Werte für die Einträge gespeichert.</li>
<li>Das Setzen des Titels erfolgt in der Dokumentumgebung mit dem Befehl <code>\maketitle</code>.</li>
<li>Die genaue Gestaltung hängt ab von der verwendeten Dokumentklasse.</li>
<li>Mehrere Autoren werden mit <code>\and</code> verbunden.</li>
<li>Wird kein Datum angegeben, wird per default das aktuelle Datum gesetzt. Ein abweichendes Datum kann mit <code>\date{}</code> definiert werden.</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Titelei</h2>
<pre class="lang-tex hljs" data-source="title.tex"><code>\documentclass[ngerman]{scrartcl}
\usepackage{babel}
\title{Die Welt der Trüffel}
\author{Fooboar Rüssel \and
Fachschaft WIAI}
\date{\today}
\begin{document}
\maketitle
\section{Trüffelsuche}
\subsection{Suche mit Schwein}
\subsection{Suche ohne Schwein}
Wer macht denn sowas?
\section{Trüffelrezepte}
Mein Lieblingsrezept
\end{document}</code></pre>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-03/titel-orig.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Verzeichnisse</h2>
<pre class="lang-tex hljs"><code>\tableofcontents % Inhaltsverzeichnis
\listoffigures % Abbildungsverzeichnis
\listoftables % Tabellenverzeichnis</code></pre>
<ul>
<li>Nummerierung erfolgt automatisch</li>
<li>Elemente, die nicht im Verzeichnis aufgeführt werden sollen, werden mit einem »<code>*</code>« versehen, also z. B. <code>\section*{}</code>.</li>
<li><strong>am besten zweimal kompilieren</strong></li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Inhaltsverzeichnis</h2>
<pre class="lang-tex hljs" data-source="title.tex"><code>\documentclass[ngerman]{scrartcl}
\usepackage{babel}
\begin{document}
\tableofcontents
\section{Trüffelsuche}
Der erste Abschnitt.
\subsection{Suche mit Schwein}
Ein Unterabschnitt.
\subsection{Suche ohne Schwein}
Ein weiterer Unterabschitt.
\subsubsection[But why?]
{Wer macht denn sowas?}
Unter-Unterabschnitt.
\section{Trüffelrezepte}
Mein Lieblingsrezept
\end{document}</code></pre>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-03/inhalt-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-wide-content">
<div class="layout-content">
<h2 data-category="Aufgabe" data-task="3">Dokument und Text gliedern</h2>
<ul>
<li>Öffnet die Datei <code>document-structure.tex</code>, die im Ordner <code>exercises/basic-document-structure</code> liegt.</li>
<li>Packt den gesamten Text in der Datei in eine <strong>Document</strong>-Umgebung und schreibt darüber folgende <strong>Präambel</strong>. Kompiliert die Datei.</li>
</ul>
<pre class="lang-tex hljs fragment"><code>\documentclass{scrartcl}
\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\usepackage[ngerman]{babel}</code></pre>
<ul>
<li>Wie ihr sehen könnt, sind in der Datei die Absätze im Dokument mit <code>\\</code> erstellt worden. Ersetzt diese durch richtige Absätze.</li>
<li>Zeit für etwas Struktur! Verwendet für die <strong>Überschriften</strong> die passenden LaTeX-Befehle (<code>\section</code> u. ä.).</li>
<li>Fügt anschließend ein <strong>Inhaltsverzeichnis</strong> in euer Dokument ein.</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-wide-content extra-content">
<div class="layout-content">
<h2 data-category="Extra">Dokumentenklassen</h2>
<ul>
<li>Natürlich gibt es auch andere Dokumentenklassen als <code>article</code>.</li>
<li>Je nachdem, welche Dokumentenklasse man verwendet, ändert sich das Layout der generierten PDF.</li>
<li>Die korrekt geschriebenen Dokumentenklassen richten sich nach US-amerikanischen Layout-Normen.</li>
<li>
<strong><code>src</code></strong>-Dokumentenklassen versuchen europäische Normen abzubilden.</li>
</ul>
<p>Folgende Dokumentenklassen stehen zur Verfügung:</p>
<ul>
<li>
<strong><code>scrartcl</code>, <code>article</code></strong> für kurze Dokumente</li>
<li>
<strong><code>scrreprt</code>, <code>report</code></strong> für lange Dokumente</li>
<li>
<strong><code>scrbook</code>, <code>book</code></strong> für Bücher</li>
<li>
<strong><code>beamer</code></strong> für Präsentationen</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-wide-content extra-content">
<div class="layout-content">
<h2 data-category="Extra">Sprachen</h2>
<p>Es können auch mehrere Sprachen im Dokument verwendet werden:</p>
<pre class="lang-tex hljs"><code>\usepackage[ngerman, swedish, ukrainian, greek, english]{babel}</code></pre>
<p>Umschalten zwischen Sprachen:</p>
<pre class="lang-tex hljs"><code>\selectlanguage{&lt;sprache a&gt;}
\selectlanguage{&lt;sprache b&gt;}</code></pre>
<p>Eingebetteter Text in anderer Sprache:</p>
<pre class="lang-tex hljs"><code>\selectlanguage{&lt;sprache a&gt;}
\foreignlanguage{&lt;sprache b&gt;}{Hier steht Text in Sprache B in einem Text in Sprache A}</code></pre>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview extra-content">
<div class="layout-content">
<h2 data-category="Extra">Sprachen – ein Beispiel</h2>
<pre class="lang-tex hljs"><code>\today
\selectlanguage{ngerman}
\today
\selectlanguage{swedish}
\today
\selectlanguage{ukrainian}
\today
\selectlanguage{greek}
\today
\selectlanguage{english}
\today</code></pre>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-03/languages-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview extra-content">
<div class="layout-content">
<h2 data-category="Extra">Überschriften und das Inhaltsverzeichnis</h2>
<p>Mit Sternchen fallen bei allen diesen Befehlen die Nummerierung und der Eintrag im Inhaltsverzeichnis weg:</p>
<pre class="lang-tex hljs"><code>\section*{Kein Verzeichniseintrag}</code></pre>
<p>Außerdem kann für das Inhaltsverzeichnis ein alternativer Titel angegeben werden:</p>
<pre class="lang-tex hljs"><code>\section[Titel im Verzeichnis]
{Kapitelüberschrift}</code></pre>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-03/abschnitte-anders-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Bevor wir fortfahren können …</h2>
<div class="box warning">
<p><strong>Kommentiert</strong> zuletzt die Präambel, die Dokumentenumgebung und das Inhaltsverzeichnis <strong>wieder aus</strong>.</p>
<p>Nur so kann eure Lösung auch ins Skript eingebunden werden (Schnelles Auskommentieren kann in TeXstudio mit dem Shortcut <kbd>Strg</kbd> + <kbd>T</kbd> erreicht werden).</p>
</div>
<p>Im nächsten Kapitel erklären wir, warum das notwendig ist.</p>
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>
<span class="chapter-number">4.</span>
Projektstruktur
</h1>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Zielsetzung</h2>
<p>Ein größeres LaTeX-Projekt anlegen und dabei …</p>
<ul>
<li>verhindern, dass LaTeX-Dokumente zu monströser Größe anwachsen <span class="emoji">👹</span>
</li>
<li>den Überblick über die Struktur eines Projekts behalten</li>
</ul>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-04/langes-dokument.jpg" style="padding: .2em; height: 100vh">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Hauptdatei <span class="emoji">👑</span>
</h2>
<ul>
<li>enthält Grundgerüst, Titel, Inhaltsverzeichnis etc.</li>
<li>bindet einzelne Kapitel ein mit<br>
<code>\input{pfad/zur/datei}</code>
</li>
</ul>
<pre class="lang-tex hljs" data-sourcefile="main.tex"><code>\documentclass{article}
\usepackage[ngerman]{babel}
\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\title{Ein Titel}
\begin{document}
\maketitle
\tableofcontents
\input{abschnitt1.tex}
\input{abschnitt2.tex}
\end{document}</code></pre>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-04/hauptdatei-orig.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Datei mit Teilabschnitt</h2>
<ul>
<li>enthält <strong>keine Präambel</strong>
</li>
<li>enthält <strong>kein</strong> <code>\begin{document}</code> und <code>\end{document}</code>
</li>
</ul>
<pre class="hljs lang-tex" data-sourcefile="part1.tex"><code>\section{Dies ist Abschnitt 1}
Hier ein Absatz zum
Inhalt von Abschnitt 1.
% …</code></pre>
<pre class="hljs lang-tex" data-sourcefile="part2.tex"><code>\section{Dies ist Abschnitt 2}
Hier ein Absatz zum
Inhalt von Abschnitt 2.
% …</code></pre>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-04/hauptdatei-teile-crop.svg" class="thin-padding">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2 data-category="Exkurs">Dateipfade angeben <span class="emoji">👣</span>
</h2>
<ul>
<li>wichtig für <code>\input{}</code> sowie später für das Einbinden von Bildern und anderen Medien</li>
<li>Datei- und Ordnerstruktur = Baumstruktur <span class="emoji">🌳</span>
</li>
<li>bei <code>\input{}</code> kann der Pfad zu einer Unterdatei relativ zur Hauptdatei angeben werden</li>
</ul>
<p data-category="Achtung!" class="fragment">
Bei LaTeX muss stets die <strong>Unix-Syntax</strong> für Pfadangaben verwendet werden. Pfadelemente werden durch einen Schrägstrich getrennt: <code>pfad/zur/datei</code>. Deshalb werden wir im Folgenden diese Schreibweise verwenden.
</p>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-04/tree-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2 data-category="Exkurs">Dateipfade angeben <span class="emoji">👣</span>
</h2>
<p data-category="Beispiel">
<code>main.tex</code> → <code>praeamble.tex</code>
</p>
<div class="fragment">
<p><code>./praeamle.tex</code></p>
<p>Der <strong>einfache Punkt »<code>.</code>«</strong> bezieht sich bei relativen Pfaden auf den aktuellen Ordner (hier: <code>latex-skript</code>). Er ist optional, es könnte also auch nur <code>praeamble.tex</code> geschrieben werden.</p>
</div>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-04/relative-path-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2 data-category="Exkurs">Dateipfade angeben <span class="emoji">👣</span>
</h2>
<p data-category="Beispiel">
<code>main.tex</code> → <code>basic-document-structure.tex</code> (in einem Unterordner)
</p>
<div class="fragment">
<p><code>./content/basic-document-structure.tex</code></p>
</div>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-04/relative-path-subdir-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2 data-category="Exkurs">Dateipfade angeben <span class="emoji">👣</span>
</h2>
<p data-category="Beispiel">
<code>basic-document-structure.tex</code> → <code>graphics.raw.tex</code> (aus einem Unterordner in einen anderen)
</p>
<div class="fragment">
<p><code>../exercises/graphics/graphics.raw.tex</code></p>
<p><strong>Zwei Punkte »<code>..</code>«</strong> bezeichnen den Elternordner des aktuellen Ordners (hier: <code>latex-skript</code>, den Elternordner des Ordners <code>content</code>).</p>
</div>
<div class="fragment">
<p data-category="Achtung!">
Leerzeichen in Dateipfaden müssen durch einen Backslash markiert werden: <code>pfad/zu/einer\␣datei</code>.
</p>
</div>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-04/relative-path-superdir-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2 data-category="Exkurs">Dateipfade angeben <span class="emoji">👣</span>
</h2>
<p data-category="Beispiel">
<code>task.tex</code> → <code>graphics.raw.tex</code> (wenn <code>task.tex</code> von <code>main.tex</code> importiert wird)
</p>
<div class="fragment">
<pre>./exercises/graphics/graphics.raw.tex</pre>
<p data-category="Achtung!">
Pfade sind immer relativ zum Wurzelelement, auch wenn dieses noch andere Dateien einbindet, die wiederum andere Dateien referenzieren.
</p>
</div>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-04/relative-path-transitive-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2 data-category="Demo">Kompilieren des Projekts</h2>
<ul>
<li>
<strong>Nur die Hauptdatei</strong> wird kompiliert, um das fertige PDF-Dokument zu erhalten.</li>
<li class="fragment">Fehlermeldungen enthalten dann Verweis, in welcher Unterdatei sie aufgetreten sind.</li>
<li class="fragment">Die Unterdateien können wegen ihrer fehlenden Präambel nicht selbstständig kompiliert werden.</li>
</ul>
<div class="box warning fragment">
<p>Von nun an kompilieren wir die Datei <code>main.tex</code> im Wurzelverzeichnis des Projektordners. Klickt hierzu in TeXstudio mit der rechten Maustaste auf die Datei und wählt <strong>„Explizit als Root-Dokument setzen“</strong>. Anschließend könnt ihr wie gewohnt kompilieren.</p>
</div>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2 data-category="Aufgabe" data-task="4">Ein strukturiertes Projekt</h2>
<p>Im Ordner <code>exercises/project-structure</code> findet ihr eine Datei namens <code>main.tex</code>.</p>
<ul>
<li>Erstellt neue Dateien (z. B. <code>section1.tex</code> und <code>section2.tex</code> und verschiebt die Abschnitte in diese.</li>
<li>Importiert die Fragmente anschließend mit Hilfe des <code>\input</code>-Befehls.</li>
<li>Lagert die Präambel auf demselben Weg in eine eigene Datei aus.</li>
<li>Schaut euch abschließend die Gesamtstruktur unseres Projektarchivs an, beginnend mit <code>main.tex</code> im Wurzelverzeichnis. Wie binden wir hier die einzelnen Abschnitte ein?</li>
</ul>
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>
<span class="chapter-number">5.</span>
Sonderzeichen
</h1>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Leerzeichen</h2>
<ul>
<li>Nutzt schmale Leerzeichen (<code>\,</code>) und geschützte Leerzeichen (<code>~</code>) an den geeigneten Stellen.</li>
</ul>
<pre class="hljs lang-tex"><code>Schmale Leerzeichen werden z.\,B. in
Abkürzungen und zwischen Zahlen und
Einheiten verwendet: 10\,s.
Normalbreite, aber geschützte
Leerzeichen können u.\,a.
dabei helfen, Titel und Namen in
einer Zeile zu halten: Dr.~Fooboar.</code></pre>
<ul>
<li class="fragment">Nutzt French Spacing (<code>\frenchspacing</code>), um riesige Freiräume nach Satzzeichen zu verhindern.</li>
</ul>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-05/leerzeichen-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Striche</h2>
<table>
<tr>
<th>
</th>
<th>
Name
</th>
<th>
Verwendung
</th>
<th>
Code
</th>
</tr>
<tr>
<td>
-
</td>
<td>
Bindestrich <em>(hypen)</em>
</td>
<td>
LaTeX-Wochenende
</td>
<td>
<code>-</code>
</td>
</tr>
<tr>
<td>
–
</td>
<td>
Halbgeviert­strich<br><em>(en dash)</em>
</td>
<td>
als Gedankenstrich – oder als Bis-Strich: 10 – 12 Uhr.
</td>
<td>
<code>--</code>
</td>
</tr>
<tr>
<td>
—
</td>
<td>
Geviertstrich<br><em>(em dash)</em>
</td>
<td>
a dash — mostly in American English
</td>
<td>
<code>---</code>
</td>
</tr>
</table>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-05/striche-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Zitate</h2>
<p>Das Paket <code>csquotes</code> stellt u. a. den Befehl <code>\enquote</code> zur Verfügung:</p>
<pre class="lang-tex hljs"><code>\enquote{Ein \enquote{verschachteltes}
Zitat.}</code></pre>
<p>Wenn das Paket mit <code>autostyle=true</code> eingebunden wird, werden bei fremdsprachigen Zitaten die entsprechenden Anführungszeichen verwendet:</p>
<pre class="lang-tex hljs"><code>\foreignquote{english}{An English
quote.}</code></pre>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-05/zitate-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Sonderzeichen &amp; Symbole</h2>
<h3 id="detexify-to-the-rescue">Detexify to the rescue! <span class="emoji">⛑️</span>
</h3>
<ul>
<li>Ausführliche Liste an verwendbaren Symbolen:<br>
<a href="http://tug.ctan.org/info/symbols/comprehensive/symbols-a4.pdf">PDF auf der CTAN-Website</a>
</li>
<li>Symbole malen und erkennen lassen:<br>
<a href="http://detexify.kirelabs.org/classify.html">Detexify</a>
</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2 data-category="Aufgabe" data-task="5">Sonderzeichen einfügen</h2>
<div class="box warning">
<p>Kompiliert von nun an immer die Datei <code>main.tex</code>, um eure Änderungen im Skript zu sehen (in diesem Fall im Abschnitt „Übung 5“).</p>
</div>
<ul>
<li>Ersetzt die Leerzeichen innerhalb der Abkürzungen in <code>exercises/special-characters.tex</code> durch <strong>schmale Leerzeichen</strong>.</li>
<li>Die Bindestriche bei den Öffnungszeiten der ERBA sollen durch <strong>Halbgeviertstriche</strong> ersetzt werden, optional mit schmalen Leerzeichen außenrum.</li>
<li>Nutzt den Befehl <code>\enquote</code>, um die Wörter <em>Studi-Ticket</em> und <em>Studi-Karte</em> in <strong>Anführungszeichen</strong> zu setzen.</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview extra-content">
<div class="layout-content">
<h2 data-category="Extra">English spacing</h2>
<p>In englischsprachigen Dokumenten verwendet LaTeX das traditionelle <em>English spacing,</em> also doppelte Leerzeichen nach dem Satzende.</p>
<p>Das kann mit <code>\frenchspacing</code> vor dem ersten Absatz verhindert werden. <code>\nonfrenchspacing</code> schaltet wieder zurück.</p>
<p>Bei <em>English spacing</em> versucht LaTeX, nach Abkürzungen trotzdem normale Wortzwischenräume zu setzen. Das sollte aber kontrolliert werden. Eingreifen können wir mit</p>
<ul>
<li>erzwungenen Wortzwischenräumen: <code>.\␣</code>
</li>
<li>erzwungenen Satzenden: <code>\@.␣</code>
</li>
</ul>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-05/french-spacing-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview extra-content">
<div class="layout-content">
<h2 data-category="Extra">Silbentrennung</h2>
<p>LaTeX trennt Wörter im Normalfall automatisch richtig, wenn die richtige Sprache konfiguriert ist. Manchmal muss aber auch manuell eingegriffen werden.</p>
<table>
<tr>
<td>
Ausschließliche Trennung
</td>
<td>
<code>\-</code>
</td>
</tr>
<tr>
<td>
Zusätzliche Trennstelle
</td>
<td>
<code>"-</code>
</td>
</tr>
<tr>
<td>
Bindestrich (verbietet andere Trennstellen)
</td>
<td>
<code>-</code>
</td>
</tr>
<tr>
<td>
Bindestrich (erlaubt andere Trennstellen)
</td>
<td>
<code>"=</code>
</td>
</tr>
<tr>
<td>
Trennstelle ohne Strich
</td>
<td>
<code>""</code>
</td>
</tr>
<tr>
<td>
Strich ohne Trennstelle
</td>
<td>
<code>"~</code>
</td>
</tr>
</table>
<p data-category="Achtung!">
Einige der Codes funktionieren nur mit eingebundenem <code>babel</code>-Paket.
</p>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-05/silbentrennung-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only extra-content">
<div class="layout-content">
<h2 data-category="Extra">Anführungszeichen</h2>
<table>
<tr>
<th>
Sprache
</th>
<th style="text-align: center;">
Befehl
</th>
<th style="text-align: center;">
Ergebnis
</th>
</tr>
<tr>
<td>
Deutsch
</td>
<td style="text-align: center;">
<code>\glqq … \grqq</code>
</td>
<td style="text-align: center;">
„ … “
</td>
</tr>
<tr>
<td>
 2. Ebene
</td>
<td style="text-align: center;">
<code>\glq … \grq</code>
</td>
<td style="text-align: center;">
‚ … ‘
</td>
</tr>
<tr>
<td>
Deutsch altern.
</td>
<td style="text-align: center;">
<code>\frqq … \flqq</code>
</td>
<td style="text-align: center;">
» … «
</td>
</tr>
<tr>
<td>
 2. Ebene
</td>
<td style="text-align: center;">
<code>\frq … \flq</code>
</td>
<td style="text-align: center;">
› … ‹
</td>
</tr>
<tr>
<td>
Englisch (A. E.)
</td>
<td style="text-align: center;">
<code>``…''</code>
</td>
<td style="text-align: center;">
“ … ”
</td>
</tr>
<tr>
<td>
 2. Ebene
</td>
<td style="text-align: center;">
<code> `…' </code>
</td>
<td style="text-align: center;">
‘ … ’
</td>
</tr>
<tr>
<td>
Englisch (B. E.)
</td>
<td style="text-align: center;">
<code> `…' </code>
</td>
<td style="text-align: center;">
‘ … ’
</td>
</tr>
<tr>
<td>
 2. Ebene
</td>
<td style="text-align: center;">
<code>``…''</code>
</td>
<td style="text-align: center;">
“ … ”
</td>
</tr>
</table>
<p>Für andere Sprachen können andere Regeln gelten, meistens aber mit den gleichen Zeichen, nur in anderer Zusammensetzung.</p>
</div>
</div>
</article>
<article>
<div class="layout-content-only extra-content">
<div class="layout-content">
<h2 data-category="Extra">Diakritika</h2>
<p>Buchstaben mit Diakritika können entweder direkt über die Tastatur eingegeben werden oder über Escape-Codes:</p>
<table>
<tr>
<td>
<code>\`{o}</code>
</td>
<td>
ò  
</td>
<td>
<code>\c{c}</code>
</td>
<td>
ç  
</td>
<td>
<code>\d{u}</code>
</td>
<td>
ụ
</td>
</tr>
<tr>
<td>
<code>\'{o}</code>
</td>
<td>
ó
</td>
<td>
<code>\k{a}</code>
</td>
<td>
ą
</td>
<td>
<code>\r{a}</code>
</td>
<td>
å
</td>
</tr>
<tr>
<td>
<code>\^{o}</code>
</td>
<td>
ô
</td>
<td>
<code>\l{}</code>
</td>
<td>
ł
</td>
<td>
<code>\u{o}</code>
</td>
<td>
ŏ
</td>
</tr>
<tr>
<td>
<code>\"{o}</code>
</td>
<td>
ö
</td>
<td>
<code>\={o}</code>
</td>
<td>
ō
</td>
<td>
<code>\v{s}</code>
</td>
<td>
š
</td>
</tr>
<tr>
<td>
<code>\H{o}</code>
</td>
<td>
ő
</td>
<td>
<code>\b{o}</code>
</td>
<td>
o
</td>
<td>
<code>\t{oo}</code>
</td>
<td>
o͡o
</td>
</tr>
<tr>
<td>
<code>\~{o}</code>
</td>
<td>
õ
</td>
<td>
<code>\.{o}</code>
</td>
<td>
ȯ
</td>
<td>
<code>\o</code>
</td>
<td>
ø
</td>
</tr>
</table>
</div>
</div>
</article>
<article>
<div class="layout-content-only extra-content">
<div class="layout-content">
<h2 data-category="Extra">Sonderzeichen &amp; Symbole</h2>
<p>Auch andere Sonderzeichen können entweder direkt eingegeben werden oder per Befehl:</p>
<table>
<tr>
<td style="text-align: center;">
¿
</td>
<td>
<code>?`</code>
</td>
<td style="text-align: center;">
¡
</td>
<td>
<code>!`</code>
</td>
</tr>
<tr>
<td style="text-align: center;">
^
</td>
<td>
<code>\textasciicircum</code>
</td>
<td style="text-align: center;">
~
</td>
<td>
<code>\textasciitilde</code>
</td>
</tr>
<tr>
<td style="text-align: center;">
＊
</td>
<td>
<code>\textasteriskcentered</code>
</td>
<td style="text-align: center;">
\
</td>
<td>
<code>\textbackslash</code>
</td>
</tr>
<tr>
<td style="text-align: center;">
|
</td>
<td>
<code>\textbar</code>
</td>
<td style="text-align: center;">
∙
</td>
<td>
<code>\textbullet</code>
</td>
</tr>
<tr>
<td style="text-align: center;">
ⓒ
</td>
<td>
<code>\textcopyright</code>
</td>
<td style="text-align: center;">
†
</td>
<td>
<code>\textdagger</code>
</td>
</tr>
<tr>
<td style="text-align: center;">
‡
</td>
<td>
<code>\textdaggerdbl</code>
</td>
<td style="text-align: center;">
…
</td>
<td>
<code>\textellipsis</code>
</td>
</tr>
<tr>
<td style="text-align: center;">
&lt;
</td>
<td>
<code>\textless</code>
</td>
<td style="text-align: center;">
&gt;
</td>
<td>
<code>\textgreater</code>
</td>
</tr>
<tr>
<td style="text-align: center;">
‰
</td>
<td>
<code>\textperthousand</code>
</td>
<td style="text-align: center;">
§
</td>
<td>
<code>\textsection</code>
</td>
</tr>
</table>
<p>… und so ziemlich alles andere.</p>
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>
<span class="chapter-number">6.</span>
Text­auszeichnung
</h1>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Semantische und optische Hervorhebungen</h2>
<p>Semantische Hervorhebungen durch <code>\emph{}</code>:</p>
<pre class="lang-tex hljs"><code>\emph{Super wichtiger Text \emph{mit noch
wichtigerem Text} im Text.}</code></pre>
<p>Optische Auszeichnungsmöglichkeiten:</p>
<table>
<tr>
<th>
Bezeichnung
</th>
<th>
Befehl
</th>
</tr>
<tr>
<td>
fett (bold face)
</td>
<td>
<code>\textbf{wichtig}</code>
</td>
</tr>
<tr>
<td>
kursiv (italics)
</td>
<td>
<code>\textit{wichtig}</code>
</td>
</tr>
<tr>
<td>
Kapitälchen (small caps)
</td>
<td>
<code>\textsc{wichtig}</code>
</td>
</tr>
<tr>
<td>
dicktengleich (teletype)
</td>
<td>
<code>\texttt{wichtig}</code>
</td>
</tr>
<tr>
<td>
unterstrichen
</td>
<td>
<code>\underline{wichtig}</code>
</td>
</tr>
</table>
</div>
<div class="layout-preview">
<img class="thin-padding" src="svg/chapter-06/hervorhebungen-crop.svg" style="margin-bottom: 0; margin-top: 100px"> <img class="thin-padding" data-src="svg/chapter-06/optische-auszeichnungen-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Better Call LaTeX!</h2>
<div class="box warning">
<p><strong>Ein gutgemeinter Rat</strong></p>
<p>Konsistentes Aussehen über das gesamte Dokument hinweg gewünscht?</p>
<p>Voreinstellungen von LaTeX zur Schriftgröße verschiedener Textelemente (Titel, Fließtext, Fußnoten) vertrauen!</p>
<p>Das heißt im Umkehrschluss: Möglichst wenig manuell an Schriftgrößen herumschrauben.</p>
</div>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>URLs</h2>
<p>Das Paket <code>hyperref</code> stellt den Befehl <code>\url{}</code> bereit, der URLs</p>
<ul>
<li>zeichentreu</li>
<li>mit bindestrichlosen Umbrüchen</li>
<li>mit gut unterscheidbaren Zeichen</li>
<li>im PDF anklickbar</li>
</ul>
<p>wiedergibt.</p>
<pre class="lang-tex hljs"><code>\url{https://www.latex-project.org/}</code></pre>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-06/url-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2 data-category="Aufgabe" data-task="6">Text hervorheben</h2>
<ul>
<li>
<strong>Betont</strong> in der Datei <code>exercises/text-markup/markup.tex</code> die Wörter <em>Recursion</em> und <em>recursive</em> mit <code>\emph{…}</code>.</li>
<li>Macht die <strong>URL</strong> im Text anklickbar.</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview extra-content">
<div class="layout-content">
<h2 data-category="Extra">Schriftgröße</h2>
<h3 id="voreingestellte-schriftgrößen">Voreingestellte Schriftgrößen</h3>
<pre class="hljs lang-tex"><code>{\&lt;fontsize&gt; ein Textabschnitt}</code></pre>
<p>Schriftgrößen relativ zu <code>normalsize</code>:</p>
<pre class="hljs lang-tex"><code>{\tiny Wenn}
{\footnotesize du}
{\small das}
{\normalsize lesen}
{\large kannst,}
{\Large brauchst}
{\LARGE du}
{\huge keine}
{\Huge Brille.}</code></pre>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-06/schriftgroesse-optiker-crop.svg" class="thin-padding">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview extra-content">
<div class="layout-content">
<h2 data-category="Extra">Flattersatz</h2>
<p>Standardmäßig setzt LaTeX Fließtext im Blocksatz, aber auch Flattersatz ist möglich.</p>
<pre class="lang-tex hljs"><code>\raggedright … \raggedleft …
\centering …</code></pre>
<p>Alternativ einsetzbare Umgebungen:</p>
<pre class="lang-tex hljs"><code>\begin{flushleft} Text \end{flushleft}
\begin{flushright} Text \end{flushright}
\begin{center} Text \end{center}</code></pre>
<p data-category="Achtung!">
Guter Flattersatz ist noch schwieriger als guter Blocksatz, daher lieber vermeiden!
</p>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-07/ausrichtung-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview extra-content">
<div class="layout-content">
<h2 data-category="Extra">Einzüge und Abstände</h2>
<ul>
<li>Absätze werden standardmäßig durch Erstzeileneinzüge (<code>\parindent</code>) verdeutlicht</li>
<li>Stattdessen (!) können auch Abstände (<code>\parskip</code>) verwendet werden</li>
<li>Die beiden Parameter sind beliebig einstellbar:</li>
</ul>
<pre class="lang-tex hljs"><code>\setlength{\parindent}{0pt}
\setlength{\parskip}{1em
plus .5em % erlaubte Dehnung
minus .5em % erlaubte Stauchung
}</code></pre>
<ul>
<li>Mit <code>\noindent</code> kann für nur einen Absatz der Einzug abgeschaltet werden</li>
</ul>
</div>
<div class="layout-preview">
<img data-src="./svg/chapter-07/einz%C3%BCge-abst%C3%A4nde-orig.svg">
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>
<span class="chapter-number">7.</span>
Aufzählungen
</h1>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Ungeordnete Listen 📜</h2>
<pre class="lang-tex hljs"><code>\begin{itemize}
\item Nudelplatten
\item Passierte Tomaten, % …
\item Oregano, Basilikum, % …
\item Mozzarella
\item Mehl
\item Milch
\end{itemize}</code></pre>
<p>Die einzelnen Stichpunkte werden in jeder Aufzählungsumgebung durch den Befehl <code>\item</code> gekennzeichnet.</p>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-08/itemize-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Geordnete Listen und Definitionslisten</h2>
<pre class="lang-tex hljs"><code>\begin{enumerate}
\item die Zwiebeln in einem Topf % …
\item passierte Tomaten, Möhren % …
\item mit Kräutern und Gewürzen % …
% \item …
\end{enumerate}</code></pre>
<pre class="lang-tex hljs fragment"><code>\begin{description}
\item [Béchamelsauce] Béchamel % …
\item [Lasagne] Als Lasagne % …
\end{description}</code></pre>
</div>
<div class="layout-preview">
<img class="thin-padding" src="svg/chapter-08/enumerate-crop.svg" style="margin-bottom: 0;"> <img class="thin-padding fragment" data-src="svg/chapter-08/definition-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Verschachtelte Listen</h2>
<pre class="lang-tex hljs"><code>\begin{itemize}
% …
\item Gemüse \begin{itemize}
\item Passierte Tomaten
\item Möhren
\end{itemize}
\item Kräuter \begin{enumerate}
\item Oregano
\item Basilikum
\end{enumerate}
% …
\end{itemize}</code></pre>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-08/nested-lists-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2 data-category="Aufgabe" data-task="7">Aufzählungen einfügen</h2>
<ul>
<li>Formatiert das Rezept in <code>lists.tex</code> im Ordner <code>exercises/lists</code> als <strong>ungeordnete Liste</strong> mit den Elementen <em>Ingredients</em> und <em>Instructions</em>. Nutzt dafür den Befehl <code>\itemize</code>.</li>
<li>Benutzt innerhalb dieser Liste für die Zutaten eine <strong>ungeordnete Liste</strong> und für die Arbeitsschritte eine <strong>geordnete Liste</strong>.</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview extra-content">
<div class="layout-content">
<h2 data-category="Extra">Kompakte Listen</h2>
<p>Das Paket <code>paralist</code> stellt Aufzählungen ohne riesige Zwischenräume zur Verfügung.</p>
<pre class="lang-tex hljs"><code>\section{Zutaten}
\begin{compactitem}
% \item …
\end{compactitem}
\section{Zubereitung}
\begin{compactenum}
% \item …
\end{compactenum}
\section{Glossar}
\begin{compactdesc}
% \item …
\end{compactdesc}</code></pre>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-08/compact-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview extra-content">
<div class="layout-content">
<h2 data-category="Extra">Aufzählungen im Absatz</h2>
<p>Neben den kompakten Listen stellt <code>paralist</code> auch Listen zur Verfügung, die in einem Absatz stehen.</p>
<pre class="lang-tex hljs"><code>Folgende Kräuter sind für % …
\begin{inparaitem}
\item Liebstöckel
\item Petersilie
\item Schnittlauch
\end{inparaitem}</code></pre>
<p>Natürlich gibt es auch hier ein Pendant namens <code>inparaenum</code> für geordnete Listen.</p>
</div>
<div class="layout-preview">
<img class="thin-padding" data-src="svg/chapter-08/paralist-extended-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview extra-content">
<div class="layout-content">
<h2 data-category="Extra">Aufzählungsarten</h2>
<p>Die Art der Aufzählung lässt sich über den optionalen Parameter <code>label</code> ändern. Hierfür ist das Paket <code>enumitem</code> notwendig.</p>
<pre class="lang-tex hljs"><code>% Römische Zahlen
\begin{enumerate}[label=\roman*]
% …
% Arabische Zahlen
\begin{enumerate}[label=\arabic*]
% …
% Alphabetisch
\begin{enumerate}[label=\alph*]
% …</code></pre>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-08/list-style-types-crop.svg">
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>
<span class="chapter-number">8.</span>
Mathematische Formeln
</h1>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Formel-Umgebungen 🧮</h2>
<pre class="lang-tex hljs"><code>$2 \sqrt{\frac{\pi^2}{3} \cdot c_2}$</code></pre>
<p>Mathematische Formeln können <strong>nur im sogenannten Mathmode</strong> gesetzt werden, der inline durch zwei Dollarzeichen aktiviert wird. Außerdem gibt es eine Blockumgebung:</p>
<pre class="lang-tex hljs"><code>\begin{equation}
2 \sqrt{\frac{\pi^2}{3} \cdot c_2}
\end{equation}</code></pre>
<p>Pakete: <code>amsmath</code>, <code>amsthm</code>, <code>amssymb</code>, <code>mathtools</code></p>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-09/simple-maths-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Einige Beispiele</h2>
<table>
<tr>
<th>
Quelltext
</th>
<th>
Ergebnis
</th>
</tr>
<tr class="fragment">
<td>
<code>\sum_{i=1}^{n}x^2</code>
</td>
<td>
<span class="math inline">\(\sum_{i=1}^{n} x^2\)</span>
</td>
</tr>
<tr class="fragment">
<td>
<code>12 \leq 4 x^2 + 13</code>
</td>
<td>
<span class="math inline">\(12 \leq 4 x^2 + 13\)</span>
</td>
</tr>
<tr class="fragment">
<td>
<code>{n \choose k}</code>
</td>
<td>
<span class="math inline">\({n \choose k}\)</span>
</td>
</tr>
</table>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Ausrichtung von mehreren Gleichungen</h2>
<p>Die Umgebung <code>align</code> erlaubt es, Gleichungen zum Beispiel am › = ‹ auszurichten.</p>
<pre class="lang-tex hljs"><code>\begin{align}
13 \cdot (4a - 3)^2 &amp;= 13 … \\
&amp;= 208a^2 - 312a + 117
\end{align}</code></pre>
<ul>
<li class="fragment">Ausgerichtet wird am ›<code>&amp;</code>‹-Zeichen.</li>
<li class="fragment">Zeilenumbrüche werden mit ›<code>\\</code>‹ markiert.</li>
<li class="fragment">Die Nummerierung kann bei <code>align</code> und <code>equation</code> durch durch ein Sternchen nach dem Umgebungsnamen (z. B. <code>\begin{align*}</code> und <code>\end{align*}</code>) unterdrückt werden.</li>
</ul>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-09/alignment-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2 data-category="Aufgabe" data-task="8a" class="task-without-number">
Formeln setzen
</h2>
<p>Setzt die folgenden Formeln in der Datei <code>exercises/maths/math-formulas.tex</code>.</p>
<table>
<colgroup>
<col style="width: 52%">
<col style="width: 47%">
</colgroup>
<thead>
<tr class="header">
<th>Bedeutung</th>
<th>Ergebnis</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>Fallbeschleunigung (Deutschland)</td>
<td><span class="math inline">\(9,81\,\frac{m}{s^2}\)</span></td>
</tr>
<tr class="even">
<td>pq-Formel</td>
<td><span class="math inline">\(x_{1,2} = - \frac{p}{2} \pm \sqrt{\left(\frac{p}{2}\right)^2 - q}\)</span></td>
</tr>
<tr class="odd">
<td>Mitternachtsformel</td>
<td><span class="math inline">\(x_{1,2} = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}\)</span></td>
</tr>
<tr class="even">
<td>Catalansche Zahlen</td>
<td><span class="math inline">\(C_n = \frac{1}{n+1} {2n \choose n} = \frac{(2n)!}{(n+1)!n!}\)</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2 data-category="Aufgabe" data-task="8b" class="task-without-number">
Formeln setzen
</h2>
<p>Setzt die folgenden Formeln in der Datei <code>exercises/maths/math-formulas.tex</code>.</p>
<table>
<colgroup>
<col style="width: 52%">
<col style="width: 47%">
</colgroup>
<thead>
<tr class="header">
<th>Bedeutung</th>
<th>Ergebnis</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>Definition der Fakultät</td>
<td><span class="math inline">\(n! = \prod_{i=1}^{n} i\)</span></td>
</tr>
<tr class="even">
<td>Menge aller ungeraden natürlichen Zahlen</td>
<td><span class="math inline">\(\{ x \mid x \in \mathbb{N}, \mathrm{ungerade}(x) \}\)</span></td>
</tr>
<tr class="odd">
<td>Elimination <span class="math inline">\(\neg\exists x\)</span>
</td>
<td><span class="math inline">\(\neg\exists x . p(x) \Leftrightarrow \forall x . \neg p(x)\)</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</article>
<article>
<div class="layout-content-only extra-content">
<div class="layout-content">
<h2 data-category="Extra">Weitere Beispiele</h2>
<table>
<tr>
<th>
Quelltext
</th>
<th>
Ergebnis
</th>
</tr>
<tr>
<td>
<code>(x)</code>, <code>[x]</code>, <code>\lbrace x \rbrace</code>, <code>\lvert x \rvert</code>
</td>
<td>
<span class="math inline">\((x), [x], \lbrace x\rbrace, \lvert x\rvert\)</span>
</td>
</tr>
<tr>
<td>
<code>\exists</code>, <code>\forall</code>, <code>\in</code>, <br><code>\notin</code>, <code>\infty</code>
</td>
<td>
<span class="math inline">\(\exists,\forall,\in,\notin,\infty\)</span>
</td>
</tr>
<tr>
<td>
<code>\alpha</code>, <code>\beta</code>, <code>\Gamma</code>, <br><code>\Delta</code>, <code>\varepsilon</code>, <code>\pi</code>
</td>
<td>
<span class="math inline">\(\alpha, \beta, \Gamma, \Delta, \varepsilon, \pi\)</span>
</td>
</tr>
<tr>
<td>
<code>\rightarrow</code>, <code>\leftarrow</code>, <code>\Rightarrow</code>, <code>\Leftarrow</code>, <code>\Leftrightarrow</code>
</td>
<td>
<span class="math inline">\(\rightarrow, \leftarrow, \Rightarrow, \Leftarrow, \Leftrightarrow\)</span>
</td>
</tr>
<tr>
<td>
<code>(A \cup B) \cap C</code>
</td>
<td>
<span class="math inline">\((A \cup B) \cap C\)</span>
</td>
</tr>
<tr>
<td>
<code>(A \lor B) \land C</code>
</td>
<td>
<span class="math inline">\((A \lor B) \land C\)</span>
</td>
</tr>
<tr>
<td>
<code>(A \cdot B) \times C</code>
</td>
<td>
<span class="math inline">\((A \cdot B) \times C\)</span>
</td>
</tr>
</table>
</div>
</div>
</article>
<article>
<div class="layout-content-only extra-content">
<div class="layout-content">
<h2 data-category="Extra">Mitwachsende Klammern</h2>
<table>
<tr>
<th>
Quelltext
</th>
<th>
Ergebnis
</th>
</tr>
<tr>
<td>
<code>\left( \frac{1}{2} \right)</code>
</td>
<td>
<span class="math inline">\(\left( \frac{1}{2} \right)\)</span>
</td>
</tr>
<tr>
<td>
<code>\left[ \frac{1}{2} \right]</code>
</td>
<td>
<span class="math inline">\(\left[ \frac{1}{2} \right]\)</span>
</td>
</tr>
<tr>
<td>
<code>\left\lbrace \frac{1}{2} \right\rbrace</code>
</td>
<td>
<span class="math inline">\(\left\lbrace \frac{1}{2} \right\rbrace\)</span>
</td>
</tr>
</table>
<pre class="lang-tex hljs"><code>$4 \cdot \left( \frac{1}{2} % …</code></pre>
<p style="text-align: center;">
<span class="math inline">\(4 \cdot \left(\frac{1}{2} +\frac{3}{ 12 \cdot \left( 2 + \frac{1}{86 \cdot \left(\frac{1}{2} + 24 \right)} \right)} \right)\)</span>
</p>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview extra-content">
<div class="layout-content">
<h2 data-category="Extra">Darstellung von Grenzen</h2>
<p>Mit dem Befehl <code>\limits</code> lassen sich die Grenzen von Integralen unter und über dem Integralzeichen darstellen. Bei Summen, Produkten und Grenzwerten geschieht das automatisch.</p>
<pre class="lang-tex hljs"><code>\sum_{i=1}^{n^2}(x+2)
\prod_{j=1}^{100}(3 \cdot x)
\lim_{x \rightarrow \infty}(14x^3 - 12)
\int\limits_{-12}^{4}(14x^3 - 12)</code></pre>
<p data-category="Achtung!">
Der Einsatz von <code>\limits</code> sollte im Fließtext vermieden werden.
</p>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-09/limits-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only extra-content">
<div class="layout-content">
<h2 data-category="Extra">Mengenschreibweise</h2>
<p>Manchmal ist es notwendig, im Zusammenhang mit der Mengenschreibweise Prädikate unter Verwendung von textuellen Beschreibungen oder längeren Funktionsnamen zu definieren.</p>
<p>Für diesen Fall gibt es den Befehl <code>\mathrm{}</code>.</p>
<p style="text-align: center;">
<span class="math inline">\(\left\lbrace x \mid tiefe(x) \geq 20\right\rbrace\)</span>
</p>
<p style="text-align: center;">
<span class="math inline">\(\left\lbrace x \mid \mathrm{tiefe}(x) \geq 20\right\rbrace\)</span>
</p>
<pre class="lang-tex hljs"><code>$\left\lbrace x \mid \mathrm{tiefe}(x) …</code></pre>
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>
<span class="chapter-number">9.</span>
Grafiken
</h1>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Grafiken abbilden <span class="emoji">🖼️</span>
</h2>
<p>Um Grafiken darzustellen, muss das Paket <code>graphicx</code> eingebunden werden.</p>
<pre class="lang-tex hljs"><code>\begin{figure}
\includegraphics{&lt;dateipfad&gt;}
\caption[&lt;kurztitel (abbildungsver-
zeichnis)&gt;]{&lt;bildunterschrift&gt;}
\end{figure}</code></pre>
<p>Bildgröße angeben:</p>
<pre class="lang-tex hljs"><code>\includegraphics[width=0.5\textwidth,
height=5cm]{&lt;dateipfad&gt;}</code></pre>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Positionierung auf der Seite</h2>
<pre class="lang-tex hljs"><code>\begin{figure}[&lt;positionskürzel&gt;]</code></pre>
<p>LaTeX positioniert Grafiken automatisch. Durch Kürzel können wir unsere Präferenzen (auch in Kombination) angeben.</p>
<table>
<tr>
<th style="min-width:4em">
Kürzel
</th>
<th>
Position
</th>
</tr>
<tr class="fragment">
<td>
h
</td>
<td>
hier, wenn es dir recht ist
</td>
</tr>
<tr class="fragment">
<td>
t
</td>
<td>
oberer Seitenrand (top)
</td>
</tr>
<tr class="fragment">
<td>
b
</td>
<td>
unterer Seitenrand (bottom)
</td>
</tr>
<tr class="fragment">
<td>
p
</td>
<td>
auf einer eigenen Seite (page)
</td>
</tr>
<tr class="fragment">
<td>
H
</td>
<td>
Hier, verdammt noch mal! <br>(benötigt Paket <code>float</code>)
</td>
</tr>
</table>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Zentrierte Anordnung</h2>
<pre class="lang-tex hljs"><code>\begin{figure}[&lt;position&gt;]
\begin{center}
\includegraphics{&lt;dateipfad&gt;}
\end{center}
\end{figure}</code></pre>
<p>Alternativ:</p>
<pre class="lang-tex hljs"><code>\begin{figure}[&lt;position&gt;]
\centering
\includegraphics{&lt;dateipfad&gt;}
\end{figure}</code></pre>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2 data-category="Aufgabe" data-task="9">Grafiken einfügen</h2>
<ul>
<li>Im Ordner <code>exercises/graphics</code> findet ihr eine Bilddatei namens <code>latex-logo.png</code>.</li>
<li>Fügt sie <strong>genau</strong> unterhalb dieser Aufgabenstellung im Skript ein.</li>
<li>Das Bild soll <strong>zentriert</strong> auf der Seite eingebunden werden.</li>
<li>Fügt außerdem eine <strong>Bildunterschrift</strong> ein.</li>
<li>Passt die <strong>Größe</strong> des Bildes an Breite der Seite (<code>\textwidth</code>) an.</li>
</ul>
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>
<span class="chapter-number">10.</span>
Tabellen
</h1>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Grundstruktur <span class="emoji">🗒️</span>
</h2>
<p>Für typografisch schöne Tabellen nutzen wir das Paket <code>booktabs</code>.</p>
<pre class="hljs lang-tex"><code>\usepackage{booktabs}</code></pre>
<pre class="hljs lang-tex"><code>\begin{table}[&lt;position&gt;]
\begin{tabular}{&lt;spaltendefinition&gt;}
% Tabelleninhalt
\end{tabular}
\caption{&lt;tabellenunterschrift&gt;}
\end{table}</code></pre>
<p>Die Positionierung erfolgt analog zu Grafiken.</p>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Spaltendefinitionen</h2>
<pre class="hljs lang-tex"><code>\begin{tabular}{lrcl}
% Tabelleninhalt
\end{tabular}</code></pre>
<table>
<tr>
<th>
Kürzel
</th>
<th>
Bedeutung
</th>
</tr>
<tr class="fragment">
<td>
l
</td>
<td>
linksbündige Spalte
</td>
</tr>
<tr class="fragment">
<td>
c
</td>
<td>
zentrierte Spalte
</td>
</tr>
<tr class="fragment">
<td>
r
</td>
<td>
rechtsbündige Spalte
</td>
</tr>
</table>
<p class="fragment">Vertikale Trennlinien und doppelte horizontale Linien sind unter Typograph*innen nicht gern gesehen und sollten vermieden werden.</p>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-12/tabelle-beispiel-crop.svg" class="thin-padding">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Tabelleninhalt</h2>
<pre class="hljs lang-tex"><code>\begin{tabular}{lll}
\toprule
Spalte 1 &amp; Spalte 2 &amp; Spalte 3 \\
\midrule
Inhalt a &amp; Inhalt b &amp; Inhalt c \\
Inhalt e &amp; Inhalt f &amp; Inhalt g \\
Inhalt i &amp; Inhalt j &amp; Inhalt k \\
\bottomrule
\end{tabular}</code></pre>
<ul>
<li class="fragment">Zellen werden durch ›<code>&amp;</code>‹ abgetrennt.</li>
<li class="fragment">Reihen werden durch ›<code>\\</code>‹ beendet.</li>
<li class="fragment"><code>\toprule</code>, <code>\midrule</code> und <code>\bottomrule</code> strukturieren die Tabelle.</li>
</ul>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-12/tabelle-inhalt-beispiel-crop.svg" class="thin-padding">
</div>
</div>
</article>
<article>
<div class="layout-wide-content">
<div class="layout-content">
<h2>Die gesamte Tabelle</h2>
<pre class="hljs lang-tex"><code>\begin{table}[h]
\begin{tabular}{lrcl}
\toprule
Sprache &amp; Autor &amp; Erscheinungsjahr &amp; Dateiendung \\
\midrule
C++ &amp; Bjarne Stroustrup &amp; 1985 &amp; .cpp \\
Java &amp; James Gosling &amp; 1998 &amp; .java \\
Python &amp; Guido van Rossum &amp; 1991 &amp; .py \\
\bottomrule
\end{tabular}
\caption{Bekannte Programmiersprachen}
\end{table}</code></pre>
<p data-category="Hinweis">
Mit <code>@{}</code> vor und nach einer Spaltendefinition wird der umgebende Weißraum unterdrückt.
</p>
<p data-category="Beispiel">
<code>\begin{tabular}{@{}lrcl@{}}</code> beschränkt die Linien auf die Breite des Tabelleninhalts.
</p>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Mehr Komfort</h2>
<p>Der <a href="https://tablesgenerator.com/">Tables Generator</a> ist ein wunderbares Werkzeug, um schnell Tabellen verschiedener Formate zu erstellen.</p>
<p><a href="https://tablesgenerator.com/"><img data-src="svg/chapter-12/tables-generator.png"></a></p>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2 data-category="Aufgabe" data-task="10">Tabellen setzen</h2>
<ul>
<li>Die Liste in der Datei <code>exercises/tables/tables.tex</code> enthält Infos zu ein paar Lehrveranstaltung an der Fakultät WIAI.</li>
<li>Wandelt die Liste in eine <strong>Tabelle</strong> um.</li>
<li>Die Tabelle soll Spalten für den <em>Namen</em>, das <em>Kürzel</em> und das <em>Semester</em> der Vorlesungen haben.</li>
<li>Fügt außerdem eine <strong>zentrierte Spalte</strong> ganz links in der Tabelle hinzu, in der ihr die Lehrveranstaltungen <strong>nummeriert</strong>.</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-content-only extra-content">
<div class="layout-content">
<h2 data-category="Extra">Besonders lange Tabellen</h2>
<p>Tabellen, die über eine Seite hinaus gehen, werden von <code>tabular</code> einfach abgeschnitten. Die Lösung bietet hier das Paket <code>longtable</code>:</p>
<pre class="hljs lang-tex"><code>\usepackage{longtable}</code></pre>
<pre class="hljs lang-tex"><code>\begin{longtable}{&lt;spaltendefinition&gt;}
% Tabelleninhalt
\caption{&lt;tabellenunterschrift&gt;}
\label{&lt;label&gt;}
\end{longtable}</code></pre>
</div>
</div>
</article>
<article>
<div class="layout-content-only extra-content">
<div class="layout-content">
<h2 data-category="Extra">Hinweise zu <code>longtable</code>
</h2>
<pre class="hljs lang-tex"><code>\begin{longtable}{&lt;spaltendefinition&gt;}
% Tabelleninhalt
\caption{&lt;tabellenunterschrift&gt;}
\label{&lt;label&gt;}
\end{longtable}</code></pre>
<ul>
<li>Die <code>longtable</code>-Umgebung vereint die <code>tabular</code>-Umgebung und die <code>table</code>-Umgebung.</li>
<li>Titel und Label können deshalb direkt unter dem Tabelleninhalt stehen.</li>
<li>Sofern das Paket <code>booktabs</code> eingebunden ist, stehen seine Features auch in <code>longtable</code> zur Verfügung.</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-content-only extra-content">
<div class="layout-content">
<h2 data-category="Extra">Besonders breite Tabellen</h2>
<p>Sollte die Tabelle einmal zu breit für eine Seite werden, kann sie auch im Querformat dargestellt werden:</p>
<pre class="hljs lang-tex"><code>\usepackage{rotating}</code></pre>
<pre class="hljs lang-tex"><code>\begin{sidewaystable}[&lt;position&gt;]
\begin{tabular}{&lt;spaltendef.&gt;}
% Tabelleninhalt
\end{tabular}
\end{sidewaystable}</code></pre>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview extra-content">
<div class="layout-content">
<h2 data-category="Extra">Weiterführendes Beispiel</h2>
<pre class="hljs lang-tex"><code>\begin{table}[h]
\begin{tabular}{llr}
\toprule
Struktur &amp; \multicolumn{2}{l}{Zeitkomplexität für Zugriff} \\ \cmidrule(r){2-3}
&amp; Average &amp; Worst \\
\midrule
Stack &amp; $\mathcal{O}(n)$ &amp; $\mathcal{O}(n)$ \\
Binärbaum &amp; $\mathcal{O}(log(n))$ &amp; $\mathcal{O}(log(n))$ \\
AVL-Baum &amp; $\mathcal{O}(log(n))$ &amp; $\mathcal{O}(log(n))$ \\
\bottomrule
\end{tabular}
\end{table}</code></pre>
<p><a href="http://packages.oth-regensburg.de/ctan/macros/latex/contrib/booktabs/booktabs.pdf"><span class="emoji">🔗</span> Dokumentation zu Booktabs</a></p>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-12/tabelle-fortgeschritten-beispiel-crop.svg" class="thin-padding">
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>
<span class="chapter-number">11.</span>
Quelltext-Listings
</h1>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Direkt im LaTeX-Quelltext</h2>
<p>Das Paket <code>listings</code> bietet zum Einfügen von Code eine eigene Umgebung:</p>
<pre class="lang-tex hljs"><code>\section*{Haskell-Magie}
Quadrate aller geraden % …
\begin{lstlisting}[language=Haskell]
[x^2 | x &lt;- [1..200], even x]
\end{lstlisting}</code></pre>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-10/listings-haskell-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Externer Code</h2>
<p>Praktischerweise bietet <code>listings</code> einen Befehl zum Einfügen externen Codes:</p>
<pre class="lang-tex hljs"><code>\section*{Einfache Java-Anwendung}
\lstinputlisting[language=Java]{Test.java}</code></pre>
<pre class="lang-java hljs" data-sourcefile="Test.java"><code>public class Test {
public static void main(/*…*/) {
System.out.println(/*…*/);
}
}</code></pre>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-10/listings-java-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Themen und Stile</h2>
<p><code>listings</code> stellt keine eigenen Themes zur Verfügung. Dies kann aber durch die vielen Konfigurationsoptionen ausgeglichen werden.</p>
<pre class="lang-tex hljs"><code>\begin{lstlisting}[
language=Java,
basicstyle=\footnotesize\ttfamily,
breaklines=true,
keywordstyle=\color{ForestGreen},
commentstyle=\color{DarkGray},
literate={ö}{{\"o}}
]
% …
\end{lstlisting}</code></pre>
<p>Für die Erstellung eigener Themes ist der Befehl <code>\lstset</code> nützlich.</p>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Weitere Materialien</h2>
<ul>
<li>
<a href="https://www.overleaf.com/learn/latex/Code_listing#Reference_guide">Einführung</a> in das Paket</li>
<li>offizielle <a href="https://www.overleaf.com/learn/latex/Code_listing#Reference_guide">Dokumentation</a>
</li>
<li>das Paket <a href="https://www.overleaf.com/learn/latex/Using_colours_in_LaTeX"><code>xcolor</code></a> für Farben</li>
<li>zwei <a href="https://github.com/jez/latex-solarized">Themes</a> im solarized-Stil für <code>listings</code>
</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2 data-category="Aufgabe" data-task="11">Listings</h2>
<ul>
<li>Im Ordner <code>exercises/source-code-listings</code> findet ihr eine Datei namens <code>Source.java</code>.</li>
<li>
<strong>Bindet</strong> den Java-Quelltext in der Datei <code>source-code-listings.tex</code> <strong>ein</strong>. (Beachtet, dass der Dateipfad relativ zu <code>main.tex</code> ist.)</li>
<li>Aktiviert das <strong>Syntax-Highlighting</strong> durch Angabe der Sprache Java.</li>
<li>
<strong>Nummeriert</strong> die Zeilen und aktiviert <strong>Umbrüche</strong>.</li>
<li>Setzt mit dem Parameter <code>basicstyle</code> eine dicktengleiche Schrift (<code>\ttfamily \small</code>).</li>
<li>Ändert die Schlüsselwortfarbe zu Blau.</li>
<li>Verbergt die Sonderzeichen, die <strong>Leerzeichen in Zeichenketten</strong> markieren.</li>
</ul>
<p>Seht bei Fragen in der Dokumentation des Paketes <code>listings</code> nach.</p>
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>
<span class="chapter-number">12.</span>
Referenzen und Fußnoten
</h1>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Fußnoten <span class="emoji">📎</span>
</h2>
<pre class="hljs lang-tex"><code>\usepackage{hyperref}</code></pre>
<p>Die Nummerierung erfolgt automatisch und ist fortlaufend, unabhängig davon, ob ein neuer Abschnitt beginnt.</p>
<pre class="hljs lang-tex"><code>Eber, beim Hausschwein insbesondere
oberdeutsch Saubär, beim Wildschwein
Keiler, bezeichnet das männliche
Geschlecht des Schweins.
\footnote{\url{https://de.wikipedia.org/
wiki/Eber}}</code></pre>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-13/fu%C3%9Fnotenbeispiel-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Querverweise</h2>
<p>Manuell (Just don’t!)</p>
<pre class="hljs lang-tex"><code>Wie man in Abbildung 23 sieht, …</code></pre>
<p>Mit dem Befehl <code>\ref</code>:</p>
<pre class="hljs lang-tex"><code>\begin{figure}[H]
\includegraphics % …
\caption{Unser Maskottchen Fooboar}
\label{img:fooboar}
\end{figure}
Wie man in Abbildung \ref{img:fooboar} …</code></pre>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-13/ref-beispiel-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Referenzen</h2>
<p>Mit dem Paket <code>cleveref</code> (mit <em>einem</em> ›r‹!):</p>
<pre class="hljs lang-tex"><code>\begin{figure}[H]
\includegraphics % …
\caption{Unser Maskottchen Fooboar}
\label{img:fooboar}
\end{figure}
Fooboar ist ein sehr engagierter
Jungeber (siehe \Cref{img:fooboar}).</code></pre>
<p>Der Befehl <code>\cref</code> fügt selbstständig die passende Abkürzung ein.</p>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-13/cref-beispiel-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Label vergeben</h2>
<p>Beide Referenzierungsbefehle funktionieren mit <strong>Abschnitten, Bildern, Tabellen, Listings und Gleichungen,</strong> sofern die richtigen Label vergeben wurden.</p>
<p>Label müssen <strong>eindeutig</strong> sein. Zur Strukturierung ist das Voranstellen von Kürzeln üblich, denn einige Pakete ziehen aus den Kürzeln Informationen.</p>
<table>
<tr>
<td>
<code>fig:</code> Abbildungen
</td>
<td>
<code>tbl:</code> Tabellen
</td>
</tr>
<tr>
<td>
<code>sec:</code> Abschnitte
</td>
<td>
<code>subsec:</code> Unter­abschnitte
</td>
</tr>
<tr>
<td>
<code>ch:</code> Kapitel
</td>
<td>
<code>itm:</code> Aufzählungs­elemente
</td>
</tr>
<tr>
<td>
<code>eq:</code> Gleichungen
</td>
<td>
<code>lst:</code> Quelltext­listings
</td>
</tr>
</table>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Dinge, die zu beachten sind</h2>
<ul>
<li>
<p class="fragment">Durch <code>\cref</code> eingefügte Passagen tauchen in einigen Dokumentklassen erst dann auf Deutsch auf, wenn bereits in der Dokumentklasse die Sprache festgelegt wurde:</p>
<pre class="hljs lang-tex"><code>\documentclass[ngerman]{article}</code></pre>
</li>
<li><p class="fragment">Beschriftungen (<code>\caption{…}</code>) müssen, von Abschnitten abgesehen, <strong>immer und vor dem Label</strong> vergeben werden.</p></li>
<li>
<p class="fragment">Bei Abschnitten wird das Label direkt hinter dem Befehl angefügt.</p>
<pre class="hljs lang-tex"><code>\section{Hinweise}\label{sec:hinweise}</code></pre>
</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2 data-category="Aufgabe" data-task="12a">Fußnoten einfügen</h2>
<ul>
<li>Pack den Text <em>March 2021</em> in der Datei <code>exercises/footnotes/footnotes.tex</code> in eine <strong>Fußnote</strong>.</li>
<li>Fügt zusätzlich eine <strong>klickbare URL</strong>, die zur Download-Seite des Java Development Kit führt (<code>https://www.oracle.com/java/technologies/javase-downloads.html</code>), als Fußnote ein.</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2 data-category="Aufgabe" data-task="12b">Referenzen einfügen</h2>
<ul>
<li>Ersetzt im Text in der Datei <code>references.tex</code> im Ordner <code>exercises/references</code> <em>In the figure</em> und <em>The following source code listing</em> durch eine <strong>Referenz</strong> auf das Bild bzw. auf das Quelltext-Listing.</li>
<li>Nutzt dafür den Befehl <code>\Cref</code>.</li>
<li>Achtet darauf, zuerst <strong>Labels</strong> für die Elemente, die ihr referenzieren wollt, zu vergeben.</li>
<li>Packt dafür das Quelltext-Listing in eine <strong>Umgebung</strong> namens <code>listing</code>.</li>
<li>Fügt noch eine <strong>Beschriftung</strong> zum Listing hinzu.</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview extra-content">
<div class="layout-content">
<h2 data-category="Extra">Konfiguration von Fußnoten</h2>
<p>Das Paket <code>footmisc</code> stellt verschiedene weitere Optionen für die Darstellung von Fußnoten zur Verfügung, die als optionale Parameter an den Befehl <code>\usepackage</code> übergeben werden können.</p>
<pre class="hljs lang-tex"><code>% Zählung auf jeder Seite neu beginnen:
\usepackage[perpage]{footmisc}
% Fußnoten inline anzeigen lassen:
\usepackage[para]{footmisc}
% Symbole statt Nummerierung verwenden:
\usepackage[symbol]{footmisc}</code></pre>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-13/footmisc-de-crop.svg" class="thin-padding">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview extra-content">
<div class="layout-content">
<h2 data-category="Extra">Weiterführend</h2>
<ul>
<li>Wurde vor dem Paket <code>cleveref</code> das Paket <code>hyperref</code> eingebunden, entsteht ein <strong>klickbarer Link</strong> im fertigen PDF.</li>
<li>Mehrere Referenzen können in <code>\cref</code> kommagetrennt angegeben werden.</li>
</ul>
<pre class="hljs lang-tex"><code>\section{Ein Einstieg}
\label{sec:section1}
% …
Hier sei verwiesen auf
\cref{sec:section1,sec:section2,
sec:section3,sec:section5}.</code></pre>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-13/cref-multiple-beispiel-crop.svg">
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>
<span class="chapter-number">13.</span>
Literatur­verwaltung
</h1>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Was brauchen wir dafür?</h2>
<ul>
<li>eine <strong>Bibliographiedatei</strong> (nachfolgend <code>.bib</code>-Datei) zur Speicherung von Literaturverweisen</li>
<li>
<strong>BibTeX</strong> als Schnittstelle zwischen der Literatur und LaTeX</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-wide-content">
<div class="layout-content">
<h2>Was ist diese ominöse <code>.bib</code>-Datei?</h2>
<ul>
<li>Sammlung von Literatureinträgen im BibTeX-Format</li>
<li>Beispielhafter Literatureintrag:</li>
</ul>
<pre class="hljs lang-tex"><code>@article{turing1990, % Art des Dokuments und Bezeichner für den \cite Befehl
title={The chemical basis of morphogenesis}, % Titel
author={Turing, Alan Mathison}, % Autor
journal={Bulletin of mathematical biology}, % Titel des Journals
volume={52}, % Band des Journals
pages={153--197}, % Seitenzahl im Journal
year={1990}, % Erscheinungsjahr
publisher={Springer} % Verleger des Journals
}</code></pre>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Wie wird das verwendet?</h2>
<p>Durch BibTeX wird LaTeX um einige Befehle zum Zitieren erweitert. Außerdem benötigt wird das Paket <code>natbib</code>.</p>
<ul>
<li class="fragment">Zitieren eines Autors: <code>\citeauthor{&lt;quelle&gt;}</code>
</li>
<li class="fragment">Zitieren einer Quelle: <code>\cite{&lt;quelle&gt;}</code>
</li>
<li class="fragment">Zitieren einer Seite: <code>\cite[S. 15]{&lt;quelle&gt;}</code>
</li>
<li class="fragment">Zitieren mit weiteren Zusätzen:<br><code>\cite[&lt;präfix&gt;][&lt;suffix&gt;]{&lt;quelle&gt;}</code>
</li>
<li class="fragment">Verweis auf die genutzte <code>.bib</code>-Datei: <code>\bibliography{&lt;.bib-datei&gt;}</code>
</li>
<li class="fragment">Angabe des genutzten Zitierstils: <br><code>\bibliographystyle{&lt;zitierstil&gt;}</code>
</li>
</ul>
<blockquote>
<p>Zwei Dinge sind unendlich. Das Universum und die Auswahl an Zitierstilen.<cite>Unbekannt</cite></p>
</blockquote>
</div>
</div>
</article>
<article>
<div class="layout-preview-only">
<div class="layout-preview">
<figure>
<img data-src="svg/chapter-14/bibtex-alpha-crop.svg" class="large thin-padding" alt=""><figcaption>Zitieren im Alpha-Zitierstil</figcaption>
</figure>
</div>
</div>
</article>
<article>
<div class="layout-preview-only">
<div class="layout-preview">
<figure>
<img data-src="svg/chapter-14/bibtex-natdin-crop.svg" class="large thin-padding" alt=""><figcaption>Zitieren im Natdin-Zitierstil</figcaption>
</figure>
</div>
</div>
</article>
<article>
<div class="layout-preview-only">
<div class="layout-preview">
<figure>
<img data-src="svg/chapter-14/bamberger_katalog_bibtex.jpg" class="large" alt=""><figcaption>Finden von fertigen BibTeX-Einträgen – Bamberger Katalog</figcaption>
</figure>
</div>
</div>
</article>
<article>
<div class="layout-preview-only">
<div class="layout-preview">
<figure>
<img data-src="svg/chapter-14/google_bibtex1.jpg" class="large" alt=""><figcaption>Finden von fertigen BibTeX-Einträgen – Google Scholar</figcaption>
</figure>
</div>
</div>
</article>
<article>
<div class="layout-preview-only">
<div class="layout-preview">
<figure>
<img data-src="svg/chapter-14/google_bibtex2.jpg" class="large" alt=""><figcaption>Finden von fertigen BibTeX-Einträgen – Google Scholar</figcaption>
</figure>
</div>
</div>
</article>
<article>
<div class="layout-preview-only">
<div class="layout-preview">
<figure>
<img data-src="svg/chapter-14/dblp.jpg" class="large" alt=""><figcaption>Finden von fertigen BibTeX-Einträgen – dblp.org</figcaption>
</figure>
</div>
</div>
</article>
<article>
<div class="layout-wide-content">
<div class="layout-content">
<h2 data-category="Aufgabe" data-task="13">Ein Literaturverzeichnis erstellen und einfügen</h2>
<ul>
<li>Erstellt im Ordner <code>exercises/literature</code> eine neue BibTeX-Datei <code>literature.bib</code>.</li>
<li>Sucht bei Google Scholar oder dblp.org die BibTeX-Einträge für folgende <span class="math inline">\(\LaTeX\)</span>-Handbücher:
<ul>
<li>Dilip Datta (2017): <span class="math inline">\(\LaTeX\)</span> in 24 Hours. A Practical Guide for Scientific Writing.</li>
<li>Frank Mittelbach / Michel Goossens (2012): Der <span class="math inline">\(\LaTeX\)</span>-Begleiter.</li>
</ul>
</li>
<li>Fügt die BibTeX-Einträge in die BibTeX-Datei ein.</li>
<li>Vergebt aussagekräftige BibTeX-Keys.</li>
<li>Bindet die BibTeX-Datei an einer geeigneten Stelle ein, an der später auch das Literaturverzeichnis zu sehen sein soll.</li>
<li>Zitiert die zwei Handbücher im Text in der Datei <code>exercises/literature/literature.tex</code>.</li>
<li>Wählt den Bibliographiestil <code>plain</code>.</li>
</ul>
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>
<span class="chapter-number">14.</span>
Paket in Sicht!
</h1>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Stichwortverzeichnis anlegen</h2>
<pre class="lang-tex hljs"><code>\usepackage{makeidx}
\makeindex
\begin{document}
\maketitle
\section{Was ist LaTeX\index{LaTeX}?}
LaTeX\index{LaTeX} ist ein
Textsatzsystem\index{Textsatzsystem}.
\newpage \section{TeX\index{TeX} vs.
LaTeX\index{LaTeX}} Es basiert auf
TeX\index{TeX}, einer Erfindung von
Donald Knuth\index{Knuth, Donald}.
Da TeX\index{TeX} in seiner Syntax sehr
viel komplexer als LaTeX\index{LaTeX}
ist, ist LaTeX\index{LaTeX} wesentlich
weiter verbreitet.
\printindex</code></pre>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-15/index.png">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Präsentationen gestalten</h2>
<p>Für Präsentationen gibt es die Dokumentenklasse <code>beamer</code> sowie zahlreiche <a href="https://www.overleaf.com/learn/latex/Beamer">Vorlagen und Themes</a>.</p>
<pre class="lang-tex hljs small-text"><code>\documentclass{beamer}
\usetheme{Frankfurt}
\usecolortheme{seahorse}
\usepackage[utf8]{inputenc}
\begin{document}
\begin{frame}
\frametitle{Zitronensorbet}
\framesubtitle{Inkarnation des Guten?}
\begin{definition}
Ein Zitronensorbet ist eine
halbgefrorene \textbf{Speiseeiscreme}
auf Basis von \textit{Zitronen}.
\end{definition}
\end{frame}
\end{document}</code></pre>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-15/beamer-orig.svg" style="width: 100%; margin: 0;">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Grafiken erstellen</h2>
<p><code>TikZ</code> (»TikZ ist kein Zeichenprogramm«) ist ein umfangreiches Paket zur Erstellung von Vektorgrafiken.</p>
<pre class="lang-tex hljs small-text scroll-one-half"><code>% …
\tikzstyle{every node}=[draw=black,thick,anchor=west]
\tikzstyle{selected}=[draw=red,fill=red!30]
\tikzstyle{dir}=[fill=gray!50]
\tikzstyle{relativeTo}=[fill=blue!70]
\begin{tikzpicture}[%
grow via
three points={one child at (0.5,-0.7) and
two children at
(0.5,-0.7) and (0.5,-1.4)},
edge from
parent path={(\tikzparentnode.south)
|- (\tikzchildnode.west)}]
\node {/ oder C:}
child { node {home}
child { node {knut}
child { node {pictures}}
child { node {docs}
child { node [dir] {latex}
child { node [relativeTo] {main.tex}
child { node [selected] {part1.tex}
}
}
}
};
\end{tikzpicture}</code></pre>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-04/relative-path-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Linguistik</h2>
<p>Mit dem Paket <code>qtree</code> lassen sich Konstituentenbäume erstellen:</p>
<pre class="lang-tex hljs"><code>\Tree [.S [.NP LaTeX ]
[.VP [.V is ] [.NP fun ] ] ]</code></pre>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-15/constituency-tree-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Mathematische Beweisführung</h2>
<p>Beweisbäume lassen sich mit dem Paket <code>prftree</code> einwandfrei darstellen.</p>
<pre class="hljs lang-tex small-text scroll-one-half"><code>\begin{displaymath}
\prftree[l,r]{}{[comp$\_{ns}$]}
{
\prftree[l,r]{}{[comp$\_{ns}$]}
{
\prftree[l,r]{}{[ass$\_{ns}$]}
{
-
}
{
(\texttt{m:=a}, \sigma\_{\bot,\bot})
\rightarrow \sigma\_{48,\bot}
}
}
{
\prftree[l,r]{}{[ass$\_{ns}$]}
{
-
}
{
(\texttt{n:=b}, \sigma\_{48,\bot})
\rightarrow \sigma\_{48,18}
}
}
{
(\texttt{m:=a; n:=b}, \sigma\_{\bot,\bot})
\rightarrow \sigma\_{48,18}
}
}
{
\prftree[l,r]{}{}
{
\dots
}
{
\textbf{[1]}\ (\texttt{LOOP}, \sigma\_{48,18})
\rightarrow \sigma\_{6,6}
}
}
{
(\texttt{m:=a; n:=b; LOOP}, \sigma\_{\bot,\bot})
\rightarrow \sigma\_{6,6}
}
\end{displaymath}</code></pre>
</div>
<div class="layout-preview">
<img class="thin-padding" data-src="svg/chapter-15/prftree-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Weitere nützliche Pakete</h2>
<table>
<tr>
<th>
Paket
</th>
<th>
Anwendung
</th>
</tr>
<tr class="fragment">
<td>
<a href="https://www.ctan.org/pkg/xcolor"><code>xcolor</code></a>
</td>
<td>
Mach’s mit Farbe
</td>
</tr>
<tr class="fragment">
<td>
<a href="https://www.ctan.org/pkg/todonotes"><code>todonotes</code></a>
</td>
<td>
ToDo-Markierungen und Liste der ToDos
</td>
</tr>
<tr class="fragment">
<td>
<a href="https://www.ctan.org/pkg/pdfpages"><code>pdfpages</code></a>
</td>
<td>
Einbinden von PDF-Dateien
</td>
</tr>
<tr class="fragment">
<td>
<a href="https://www.ctan.org/pkg/subcaption"><code>subcaption</code></a>
</td>
<td>
Verschachtelte Abbildungen und ausgefeilte Bildunterschriften
</td>
</tr>
<tr class="fragment">
<td>
<a href="https://www.ctan.org/pkg/colortbl"><code>colortbl</code></a>, <a href="https://www.ctan.org/pkg/tabularx"><code>tabularx</code></a>, <a href="https://www.ctan.org/pkg/multirow"><code>multirow</code></a>, <a href="https://www.ctan.org/pkg/makecell"><code>makecell</code></a>
</td>
<td>
Gestalten von Tabellen
</td>
</tr>
</table>
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>
<span class="chapter-number">15.</span>
Hilfe und Informationen
</h1>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2><a href="https://de.wikibooks.org/wiki/LaTeX-Kompendium">Wikibooks</a></h2>
<p>Das Wikibook zu LaTeX enthält eine große Anzahl interessanter Artikel und ist auch in deutscher Sprache verfügbar.</p>
<p><img data-src="svg/chapter-16/wikibooks-latex.jpg"></p>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2><a href="https://ctan.org">CTAN</a></h2>
<p>Das »Comprehensive TeX Archive Network« ist die zentrale Quelle für LaTeX-Pakete und ihre Dokumentation.</p>
<p><img data-src="svg/chapter-16/ctan.jpg"></p>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2><a href="https://www.overleaf.com">Overleaf</a></h2>
<p>Ein Online-LaTeX-Editor, der das kollaboratives Arbeiten an Dokumenten ermöglicht.</p>
<p>Außerdem findest du auf der Seite verschiedene Tutorials und unter <a href="https://www.overleaf.com/templates">»Templates«</a> LaTeX-Vorlagen für viele Gelegenheiten (Lebenslauf, Abschlussarbeiten, …).</p>
<p><img data-src="svg/chapter-16/overleaf.jpg"></p>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2><a href="https://tex.stackexchange.com">StackExchange</a></h2>
<p>Frage-Forum zu LaTeX.</p>
<p><img data-src="svg/chapter-16/stackexchange.jpg"></p>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2><a href="https://www.texample.net">TeXample</a></h2>
<p>Webseite mit zahlreichen LaTeX-Beispielvorlagen, vor allem zu TikZ.</p>
<p><img data-src="svg/chapter-16/texample.jpg"></p>
</div>
</div>
</article>
<article>
<div class="layout-preview-only">
<div class="layout-preview">
<figure>
<img data-src="svg/chapter-16/klassisches-beispiel.jpg" alt=""><figcaption>Klassisch (<a href="https://tex.stackexchange.com/questions/1319/showcase-of-beautiful-typography-done-in-tex-friends">Quelle</a>)</figcaption>
</figure>
</div>
</div>
</article>
<article>
<div class="layout-preview-only">
<div class="layout-preview">
<figure>
<img data-src="svg/chapter-16/klassischeres-beispiel.jpg" alt=""><figcaption>Noch klassischer (<a href="https://tex.stackexchange.com/questions/1319/showcase-of-beautiful-typography-done-in-tex-friends">Quelle</a>)</figcaption>
</figure>
</div>
</div>
</article>
<article>
<div class="layout-preview-only">
<div class="layout-preview">
<figure>
<img data-src="svg/chapter-16/anderes-beispiel.jpg" alt=""><figcaption>Anders (<a href="https://tex.stackexchange.com/questions/1319/showcase-of-beautiful-typography-done-in-tex-friends">Quelle</a>)</figcaption>
</figure>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2><a href="https://www.uni-bamberg.de/wiai/fs/">Fachschaft WIAI</a></h2>
Wenn ihr sonst noch Fragen oder Probleme habt, kommt gerne bei uns vorbei oder schreibt uns eine Mail!
<p>
<span class="emoji" style="display: inline-block; width: 2em;">📍</span>WE5/02.104 <br> <span class="emoji" style="display: inline-block; width: 2em;">☎️</span>0951 863 1219 <br> <span class="emoji" style="display: inline-block; width: 2em;">📧</span><a href="mailto:fachschaft-wiai.stuve@uni-bamberg.de">fachschaft-wiai.stuve@uni-bamberg.de</a>
</p>
<p><img data-src="images/logo-fachschaft.jpg" style="width:40%; margin: 0 auto; margin-top: 2em; display:block;"></p>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Kurzes Feedback</h2>
<ul>
<li>Was hat euch gut gefallen?</li>
<li>Was hätten wir besser machen können?</li>
<li>Was hättet ihr euch gewünscht?</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-preview-only">
<div class="layout-preview">
<p><img data-src="svg/chapter-16/fooboar-latex-tut.jpg" style="width:80%; margin:0 auto; display: block;"></p>
</div>
</div>
</article>
</section>
<div id="progress-bar"></div>
<input type="checkbox" id="help-menu-checkbox" />
<label for="help-menu-checkbox" id="help-menu-toggle">?</label>
<div id="help-menu-wrapper">
<h2>How to use this presentation</h2>
<ul>
<li>Next slide: <kbd>↓</kbd> or <kbd>→</kbd></li>
<li>Previous slide: <kbd>↑</kbd> or <kbd>←</kbd></li>
<li>Open slide overview: Hit <kbd>Ctrl</kbd> twice.</li>
<li>Close slide overview: <kbd>Esc</kbd></li>
<li>Open the help menu: <kbd>H</kbd></li>
</ul>
<p>
<a href="https://www.uni-bamberg.de/wiai/fs/kontakt-und-impressum/">Imprint</a> and <a href="https://www.uni-bamberg.de/rz/verfahrensweisen/datenschutz/datenschutzerklaerungen/webauftritt/">privacy policy</a>
</p>
</div>
<script src="onpoint/onpoint.js"></script>
<script src="onpoint/touch-support.js"></script>
<script src="lib/highlightjs/highlight.pack.js"></script>
<script>
hljs.initHighlightingOnLoad();
</script>
<script src="lib/polyfill.io/v3-es6.js"></script>
<script id="MathJax-script" async="true" src="lib/mathjax/es5/tex-mml-chtml.js"></script>
<script src="js/lazyload-images.js"></script>
<script src="lib/lozad/lozad.min.js"></script>
<script>
MathJax = {
tex: {
inlineMath: [
['$', '$'], ['\\(', '\\)']
]
},
svg: {
fontCache: 'global'
}
};
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink