2023-11-05 15:22:15 +01:00

4295 lines
108 KiB
HTML
Raw 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="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Fachschaft WIAI LaTeX Weekend</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>
<span>First steps
with 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
</span>
</h1>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Digression: Opening a command prompt
</h2>
<ul>
<li><p>For the following tasks, we are going to need a command
prompt</p></li>
<li><p>It can be opened in different ways, depending on your operating
system</p></li>
<li><p><strong>Windows</strong>: Press the Windows key and type in
<em>cmd</em>, press Enter</p></li>
<li><p><strong>MacOS</strong>: Press the <em>Command</em> key and the
<em>space bar</em> simultaneously, then type in <em>Terminal</em> and
double click on <em>Terminal</em></p></li>
<li><p><strong>Linux</strong>: Press
<code>Ctrl + Alt + T</code></p></li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Installing the compiler
</h2>
<ul>
<li>The compiler translates our
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
code into a PDF</li>
<li>Depending on your operating system, different compilers are
available</li>
<li>Windows:
<a href="https://miktex.org/download">MikT<sub style="font-size: 100%; margin-left: -.1em">E</sub>X</a>
</li>
<li>macOS:
<a href="https://tug.org/mactex/">MacT<sub style="font-size: 100%; margin-left: -.1em">E</sub>X</a>
</li>
<li>Linux distributions:
<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-based distributions: run
<code>sudo apt install texlive-full</code>
</li>
<li>other distributions: see the
T<sub style="font-size: 100%; margin-left: -.1em">E</sub>XLive
website</li>
</ul>
</li>
</ul>
<div class="box warning">
<p>Make sure to install the full version with all packages, if you
can!</p>
</div>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Installing the editor
</h2>
<ul>
<li>An editor can downloaded once the compiler has been installed</li>
<li>For editing LaTeX documents, any text editor works fine, e.g.,
<a href="https://notepad-plus-plus.org/downloads/">Notepad++</a>,
<a href="https://code.visualstudio.com/download">VSCode</a>
</li>
<li>For beginners,
<a href="https://www.texstudio.org/">T<sub style="font-size: 100%; margin-left: -.1em">E</sub>Xstudio</a>
is recommended due to its LaTeX-specific features</li>
<li>Download and install
T<sub style="font-size: 100%; margin-left: -.1em">E</sub>Xstudio</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Compile the script for the first time
</h2>
<ul>
<li>Download the project archive from the VC.</li>
<li>Unzip the archive.</li>
<li>Open the file <code>main-exercises.tex</code> in
T<sub style="font-size: 100%; margin-left: -.1em">E</sub>Xstudio. It is
located in the root directory of the archive.</li>
<li>Compile <code>main-exercises.tex</code> by pressing <span class="emoji"></span>
</li>
<li>A few new files will be generated by the compilation.</li>
</ul>
<div class="box warning">
<p>Windows users: In order to enable file endings, click the view tab in
the file explorer, and select <em>file name extensions</em>. This helps
differentiating the different <code>main</code> files.</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
Weekend
</h1>
<small>
<p>A Fachschaft WIAI workshop. Presented by Evelyn Fradtschuk,
Jessica Klarmann, Florian Knoch, Theresa Knoll, Christian Kremitzl,
Fabian Lamprecht, Bernhard Luedtke and Jochen Mehlich.</p>
</small>
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>
<span class="chapter-number">1
.</span>
<span>What is
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?
</span>
</h1>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Origin
</h2>
<ul>
<li>Donald <strong>Knuth</strong>, 19771986: typesetting system
<strong>TeX</strong><span class="bubble fragment" style="margin-top: -3em;">τεχ → /tɛç, tɛx, tɛk/</span> for The Art of
Computer Programming</li>
<li>Leslie <strong>Lamport</strong>, from 1980s: software package
<strong>LaTeX</strong> made TeX easier to use</li>
</ul>
<div style="display: flex; justify-content: space-between; align-items: stretch;">
<figure>
<img src="svg/chapter-01/knuth.jpg" style="height: 13em">
<figcaption>
Donald Knuth
</figcaption>
</figure>
<figure>
<img src="svg/chapter-01/lamport.jpg" style="height: 13em">
<figcaption>
Leslie Lamport
</figcaption>
</figure>
</div>
</div>
<div class="layout-preview">
<img src="svg/chapter-01/taocp.jpg">
</div>
</div>
</article>
<article>
<div class="layout-wide-content">
<div class="layout-content">
<h2>Reasons for using LaTeX: macrotypography
</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">This paragraph shows the effect of varied line heights in combination
with varied line lengths. For this purpose, a little more text is needed
to make it look like an actual paragraph. For this purpose, a little
more text is needed to make it look like an actual paragraph. For this
purpose, a little more text is needed to make it look like an actual
paragraph. For this purpose, a little more text is needed to make it
look like an actual paragraph. For this purpose, a little more text is
needed to make it look like an actual paragraph. For this purpose, a
little more text is needed to make it look like an actual paragraph. For
this purpose, a little more text is needed to make it look like an
actual paragraph. For this purpose, a little more text is needed to make
it look like an actual paragraph.
</p>
<p class="caption narrow good"><span>short &amp; tight
</span></p>
<p class="example normal tight">This paragraph shows the effect of varied line heights in combination
with varied line lengths. For this purpose, a little more text is needed
to make it look like an actual paragraph. For this purpose, a little
more text is needed to make it look like an actual paragraph. For this
purpose, a little more text is needed to make it look like an actual
paragraph. For this purpose, a little more text is needed to make it
look like an actual paragraph. For this purpose, a little more text is
needed to make it look like an actual paragraph. For this purpose, a
little more text is needed to make it look like an actual paragraph. For
this purpose, a little more text is needed to make it look like an
actual paragraph. For this purpose, a little more text is needed to make
it look like an actual paragraph.
</p>
<p class="caption normal bad"><span>normal length and tight leading
</span></p>
<p class="example wide tight">This paragraph shows the effect of varied line heights in combination
with varied line lengths. For this purpose, a little more text is needed
to make it look like an actual paragraph. For this purpose, a little
more text is needed to make it look like an actual paragraph. For this
purpose, a little more text is needed to make it look like an actual
paragraph. For this purpose, a little more text is needed to make it
look like an actual paragraph. For this purpose, a little more text is
needed to make it look like an actual paragraph. For this purpose, a
little more text is needed to make it look like an actual paragraph. For
this purpose, a little more text is needed to make it look like an
actual paragraph. For this purpose, a little more text is needed to make
it look like an actual paragraph.
</p>
<p class="caption wide ugly"><span>long lines and tight leading
</span></p>
<p class="example narrow medium">This paragraph shows the effect of varied line heights in combination
with varied line lengths. For this purpose, a little more text is needed
to make it look like an actual paragraph. For this purpose, a little
more text is needed to make it look like an actual paragraph. For this
purpose, a little more text is needed to make it look like an actual
paragraph. For this purpose, a little more text is needed to make it
look like an actual paragraph. For this purpose, a little more text is
needed to make it look like an actual paragraph. For this purpose, a
little more text is needed to make it look like an actual paragraph. For
this purpose, a little more text is needed to make it look like an
actual paragraph. For this purpose, a little more text is needed to make
it look like an actual paragraph.
</p>
<p class="caption narrow bad"><span>short &amp; medium
</span></p>
<p class="example normal medium">This paragraph shows the effect of varied line heights in combination
with varied line lengths. For this purpose, a little more text is needed
to make it look like an actual paragraph. For this purpose, a little
more text is needed to make it look like an actual paragraph. For this
purpose, a little more text is needed to make it look like an actual
paragraph. For this purpose, a little more text is needed to make it
look like an actual paragraph. For this purpose, a little more text is
needed to make it look like an actual paragraph. For this purpose, a
little more text is needed to make it look like an actual paragraph. For
this purpose, a little more text is needed to make it look like an
actual paragraph. For this purpose, a little more text is needed to make
it look like an actual paragraph.
</p>
<p class="caption normal good"><span>normal length and leading
</span></p>
<p class="example wide medium">This paragraph shows the effect of varied line heights in combination
with varied line lengths. For this purpose, a little more text is needed
to make it look like an actual paragraph. For this purpose, a little
more text is needed to make it look like an actual paragraph. For this
purpose, a little more text is needed to make it look like an actual
paragraph. For this purpose, a little more text is needed to make it
look like an actual paragraph. For this purpose, a little more text is
needed to make it look like an actual paragraph. For this purpose, a
little more text is needed to make it look like an actual paragraph. For
this purpose, a little more text is needed to make it look like an
actual paragraph. For this purpose, a little more text is needed to make
it look like an actual paragraph.
</p>
<p class="caption wide bad"><span>long lines and medium leading
</span></p>
<p class="example narrow loose">This paragraph shows the effect of varied line heights in combination
with varied line lengths. For this purpose, a little more text is needed
to make it look like an actual paragraph. For this purpose, a little
more text is needed to make it look like an actual paragraph. For this
purpose, a little more text is needed to make it look like an actual
paragraph. For this purpose, a little more text is needed to make it
look like an actual paragraph. For this purpose, a little more text is
needed to make it look like an actual paragraph. For this purpose, a
little more text is needed to make it look like an actual paragraph. For
this purpose, a little more text is needed to make it look like an
actual paragraph. For this purpose, a little more text is needed to make
it look like an actual paragraph.
</p>
<p class="caption narrow ugly"><span>short &amp; loose
</span></p>
<p class="example normal loose">This paragraph shows the effect of varied line heights in combination
with varied line lengths. For this purpose, a little more text is needed
to make it look like an actual paragraph. For this purpose, a little
more text is needed to make it look like an actual paragraph. For this
purpose, a little more text is needed to make it look like an actual
paragraph. For this purpose, a little more text is needed to make it
look like an actual paragraph. For this purpose, a little more text is
needed to make it look like an actual paragraph. For this purpose, a
little more text is needed to make it look like an actual paragraph. For
this purpose, a little more text is needed to make it look like an
actual paragraph. For this purpose, a little more text is needed to make
it look like an actual paragraph.
</p>
<p class="caption normal bad"><span>normal length and loose leading
</span></p>
<p class="example wide loose">This paragraph shows the effect of varied line heights in combination
with varied line lengths. For this purpose, a little more text is needed
to make it look like an actual paragraph. For this purpose, a little
more text is needed to make it look like an actual paragraph. For this
purpose, a little more text is needed to make it look like an actual
paragraph. For this purpose, a little more text is needed to make it
look like an actual paragraph. For this purpose, a little more text is
needed to make it look like an actual paragraph. For this purpose, a
little more text is needed to make it look like an actual paragraph. For
this purpose, a little more text is needed to make it look like an
actual paragraph. For this purpose, a little more text is needed to make
it look like an actual paragraph.
</p>
<p class="caption wide good"><span>long lines and loose leading
</span></p>
</div>
</div>
</div>
</article>
<article>
<div class="layout-wide-content">
<div class="layout-content">
<h2>Reasons for using LaTeX: microtypography
</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 src="svg/chapter-01/schriftschnitte-slanted.svg" style="height: 10vh"></p>
<p class="caption ugly">☹ slanted (distorted)
</p>
<p class="example example1"><img src="svg/chapter-01/schriftschnitte-roman.svg" style="height: 10vh"></p>
<p class="caption good">☺ straight
</p>
<p class="example example1"><img src="svg/chapter-01/schriftschnitte-italic.svg" style="height: 10vh"></p>
<p class="caption good">☺ italic (separate font)
</p>
<p class="example example2"><img src="svg/chapter-01/schriftgrade-vergroessert.svg" style="height: 12vh"></p>
<p class="caption ugly">☹ small font scaled up
</p>
<p class="example example2"><img src="svg/chapter-01/schriftgrade-korrekt.svg" style="height: 12vh"></p>
<p class="caption good">☺ separate appropriate fonts
</p>
<p class="example example2"><img src="svg/chapter-01/schriftgrade-verkleinert.svg" style="height: 12vh"></p>
<p class="caption ugly">☹ big font scaled down
</p>
</div>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Reasons for using LaTeX: plaintext
</h2>
<ul>
<li>reliable undo</li>
<li>easy versioning</li>
<li>independence of proprietary software</li>
<li>source code readable in the long term</li>
<li>easy cooperation with other software</li>
<li>no distraction by formatting or embedded media</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Procedure of this workshop
</h2>
<p><strong>Goal:</strong> you are going to build your own little
<br>LaTeX manual based on our <a href="https://github.com/fs-wiai/latex-script/">LaTeX script</a>.</p>
<ul>
<li>learning by doing</li>
<li>understanding how LaTeX works</li>
<li>details can be looked up later</li>
</ul>
<div class="fragment">
<p><strong>Outline:</strong></p>
<ol type="1">
<li><del>What is LaTeX?</del></li>
<li>How does LaTeX work?</li>
<li>Basic structure of a LaTeX document</li>
<li>Project structure</li>
<li>Lots of features</li>
<li>Reference management</li>
<li>Outlook</li>
</ol>
</div>
</div>
<div class="layout-preview">
<img src="svg/chapter-01/cover-script.jpeg">
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>
<span class="chapter-number">2
.</span>
<span>How does
<br>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
work?
</span>
</h1>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>WYSIWhat?
</h2>
<h3 data-category="Word" id="what-you-see-is-what-you-get">What You See
Is What You Get</h3>
<ul>
<li>Formatting with immediate visual 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>Separation of content and structure</li>
<li>Formatting only visible afterwards</li>
</ul>
</section>
<p style="margin-top:calc(.25 * var(--square));">
Image source: <a href="https://xkcd.com/1341/">xkcd</a>
</p>
</div>
<div class="layout-preview">
<img src="svg/chapter-02/xkcd-types-of-editors.png">
</div>
</div>
</article>
<article>
<div class="layout-preview-only">
<div class="layout-preview">
<figure>
<img src="svg/chapter-02/wysiwyg.svg" alt="How to get the final document">
<figcaption aria-hidden="true">How to get the final
document</figcaption>
</figure>
</div>
</div>
</article>
<article>
<div class="layout-two-columns">
<h2 class="layout-title">What do we need?
</h2>
<div class="layout-column-one">
<h3 id="editor">Editor</h3>
<p>writing our source code including all the commands that structure the
text semantically</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>takes the source code and creates a PDF document ready for
publication</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>Commands
</h2>
<p>General structure of a command:</p>
<pre class="hljs lang-txt"><code>\&lt;command&gt;[&lt;optional_parameters&gt;]{&lt;obligatory_parameters&gt;}</code></pre>
<p class="fragment">A few examples:</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" tabindex="-1"></a><span class="fu">\newpage</span> <span class="co">% inserts a new page</span></span>
<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a><span class="fu">\textbf</span>{bold text} <span class="co">% formats the text bold</span></span>
<span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a><span class="bu">\documentclass</span>[a4paper,12pt, landscape]{<span class="ex">article</span>} <span class="co">% configures the document class</span></span>
<span id="cb2-4"><a href="#cb2-4" aria-hidden="true" tabindex="-1"></a><span class="fu">\frac</span>{1}{4} <span class="co">% inserts a mathematical fraction</span></span></code></pre></div>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Backslash
</h2>
<p>You get the backslash by pressing</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>
<span>Basic structure of a
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
document
</span>
</h1>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Preamble &amp; document environment
</h2>
<p style="text-indent: -1.3em">
<span class="emoji">👁</span> Every LaTeX document is composed of
</p>
<ul>
<li>a <strong>preamble:</strong> global settings (document class,
encoding, language, page format, additional packages, …) and</li>
<li>a <strong>document environment:</strong> content of the
document.</li>
</ul>
<pre class="lang-tex hljs fragment"><code>\documentclass{article}
\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\usepackage{babel}
\begin{document}
Hello world!
\end{document}</code></pre>
</div>
<div class="layout-preview">
<img src="svg/chapter-03/hello-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-wide-content">
<div class="layout-content">
<h2>Document class
</h2>
<pre class="lang-tex hljs"><code>\documentclass[&lt;parameter&gt;]{&lt;document_class&gt;}</code></pre>
<p>For example:</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>Encoding
</h2>
<pre class="lang-tex hljs"><code>\usepackage[utf8]{inputenc}
\usepackage[t1]{fontenc}</code></pre>
<ul>
<li>The character encoding determines which characters are
available.</li>
<li>
<strong>ASCII</strong> contains no special characters like German
umlauts.</li>
<li>
<strong>UTF-8</strong> is a universal encoding.</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Language
</h2>
<pre class="lang-tex hljs"><code>\usepackage[ngerman]{babel}</code></pre>
<ul>
<li>The package <strong><code>babel</code></strong> provides
language-specific information (e.g., hyphenation, special characters,
font changes, translated labels like chapter, table of contents or
figure).</li>
<li>
<strong><code>ngerman</code></strong> is the German new
spelling.</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Continuous Text
</h2>
<pre class="lang-tex hljs"><code>Continous text can be written directly ↲
in the source code. ↲
Simple line breaks ↲
are ignored, ↲
just as multiple space characters. ↲
An empty line creates a new paragraph ↲
which has an indentation by default. ↲
Manual line breaks can be forced ↲
using two backslashes, but this use ↲
is strongly discouraged \\ ↲
within continuous text.</code></pre>
</div>
<div class="layout-preview">
<img src="svg/chapter-03/paragraphs-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Comments
</h2>
<p>After a percent sign, the rest of the line is ignored by the
compiler. It is called a comment and does not appear in the resulting
document.</p>
<pre class="lang-tex hljs"><code>% profile start
Name: Donald Knuth \\
Date of birth: \\ % TODO: insert
Place of birth: Milwaukee, Wisconsin
% profile end</code></pre>
<p>Shortcuts: <kbd>Ctrl</kbd> + <kbd>T</kbd> and <kbd>Ctrl</kbd> +
<kbd>U</kbd></p>
</div>
<div class="layout-preview">
<img src="svg/chapter-02/comments-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2 data-category="Caution! ">Reserved characters
</h2>
<p>Some characters do things in LaTeX:</p>
<p><code># $ % ^ &amp; _ { } ~ \</code></p>
<pre class="lang-tex hljs"><code>50% is one half.</code></pre>
<p>Solution: prefix with <code>\</code>:</p>
<pre class="lang-tex hljs"><code>50\% is one half.</code></pre>
<p>Does not work for <code>\\</code>, use <code>\textbackslash</code>
instead.</p>
</div>
<div class="layout-preview">
<img src="svg/chapter-03/reserved-characters-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Sections and chapters
</h2>
<p>Texts are structured by beeing subdivided in sections and chapters.
Always available:</p>
<pre class="lang-tex hljs"><code>\section{Level 1}
\subsection{Level 2}
\subsubsection{Level 3}
\paragraph{Level 4}
\subparagraph{Level 5}</code></pre>
<p>Additionally, for some document classes:</p>
<pre class="lang-tex hljs"><code>\chapter{Chapter}
\part{Part}</code></pre>
</div>
<div class="layout-preview">
<img src="svg/chapter-03/sections-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-wide-content">
<div class="layout-content">
<h2>Front matter
</h2>
<pre class="lang-tex hljs" data-source="title.tex"><code>\title{The World of Truffles}
\author{Fooboar Rüssel \and Fachschaft WIAI}
\date{\today}
\begin{document}
\maketitle
\end{document}</code></pre>
<ul>
<li>The values for the entries are stored in the preamble.</li>
<li>
<code>\maketitle</code> typesets the front matter within the
document environment.</li>
<li>The exact appearance depends on the document class.</li>
<li>Multiple authors can be joined with <code>\and</code>.</li>
<li>If no date is given, the current date will be used. A different date
can be defined with <code>\date{}</code>.</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Front matter
</h2>
<pre class="lang-tex hljs" data-source="title.tex"><code>\documentclass{article}
\usepackage{babel}
\title{The World of Truffles}
\author{Fooboar Rüssel
\and Fachschaft WIAI}
\date{\today}
\begin{document}
\maketitle
\section{Truffle hunt}
\subsection{Hunt with a pig}
\subsection{Hunt without a pig}
Why would you do that?
\section{Truffle recipes}
My favorite recipe
\end{document}</code></pre>
</div>
<div class="layout-preview">
<img src="svg/chapter-03/title-orig.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Registers
</h2>
<pre class="lang-tex hljs"><code>\tableofcontents
\listoffigures
\listoftables</code></pre>
<ul>
<li>automatic numbering</li>
<li>elements with an asterisk (<code>*</code>) are hidden from the
register: e.g. <code>\section*{}</code>.</li>
<li><strong>generally requires two rounds of compilation</strong></li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Table of contents
</h2>
<pre class="lang-tex hljs" data-source="title.tex"><code>\documentclass{article}
\usepackage{babel}
\begin{document}
\tableofcontents
\section{Truffle hunt}
The first section.
\subsection{Hunt with a pig}
A subsection.
\subsection{Hunt without a pig}
Another subsection.
\subsubsection[But why?]
{Why would you do that?}
Sub-subsection.
\section{Truffle recipes}
My favorite recipe
\end{document}</code></pre>
</div>
<div class="layout-preview">
<img src="svg/chapter-03/contents-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-wide-content">
<div class="layout-content">
<h2 data-category="Task" data-task="3 ">Structure your document and text
</h2>
<ul>
<li>Open the file <code>document-structure.tex</code>. It is located in
the directory <code>exercises/basic-document-structure</code>.</li>
<li>Wrap the entire text in a <strong>document</strong> environment and
insert the following <strong>preamble</strong>. Compile the
document.</li>
</ul>
<pre class="lang-tex hljs fragment"><code>\documentclass{scrartcl}
\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\usepackage[english]{babel}</code></pre>
<ul>
<li>As you may already have noticed, <strong>paragraphs</strong> are
marked as <code>\\</code>. Use real paragraphs instead.</li>
<li>Time to structure our document! Use LaTex commands to declare all
<strong>headings</strong> (<code>\section</code>,
<code>\subsubsection</code>, etc.).</li>
<li>Add a <strong>table of contents</strong> to your document.</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-wide-content extra-content">
<div class="layout-content">
<h2 data-category="Extra">Document classes
</h2>
<ul>
<li>There are also other document classes than
<code>article</code>.</li>
<li>Based on the document class, the layout of the generated pdf file
changes.</li>
<li>Normally speled classes adhere to American English layout
norms.</li>
<li>
<strong><code>src</code></strong> document classes usually adhere to
European layout norms.</li>
</ul>
<p>Following document classes are available:</p>
<ul>
<li>
<strong><code>scrartcl</code>, <code>article</code></strong> for
short documents</li>
<li>
<strong><code>scrreprt</code>, <code>report</code></strong> for
longer documents</li>
<li>
<strong><code>scrbook</code>, <code>book</code></strong> for
books</li>
<li>
<strong><code>beamer</code></strong> for presentations</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-wide-content extra-content">
<div class="layout-content">
<h2 data-category="Extra">Languages
</h2>
<p>A document can use multiple languages at once:</p>
<pre class="lang-tex hljs"><code>\usepackage[ngerman, swedish, ukrainian, greek, english]{babel}</code></pre>
<p>To switch languages:</p>
<pre class="lang-tex hljs"><code>\selectlanguage{&lt;language a&gt;}
\selectlanguage{&lt;language b&gt;}</code></pre>
<p>Embedded Text in another language:</p>
<pre class="lang-tex hljs"><code>\selectlanguage{&lt;language a&gt;}
\foreignlanguage{&lt;language b&gt;}{Text of language B in a Text of language A}</code></pre>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview extra-content">
<div class="layout-content">
<h2 data-category="Extra">Languagesan example
</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 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">Headlines and the table of contents
</h2>
<p>With an asterisk, there is no numbering and no entry in the table of
contents:</p>
<pre class="lang-tex hljs"><code>\section*{No entry in table of contents}</code></pre>
<p>You can also provide an alternative title for the table of
contents:</p>
<pre class="lang-tex hljs"><code>\section[Entry in table of contents]
{Actual chapter heading}</code></pre>
</div>
<div class="layout-preview">
<img src="svg/chapter-03/sections-differently-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Before we can continue …
</h2>
<div class="box warning">
<p>Finally, <strong>comment out</strong> the preamble, the document
environment, and the table of contents.</p>
<p>Only this way, your solution can be embedded in the script itself.
(In TeXstudio, comments can be achieved by the shortcut <kbd>Strg</kbd>
+ <kbd>T</kbd>.)</p>
</div>
<p>We will learn in the following chapter why this is the case.</p>
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>
<span class="chapter-number">4
.</span>
<span>Project structure
</span>
</h1>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Goal
</h2>
<p>Create a bigger LaTeX project and …</p>
<ul>
<li>prevent LaTeX documents from growing monstrously <span class="emoji">👹</span>
</li>
<li>keep the overview over the project structure</li>
</ul>
</div>
<div class="layout-preview">
<img 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>Main file <span class="emoji">👑</span>
</h2>
<ul>
<li>contains basic structure</li>
<li>includes separate sections with<br>
<code>\input{path/to/file}</code>
</li>
</ul>
<pre class="lang-tex hljs" data-sourcefile="main.tex"><code>\documentclass{article}
\usepackage{babel}
\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\title{A Title}
\begin{document}
\maketitle
\tableofcontents
\input{section1.tex}
\input{section2.tex}
\end{document}</code></pre>
</div>
<div class="layout-preview">
<img src="svg/chapter-04/main-orig.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>File with a section
</h2>
<ul>
<li>contains <strong>no preamble</strong>
</li>
<li>contains <strong>no</strong> <code>\begin{document}</code> or
<code>\end{document}</code>
</li>
</ul>
<pre class="hljs lang-tex" data-sourcefile="part1.tex"><code>\section{This is section 1}
A paragraph about the content
of section 1.
% …</code></pre>
<pre class="hljs lang-tex" data-sourcefile="part2.tex"><code>\section{This is section 2}
A paragraph about the content
of section 2.
% …</code></pre>
</div>
<div class="layout-preview">
<img src="svg/chapter-04/main-parts-crop.svg" class="thin-padding">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2 data-category="Excursion ">Specifying file paths <span class="emoji">👣</span>
</h2>
<ul>
<li>important for <code>\input{}</code>, but later also for other media
types</li>
<li>file and folder structure = tree structure <span class="emoji">🌳</span>
</li>
<li>with <code>\input{}</code>, you can specify the path relative to the
main file</li>
</ul>
<p data-category="Caution!" class="fragment">
In <strong>LaTeX,</strong> you have to use UNIX-style paths. They are
separated by a forward slash: <code>path/to/file</code>. We will use
those from here on.
</p>
</div>
<div class="layout-preview">
<img src="svg/chapter-04/tree-english-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2 data-category="Excursion ">Specifying file paths <span class="emoji">👣</span>
</h2>
<p data-category="Example">
<code>main-exercises.tex</code><code>praeamble.tex</code>
</p>
<div class="fragment">
<p><code>./praeamble.tex</code></p>
<p>A <strong>single dot <code>.</code></strong> represents the current
folder (in this case: <code>latex-skript</code>). It is optional, you
could also write <code>praeamble.tex</code> here.</p>
</div>
</div>
<div class="layout-preview">
<img src="svg/chapter-04/relative-path-english-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2 data-category="Excursion ">Specifying file paths <span class="emoji">👣</span>
</h2>
<p data-category="Example">
<code>main-exercises.tex</code>
<code>basic-document-structure.tex</code> (in a subfolder)
</p>
<pre class="fragment">./content/basic-document-structure.tex</pre>
</div>
<div class="layout-preview">
<img src="svg/chapter-04/relative-path-subdir-english-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2 data-category="Excursion ">Specifying file paths <span class="emoji">👣</span>
</h2>
<p data-category="Example">
<code>task.tex</code><code>graphics.raw.tex</code> (while
<code>task.tex</code> is imported into <code>main-exercises.tex</code>)
</p>
<div class="fragment">
<pre>./exercises/graphics/graphics.raw.tex</pre>
<p data-category="Caution!">
Paths are always relative to the root document that imports other files
as fragments.
</p>
</div>
</div>
<div class="layout-preview">
<img src="svg/chapter-04/relative-path-transitive-english-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2 data-category="Demo ">Compiling the project
</h2>
<ul>
<li>
<strong>Only the main file</strong> has to be compiled to get the
complete PDF document.</li>
<li class="fragment">Error messages include a reference to the corresponding
subfile.</li>
<li class="fragment">Subfiles cannot be compiled on their own as they dont have a
preamble.</li>
</ul>
<div class="box warning fragment">
<p>From now on, we will compile the file <code>main-exercises.tex</code>
in the project root. To do so, right click on the file in TeXstudio and
choose <strong>“Select as explicit root document”</strong> from the
dropdown. Next, compile as usual.</p>
</div>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2 data-category="Task" data-task="4 ">A structured project
</h2>
<p>You will find a file named <code>main.tex</code> in the folder
<code>exercises/project-structure</code>.</p>
<ul>
<li>Put the sections of the file into separate files, named
<code>section1.tex</code> and <code>section2.tex</code>.</li>
<li>Include them using the <code>\input</code> command.</li>
<li>Move the preamble to its own file in a similar fashion.</li>
<li>Finally, have a look at the general project archive, starting from
<code>main-exercises.tex</code> (in the root folder of the project
archive). How do we include the different sections here?</li>
</ul>
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>
<span class="chapter-number">5
.</span>
<span>Special characters
</span>
</h1>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Spaces
</h2>
<ul>
<li>Use thin spaces (<code>\,</code>) and non-breaking spaces
(<code>~</code>), where appropriate.</li>
</ul>
<pre class="hljs lang-tex"><code>Thin spaces are used in abbreviations
and before units, e.\,g., 10\,s.
Normal-width non-breaking spaces can help
keep honorary titles and names on one
line: Dr.~Fooboar.</code></pre>
<ul>
<li class="fragment">Use french spacing (<code>\frenchspacing</code>) to avoid giant
gaps after full stops.</li>
</ul>
</div>
<div class="layout-preview">
<img src="svg/chapter-05/spaces-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Hyphens and dashes
</h2>
<table>
<tr>
<th>
</th>
<th>
Name
</th>
<th>
Use
</th>
<th>
Code
</th>
</tr>
<tr>
<td>
-
</td>
<td>
Hyphen
</td>
<td>
compound-forming hyphen
</td>
<td>
<code>-</code>
</td>
</tr>
<tr>
<td>
</td>
<td>
En dash <em>(Halbgeviert­strich)</em>
</td>
<td>
a dash or a range: 122 p.m.
</td>
<td>
<code>--</code>
</td>
</tr>
<tr>
<td>
</td>
<td>
Em dash <em>(Geviertstrich)</em>
</td>
<td>
a dashmostly in American English
</td>
<td>
<code>---</code>
</td>
</tr>
</table>
</div>
<div class="layout-preview">
<img src="svg/chapter-05/hyphens-and-dashes-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Quotes
</h2>
<p>The <code>csquotes</code> package provides, amongst others, the
command <code>\enquote</code>.</p>
<pre class="lang-tex hljs"><code>\enquote{A \enquote{nested}
quote.}</code></pre>
<p>When included with <code>autostyle=true</code>, foreign-language
quotes use the according quotation marks:</p>
<pre class="lang-tex hljs"><code>\foreignquote{ngerman}{Ein deutsches
Zitat.}</code></pre>
</div>
<div class="layout-preview">
<img src="svg/chapter-05/quotes-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Special characters &amp; symbols
</h2>
<h3 id="detexify-to-the-rescue">Detexify to the rescue! <span class="emoji">⛑️</span>
</h3>
<ul>
<li>A long list of symbols to use:<br>
<a href="http://tug.ctan.org/info/symbols/comprehensive/symbols-a4.pdf">PDF
on the CTAN website</a>
</li>
<li>Draw symbols and have them recognised:<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="Task" data-task="5 ">Insert special characters
</h2>
<div class="box warning">
<p>From now on, compile the file <code>main-exercises.tex</code> to see
your changes appear in the exercise script (in this task, see exercise
5).</p>
</div>
<ul>
<li>Replace the spaces in <code>exercises/special-characters.tex</code>
within the abbreviations (“e.g.”, “i.a.”) by <strong>thin
spaces</strong>.</li>
<li>Replace the hyphens separating the opening hours by <strong>en
dashes</strong> (<code>--</code>), optionally surrounded by thin
spaces.</li>
<li>Add <strong>quotation marks</strong> around the words
<em>Studi-Ticket</em> and <em>Studi-Karte</em> using the
<code>\enquote</code> command.</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview extra-content">
<div class="layout-content">
<h2 data-category="Extra">English and French spacing
</h2>
<p>In English, LaTeX uses the old-fashioned <em>English spacing,</em>
i.e., double sentence spacing.</p>
<p>If you want to be more modern, you can use
<code>\frenchspacing</code> above your first paragraph.
<code>\nonfrenchspacing</code> goes back to default.</p>
<p>If you actually use <em>English spacing,</em> LaTeX will still try
and put normal word spacing after abbreviations. However, you should
check the results and intervene where needed by</p>
<ul>
<li>forcing normal spaces: <code>.\␣</code>
</li>
<li>manually ending sentences: <code>\@.␣</code>
</li>
</ul>
</div>
<div class="layout-preview">
<img 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">Hyphenation
</h2>
<p>Most of the time, LaTeX hyphenates words correctly, if the correct
language is configured. Sometimes, however, manual intervention is
necessary.</p>
<table>
<tr>
<td>
Exclusive hyphenation
</td>
<td>
<code>\-</code>
</td>
</tr>
<tr>
<td>
Additional hyphenation
</td>
<td>
<code>"-</code>
</td>
</tr>
<tr>
<td>
Hyphen (suppressing other hyphenation)
</td>
<td>
<code>-</code>
</td>
</tr>
<tr>
<td>
Hyphen (allowing other hyphenation)
</td>
<td>
<code>"=</code>
</td>
</tr>
<tr>
<td>
Possible separation without hyphen
</td>
<td>
<code>""</code>
</td>
</tr>
<tr>
<td>
Non-breaking hyphen
</td>
<td>
<code>"~</code>
</td>
</tr>
</table>
<p data-category="Caution!">
Some of the codes only work when you use the <code>babel</code> package.
</p>
</div>
<div class="layout-preview">
<img src="svg/chapter-05/hyphenation-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only extra-content">
<div class="layout-content">
<h2 data-category="Extra">Manual quotation
</h2>
<table>
<tr>
<th>
Language
</th>
<th style="text-align: center;">
Command
</th>
<th style="text-align: center;">
Result
</th>
</tr>
<tr>
<td>
English (B.E.)
</td>
<td style="text-align: center;">
<code> `…' </code>
</td>
<td style="text-align: center;">
‘ … ’
</td>
</tr>
<tr>
<td>
2nd Level
</td>
<td style="text-align: center;">
<code>``…''</code>
</td>
<td style="text-align: center;">
“ … ”
</td>
</tr>
<tr>
<td>
English (A.E.)
</td>
<td style="text-align: center;">
<code>``…''</code>
</td>
<td style="text-align: center;">
“ … ”
</td>
</tr>
<tr>
<td>
2nd Level
</td>
<td style="text-align: center;">
<code> `…' </code>
</td>
<td style="text-align: center;">
‘ … ’
</td>
</tr>
<tr>
<td>
German
</td>
<td style="text-align: center;">
<code>\glqq … \grqq</code>
</td>
<td style="text-align: center;">
„ … “
</td>
</tr>
<tr>
<td>
2nd Level
</td>
<td style="text-align: center;">
<code>\glq … \grq</code>
</td>
<td style="text-align: center;">
‚ … ’
</td>
</tr>
<tr>
<td>
German altern.
</td>
<td style="text-align: center;">
<code>\frqq … \flqq</code>
</td>
<td style="text-align: center;">
» … «
</td>
</tr>
<tr>
<td>
2nd Level
</td>
<td style="text-align: center;">
<code>\frq … \flq</code>
</td>
<td style="text-align: center;">
› … ‹
</td>
</tr>
</table>
<p>Other rules my apply for other languages, but most of the time its
the same characters, only combined differently.</p>
</div>
</div>
</article>
<article>
<div class="layout-content-only extra-content">
<div class="layout-content">
<h2 data-category="Extra">Diacritics
</h2>
<p>Letters with diacritics can either by typed directly on the keyboard
or via 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">Special characters
</h2>
<p>The same is true for special characters: They can either be typed
directly or created via escape codes and commands:</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>… and pretty much anything else.</p>
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>
<span class="chapter-number">6
.</span>
<span>Text Markup
</span>
</h1>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Emphases
</h2>
<p>Continuous text can be emphasized with <code>\emph{}</code>:</p>
<pre class="lang-tex hljs"><code>\emph{Emphasize important
\emph{and even more important} text}</code></pre>
<p>Furthermore, optical highlighting can be used.</p>
<table>
<tr>
<th>
Name
</th>
<th>
Befehl
</th>
</tr>
<tr>
<td>
Bold (bold face)
</td>
<td>
<code>\textbf{important}</code>
</td>
</tr>
<tr>
<td>
Italics (italics)
</td>
<td>
<code>\textit{important}</code>
</td>
</tr>
<tr>
<td>
Small caps
</td>
<td>
<code>\textsc{important}</code>
</td>
</tr>
<tr>
<td>
non-proportional (teletype)
</td>
<td>
<code>\texttt{important}</code>
</td>
</tr>
<tr>
<td>
underlined
</td>
<td>
<code>\underline{important}</code>
</td>
</tr>
</table>
</div>
<div class="layout-preview">
<img class="thin-padding" src="svg/chapter-06/emphases-crop.svg" style="margin-bottom: 0;">
<img class="thin-padding fragment" src="svg/chapter-06/optical-highlighting-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>Some well-meaning advice</strong></p>
<p>You want the entire document to look consistent?</p>
<p>Trust LaTeXs defaults (font sizes of title, paragraphs, footnotes,
etc.)!</p>
<p>This conversely means: Avoid fiddling around with font sizes
manually.</p>
</div>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>URLs
</h2>
<p>The <code>hyperref</code> package provides an <code>\url{}</code>
command that reproduces URLs</p>
<ul>
<li>letter by letter</li>
<li>using line breaks without hyphens</li>
<li>using a font with well-distinguishable characters</li>
<li>as a clickable link in the PDF</li>
</ul>
<pre class="lang-tex hljs"><code>\url{https://www.latex-project.org/}</code></pre>
</div>
<div class="layout-preview">
<img src="svg/chapter-06/url-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2 data-category="Task" data-task="6 ">Emphasising text
</h2>
<ul>
<li>
<strong>Emphasise</strong> the words <em>Recursion</em> and
<em>recursive</em> in <code>exercises/text-markup/markup.tex</code>
using <code>\emph{…}</code>.</li>
<li>Make the <strong>URL</strong> in the text clickable.</li>
<li>Of course, you can also experiment with the other <strong>text
markup</strong> possibilities. However, remove them afterwards, if you
want to have a clean document.</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview extra-content">
<div class="layout-content">
<h2 data-category="Extra">Font size
</h2>
<h3 id="preset-font-sizes">Preset font sizes</h3>
<pre class="hljs lang-tex"><code>{\&lt;fontsize&gt; some text}</code></pre>
<p>Font sizes relative to <code>normalsize</code>:</p>
<pre class="hljs lang-tex"><code>{\tiny If}
{\footnotesize you}
{\small can}
{\normalsize read}
{\large this,}
{\Large you}
{\LARGE dont}
{\huge need}
{\Huge glasses.}</code></pre>
</div>
<div class="layout-preview">
<img src="svg/chapter-06/font-size-optician-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">Ragged alignment
</h2>
<p>By default, LaTeX sets text in full justification, but it is possible
to activate ragged alignment.</p>
<pre class="lang-tex hljs"><code>\raggedright … \raggedleft …
\centering …</code></pre>
<p>Alternatively, we can use dedicated environments:</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="Caution!">
Proper ragged alignment is even more difficult than good justification,
so better avoid it.
</p>
</div>
<div class="layout-preview">
<img 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">Indentation and spacing
</h2>
<ul>
<li>paragraphs are usually indicated by first-line indentation
(<code>\parindent</code>)</li>
<li>we can decide to use paragraph spacing (<code>\parskip</code>)
instead (!)</li>
<li>both parameters are customisable:</li>
</ul>
<pre class="lang-tex hljs"><code>\setlength{\parindent}{0pt}
\setlength{\parskip}{1em
plus .5em % permitted stretch
minus .5em % permitted compression
}</code></pre>
<ul>
<li>
<code>\noindent</code> allows us to disable first-line indentation
for a given paragraph</li>
</ul>
</div>
<div class="layout-preview">
<img src="./svg/chapter-07/indentation-spacing-orig.svg">
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>
<span class="chapter-number">7
.</span>
<span>Enumerations
</span>
</h1>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Unordered lists 📜
</h2>
<pre class="lang-tex hljs"><code>\begin{itemize}
\item lasagna noodles
\item crushed tomatoes, % …
\item oregano, basil, % …
\item mozzarella cheese
\item flour
\item milk
\end{itemize}</code></pre>
<p>We mark each bullet point with <code>\item</code>. This pattern is
the same for all kinds of enumerations.</p>
</div>
<div class="layout-preview">
<img src="svg/chapter-08/itemize-english-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Ordered and definition lists
</h2>
<pre class="lang-tex hljs"><code>\begin{enumerate}
\item cook onions over medium % …
\item add crushed tomatoes, carrots % …
\item add herbs and spices % …
% \item …
\end{enumerate}</code></pre>
<pre class="lang-tex hljs fragment"><code>\begin{description}
\item [Béchamel sauce] Béchamel % …
\item [Lasagne] Lasagne (singular % …
\end{description}</code></pre>
</div>
<div class="layout-preview">
<img class="thin-padding" src="svg/chapter-08/enumerate-english-crop.svg" style="margin-bottom: 0;">
<img class="thin-padding fragment" src="svg/chapter-08/definition-english-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Nested lists
</h2>
<pre class="lang-tex hljs"><code>\begin{itemize}
% …
\item vegetables \begin{itemize}
\item crushed tomatoes
\item carrots
\end{itemize}
\item herbs \begin{enumerate}
\item oregano
\item basil
\end{enumerate}
% …
\end{itemize}</code></pre>
</div>
<div class="layout-preview">
<img src="svg/chapter-08/nested-lists-english-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2 data-category="Task" data-task="7 ">Adding enumerations
</h2>
<ul>
<li>Turn the recipe in <code>lists.tex</code> into an <strong>unordered
list</strong> consisting of the elements <em>Ingredients</em> and
<em>Instructions</em>. You can find the file in the directory
<code>exercises/lists</code>. Use the <code>itemize</code> command.</li>
<li>Within this list, create a <strong>unordered list</strong> for the
ingredients and a <strong>ordered list</strong> for the
instructions.</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview extra-content">
<div class="layout-content">
<h2 data-category="Extra">Compact lists
</h2>
<p>The package <code>paralist</code> offers enumerations with less line
spacing.</p>
<pre class="lang-tex hljs"><code>\section{Ingredients}
\begin{compactitem}
% \item …
\end{compactitem}
\section{Preparation}
\begin{compactenum}
% \item …
\end{compactenum}
\section{Glossary}
\begin{compactdesc}
% \item …
\end{compactdesc}</code></pre>
</div>
<div class="layout-preview">
<img src="svg/chapter-08/compact-english-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview extra-content">
<div class="layout-content">
<h2 data-category="Extra">In-line enumerations
</h2>
<p>Another feature provided by <code>paralist</code> enables us to
integrate enumerations into paragraphs.</p>
<pre class="lang-tex hljs"><code>The following herbs are % …
\begin{inparaitem}
\item lovage
\item parsley
\item chives
\end{inparaitem}</code></pre>
<p>Of course, there is an accompanying list type called
<code>inparaenum</code> for ordered lists.</p>
</div>
<div class="layout-preview">
<img class="thin-padding" src="svg/chapter-08/paralist-extended-english-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview extra-content">
<div class="layout-content">
<h2 data-category="Extra">List styles
</h2>
<p>The list style type can be set using the optional parameter
<code>label</code>. To accomplish this, we need to include the package
<code>enumitem</code> first.</p>
<pre class="lang-tex hljs"><code>% Roman numerals
\begin{enumerate}[label=\roman*]
% …
% Arabic numerals
\begin{enumerate}[label=\arabic*]
% …
% Alphabetical
\begin{enumerate}[label=\alph*]
% …</code></pre>
</div>
<div class="layout-preview">
<img src="svg/chapter-08/list-style-types-english-crop.svg">
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>
<span class="chapter-number">8
.</span>
<span>Typesetting mathematics
</span>
</h1>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Formula environments 🧮
</h2>
<pre class="lang-tex hljs"><code>$2 \sqrt{\frac{\pi^2}{3} \cdot c_2}$</code></pre>
<p>Mathematical formulas are only accepted in the so-called <strong>math
mode.</strong> In-line formulas must therefor be guarded by two dollar
signs. We can also use the <code>equation</code> block environment:</p>
<pre class="lang-tex hljs"><code>\begin{equation}
2 \sqrt{\frac{\pi^2}{3} \cdot c_2}
\end{equation}</code></pre>
<p>Packages: <code>amsmath</code>, <code>amsthm</code>,
<code>amssymb</code>, <code>mathtools</code></p>
</div>
<div class="layout-preview">
<img src="svg/chapter-09/simple-maths-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Examples
</h2>
<table>
<tr>
<th>
source code
</th>
<th>
result
</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>Aligning a group of equations
</h2>
<p>The <code>align</code> environment permits us to align equations at
certain positions like the = character.</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">The equations will be aligned with respect to the ampersands
(<code>&amp;</code>).</li>
<li class="fragment">We can mark a new line using <code>\\</code>.</li>
<li class="fragment"><code>align</code> and <code>equation</code> will not be numbered
if we add an asterisk after their names (e.g.
<code>\begin{align*}</code> and <code>\end{align*}</code>).</li>
</ul>
</div>
<div class="layout-preview">
<img src="svg/chapter-09/alignment-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2 data-category="Task" data-task="8a " class="task-without-number">
Typesetting mathematics
</h2>
<p>Code up the following formulas in the file
<code>exercises/maths/math-formulas.tex</code>.</p>
<table>
<colgroup>
<col style="width: 52%">
<col style="width: 47%">
</colgroup>
<thead>
<tr class="header">
<th>Meaning</th>
<th>Result</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>Gravitational acceleration</td>
<td><span class="math inline">\(9,81\,\frac{m}{s^2}\)</span></td>
</tr>
<tr class="even">
<td>Formula to solve quadratic equations</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>Another formula to solve quadratic equations</td>
<td><span class="math inline">\(x_{1,2} = \frac{-b \pm \sqrt{b^2 -
4ac}}{2a}\)</span></td>
</tr>
<tr class="even">
<td>Catalan numbers</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="Task" data-task="8b " class="task-without-number">
Typesetting mathematics
</h2>
<p>Code up the following formulas in the file
<code>exercises/maths/math-formulas.tex</code>.</p>
<table>
<colgroup>
<col style="width: 52%">
<col style="width: 47%">
</colgroup>
<thead>
<tr class="header">
<th>Meaning</th>
<th>Result</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>Definition of factorial</td>
<td><span class="math inline">\(n! = \prod_{i=1}^{n} i\)</span></td>
</tr>
<tr class="even">
<td>Set of all odd natural numbers</td>
<td><span class="math inline">\(\{ x \mid x \in \mathbb{N},
\text{odd}(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">More examples
</h2>
<table>
<tr>
<th>
source code
</th>
<th>
result
</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">Height-adapting braces
</h2>
<table>
<tr>
<th>
source code
</th>
<th>
result
</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">Depicting boundaries
</h2>
<p>The bounds of an integral can be enforced to appear above and below
the integral symbol using the <code>\limits</code> command. This is the
standard behaviour for sums, products and limits.</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="Caution!">
Dont use <code>\limits</code> inline.
</p>
</div>
<div class="layout-preview">
<img 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">Set-builder notation
</h2>
<p>In certain situations, it is more adequate to use textual predicates
or long function names within the set builder notation.</p>
<p>This is where <code>\text{}</code> comes into play.</p>
<p style="text-align: center;">
<span class="math inline">\(\left\lbrace x \mid frequency(x) \geq
20\right\rbrace\)</span>
</p>
<p style="text-align: center;">
<span class="math inline">\(\left\lbrace x \mid \text{frequency}(x) \geq
20\right\rbrace\)</span>
</p>
<pre class="lang-tex hljs fragment"><code>$\left\lbrace x \mid \text{frequency} …</code></pre>
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>
<span class="chapter-number">9
.</span>
<span>Graphics
</span>
</h1>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Including graphics <span class="emoji">🖼️</span>
</h2>
<p>To display graphics, we need the <code>graphicx</code> package.</p>
<pre class="lang-tex hljs"><code>\begin{figure}
\includegraphics{&lt;file path&gt;}
\caption[&lt;short caption (table of
figures)&gt;]{&lt;full caption&gt;}
\end{figure}</code></pre>
<p>Specifying the size:</p>
<pre class="lang-tex hljs"><code>\includegraphics[width=0.5\textwidth,
height=5cm]{&lt;file path&gt;}</code></pre>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Layout on the page
</h2>
<pre class="lang-tex hljs"><code>\begin{figure}[&lt;position code&gt;]</code></pre>
<p>LaTeX places graphics automatically. With position codes, we can
express our preferences (they can be combined as well).</p>
<table>
<tr>
<th style="min-width:4em">
code
</th>
<th>
position
</th>
</tr>
<tr class="fragment">
<td>
h
</td>
<td>
here, if you dont mind
</td>
</tr>
<tr class="fragment">
<td>
t
</td>
<td>
top of the page
</td>
</tr>
<tr class="fragment">
<td>
b
</td>
<td>
bottom of the page
</td>
</tr>
<tr class="fragment">
<td>
p
</td>
<td>
on its own page
</td>
</tr>
<tr class="fragment">
<td>
H
</td>
<td>
Here, for Gods sake! <br>(<code>float</code> package required)
</td>
</tr>
</table>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Centred alignment
</h2>
<pre class="lang-tex hljs"><code>\begin{figure}[&lt;position&gt;]
\begin{center}
\includegraphics{&lt;path-to-file&gt;}
\end{center}
\end{figure}</code></pre>
<p>Alternatively:</p>
<pre class="lang-tex hljs"><code>\begin{figure}[&lt;position&gt;]
\centering
\includegraphics{&lt;path-to-file&gt;}
\end{figure}</code></pre>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2 data-category="Task" data-task="9 ">Inserting graphics
</h2>
<ul>
<li>In the directory <code>exercises/graphics</code> you can find an
image file named <code>latex-logo.png</code>.</li>
<li>
<strong>Include</strong> the figure in
<code>exercises/graphics/graphics.tex</code> and place it
<strong>exactly</strong> where you include it.</li>
<li>The image shall be <strong>centered</strong>.</li>
<li>Additionally, add a <strong>caption</strong> for the figure.</li>
<li>Adapt the <strong>width</strong> of the image to the width of the
text (<code>\textwidth</code>).</li>
</ul>
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>
<span class="chapter-number">10
.</span>
<span>Tables
</span>
</h1>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Basic structure <span class="emoji">🗒️</span>
</h2>
<p>For typographically pleasing tables, we use the <code>booktabs</code>
package.</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;column definition&gt;}
% table content
\end{tabular}
\caption{&lt;caption&gt;}
\end{table}</code></pre>
<p>Positioning works just like with graphics.</p>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Column definitions
</h2>
<pre class="hljs lang-tex"><code>\begin{tabular}{lrcl}
% table content
\end{tabular}</code></pre>
<table>
<tr>
<th>
letter
</th>
<th>
meaning
</th>
</tr>
<tr class="fragment">
<td>
l
</td>
<td>
left-justified column
</td>
</tr>
<tr class="fragment">
<td>
c
</td>
<td>
centred column
</td>
</tr>
<tr class="fragment">
<td>
r
</td>
<td>
right-justified column
</td>
</tr>
</table>
<p class="fragment">Vertical separator lines and double horizontal lines are frowned
upon by typographers and should be avoided.</p>
</div>
<div class="layout-preview">
<img src="svg/chapter-12/table-example-crop.svg" class="thin-padding">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Table content
</h2>
<pre class="hljs lang-tex"><code>\begin{tabular}{lll}
\toprule
Column 1 &amp; Column 2 &amp; Column 3 \\
\midrule
Content a &amp; Content b &amp; Content c \\
Content e &amp; Content f &amp; Content g \\
Content i &amp; Content j &amp; Content k \\
\bottomrule
\end{tabular}</code></pre>
<ul>
<li class="fragment">Columns are separated by <code>&amp;</code>.</li>
<li class="fragment">Rows are ended by <code>\\</code>.</li>
<li class="fragment"><code>\toprule</code>, <code>\midrule</code> and
<code>\bottomrule</code> structure the table.</li>
</ul>
</div>
<div class="layout-preview">
<img src="svg/chapter-12/table-content-example-crop.svg" class="thin-padding">
</div>
</div>
</article>
<article>
<div class="layout-wide-content">
<div class="layout-content">
<h2>The entire table
</h2>
<pre class="hljs lang-tex"><code>\begin{table}[h]
\begin{tabular}{lrcl}
\toprule
Language &amp; Author &amp; Year &amp; Filename extension \\
\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{Well-known programming languages}
\end{table}</code></pre>
<p data-category="Note">
<code>@{}</code> to the left and right of a column definition removes
the padding of the corresponding column.
</p>
<p data-category="Example">
<code>\begin{tabular}{@{}lrcl@{}}</code> limits the row separators to
the width of the table content
</p>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>More comfort
</h2>
<p>The <a href="https://tablesgenerator.com/">Tables Generator</a> is a
wonderful tool to quickly create tables of different formats.</p>
<p><a href="https://tablesgenerator.com/"><img 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="Task" data-task="10 ">Typesetting tables
</h2>
<ul>
<li>The list in file <code>exercises/tables/tables.tex</code> stores
information on a few modules of the WIAI faculty.</li>
<li>Transform the list into a <strong>table</strong>.</li>
<li>The table shall have colums for the <em>name</em>, the
<em>abbreviation</em> (Kürzel) and the <em>semester</em> of the
lectures.</li>
<li>Add a <strong>column</strong> with <strong>center-aligned
text</strong> on the left side of the table in order to
<strong>number</strong> the lectures.</li>
<li>Add a <strong>caption</strong> for the table.</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-content-only extra-content">
<div class="layout-content">
<h2 data-category="Extra">Particularly long tables
</h2>
<p>Tables that exceed one page are simply cut off by
<code>tabular</code>. A solution is offered by the
<code>longtable</code> package:</p>
<pre class="hljs lang-tex"><code>\usepackage{longtable}</code></pre>
<pre class="hljs lang-tex"><code>\begin{longtable}{&lt;column definition&gt;}
% table content
\caption{&lt;caption&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">Notes on <code>longtable</code>
</h2>
<pre class="hljs lang-tex"><code>\begin{longtable}{&lt;column definition&gt;}
% table content
\caption{&lt;caption&gt;}
\label{&lt;label&gt;}
\end{longtable}</code></pre>
<ul>
<li>The <code>longtable</code> environment merges the
<code>tabular</code> and <code>table</code> environments.</li>
<li>Caption and label can therefore be inserted directly under the table
content.</li>
<li>As long as the <code>booktabs</code> package is used, its features
are also provided in <code>longtable</code>.</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-content-only extra-content">
<div class="layout-content">
<h2 data-category="Extra">Particularly wide tables
</h2>
<p>If you need a table to be wider than a page, you can display it in
landscape orientation:</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;column def.&gt;}
% table content
\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">An advanced example
</h2>
<pre class="hljs lang-tex"><code>\begin{table}[h]
\begin{tabular}{llr}
\toprule
Structure &amp; \multicolumn{2}{l}{Access time complexity} \\ \cmidrule(r){2-3}
&amp; Average &amp; Worst \\
\midrule
Stack &amp; $\mathcal{O}(n)$ &amp; $\mathcal{O}(n)$ \\
Binary tree &amp; $\mathcal{O}(log(n))$ &amp; $\mathcal{O}(n)$ \\
AVL tree &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> Booktabs documentation</a></p>
</div>
<div class="layout-preview">
<img src="svg/chapter-12/table-advanced-example-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>
<span>References and footnotes
</span>
</h1>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Footnotes <span class="emoji">📎</span>
</h2>
<pre class="hljs lang-tex"><code>\usepackage{hyperref}</code></pre>
<p>Footnotes are automatically numbered consecutively, independent of
sections.</p>
<p>(Here, <code>hyperref</code> is used for the <code>\url</code>
command, it is not necessary for footnotes per se.)</p>
<pre class="hljs lang-tex"><code>The wild boar (\textit{Sus scrofa}), also
known as the wild swine, common wild pig,
or simply wild pig, is a suid native to
much of Eurasia and North Africa, and has
been introduced to the Americas and Oceania.
\footnote{\url{https://en.wikipedia.org/
wiki/Wild_boar}}</code></pre>
</div>
<div class="layout-preview">
<img src="svg/chapter-13/footnote-example-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Cross-references
</h2>
<p>Manually (just dont!)</p>
<pre class="hljs lang-tex"><code>As you can see in figure 23, …</code></pre>
<p>Using the <code>\ref</code> command:</p>
<pre class="hljs lang-tex"><code>\begin{figure}[H]
\includegraphics % …
\caption{Our mascot Fooboar}
\label{img:fooboar}
\end{figure}
As you can see in figure
\ref{img:fooboar}, …</code></pre>
</div>
<div class="layout-preview">
<img src="svg/chapter-13/ref-example-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Assigning labels
</h2>
<p>Both cross-reference commands work with <strong>sections, figures,
tables, listings, and equations,</strong> as long as you use correct
labels.</p>
<p>Labels have to be <strong>unambiguous.</strong> For clarity, certain
prefixes are common, and some packages use them to derive
information.</p>
<table>
<tr>
<td>
<code>fig:</code> Figures
</td>
<td>
<code>tbl:</code> Tables
</td>
</tr>
<tr>
<td>
<code>sec:</code> Sections
</td>
<td>
<code>subsec:</code> Subsections
</td>
</tr>
<tr>
<td>
<code>ch:</code> Chapters
</td>
<td>
<code>itm:</code> Enumeration items
</td>
</tr>
<tr>
<td>
<code>eq:</code> Equations
</td>
<td>
<code>lst:</code> Source code listings
</td>
</tr>
</table>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Cross-references
</h2>
<p>Using the <code>cleveref</code> package (with <em>one</em> r!):</p>
<pre class="hljs lang-tex"><code>\begin{figure}[H]
\includegraphics % …
\caption{Our mascot Fooboar}
\label{img:fooboar}
\end{figure}
Fooboar is a young and highly engaged
boar (see \Cref{img:fooboar}).</code></pre>
<p>The <code>\cref</code> command automatically inserts suitable
prefixes.</p>
</div>
<div class="layout-preview">
<img src="svg/chapter-13/cref-example-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Things to consider
</h2>
<ul>
<li>
<p>Terms inserted by <code>\cref</code> use the language specified
with the document class (or <code>babel</code>):</p>
<pre class="hljs lang-tex"><code>\documentclass[english]{article}</code></pre>
</li>
<li><p>Apart from sections, referenced elements need captions
(<code>\caption{…}</code>), and the <strong>captions have to be placed
before the label.</strong></p></li>
<li>
<p>For sectioning commands, the label is inserted directly after the
section command.</p>
<pre class="hljs lang-tex"><code>\section{Notes}\label{sec:notes}</code></pre>
</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2 data-category="Task" data-task="11a ">Inserting footnotes
</h2>
<ul>
<li>Make the text <em>March 2023</em> in file
<code>exercises/footnotes/footnotes.tex</code> appear as a
<strong>footnote</strong>.</li>
<li>Additionally, insert a <strong>clickable URL</strong> that leads to
the download page for the Java Development Kit
(<code>https://www.oracle.com/java/technologies/javase-downloads.html</code>).</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2 data-category="Task" data-task="11b ">Inserting references
</h2>
<ul>
<li>In file <code>exercises/references/references.tex</code>, replace
<em>In the figure</em> and <em>The following source code listing</em> by
<strong>references</strong> to the figure and to the source code
listing.</li>
<li>Use the command <code>\Cref</code> for the references.</li>
<li>Make sure to add <strong>labels</strong> to the elements that you
want to create a reference for.</li>
<li>For source code listings, adding labels and captions is a bit
different. Try to apply the knowledge you gained so far to retrieve the
correct version of the <code>\lstinputlisting</code> command. Use the
Internet, if necessary.</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview extra-content">
<div class="layout-content">
<h2 data-category="Extra">Configuring footnotes
</h2>
<p>The <code>footmisc</code> package provides additional options for the
presentation of footnotes that can be activated by adding parameters to
the <code>\usepackage</code> command.</p>
<pre class="hljs lang-tex"><code>% Reset the counter on each page:
\usepackage[perpage]{footmisc}
% Display footnotes in-line:
\usepackage[para]{footmisc}
% Use symbols instead of numbers:
\usepackage[symbol]{footmisc}</code></pre>
</div>
<div class="layout-preview">
<img src="svg/chapter-13/footmisc-en-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">A few more things
</h2>
<ul>
<li>It is recommended that you include the package <code>hyperref</code>
before <code>cleveref</code>.</li>
<li>
<code>\cref</code> can take multiple references at once, separated
by commas.</li>
</ul>
<pre class="hljs lang-tex"><code>\section{An introduction}
\label{sec:section1}
% …
Reference be made to
\cref{sec:section1,sec:section2,
sec:section3,sec:section5}.</code></pre>
</div>
<div class="layout-preview">
<img src="svg/chapter-13/cref-multiple-example-crop.svg">
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>
<span class="chapter-number">12
.</span>
<span>Reference management
</span>
</h1>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>What do we need?
</h2>
<ul>
<li>a <strong>bibliography file</strong> (hereafter <code>.bib</code>
file) for storing references</li>
<li>
<strong>BibTeX</strong> as an interface between the references and
LaTeX</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-wide-content">
<div class="layout-content">
<h2>What is this mysterious <code>.bib</code> file?
</h2>
<ul>
<li>collection of references in BibTeX format</li>
<li>example:</li>
</ul>
<pre class="hljs lang-tex"><code>@article{turing1990, % the type of the document and an identifier for the \cite command
title={The chemical basis of morphogenesis}, % information
author={Turing, Alan Mathison}, % about
journal={Bulletin of mathematical biology}, % the
volume={52}, % literature
pages={153--197}, % work
year={1990}, % follows
publisher={Springer} % …
}</code></pre>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>How is it used?
</h2>
<p>BibTeX adds some citation commands to LaTeX. In addition, we need the
<code>natbib</code> package.</p>
<ul>
<li class="fragment">Citing an author: <code>\citeauthor{&lt;source&gt;}</code>
</li>
<li class="fragment">Citing a source: <code>\cite{&lt;source&gt;}</code>
</li>
<li class="fragment">Citing a page: <code>\cite[p. 15]{&lt;source&gt;}</code>
</li>
<li class="fragment">Citing with additional
text:<br><code>\cite[&lt;prefix&gt;][&lt;suffix&gt;]{&lt;source&gt;}</code>
</li>
<li class="fragment">Referencing the <code>.bib</code> file:
<code>\bibliography{&lt;.bib file&gt;}</code>
</li>
<li class="fragment">Choosing a citation style:
<br><code>\bibliographystyle{&lt;citation style&gt;}</code>
</li>
</ul>
<blockquote>
<p>Two things are infinite: the universe and the assortment of citation
styles.<cite>Unknown</cite></p>
</blockquote>
</div>
</div>
</article>
<article>
<div class="layout-preview-only">
<div class="layout-preview">
<figure>
<img src="svg/chapter-14/bibtex-alpha-example-crop.svg" class="large thin-padding" alt="Citing in Alpha style">
<figcaption aria-hidden="true">Citing in Alpha style</figcaption>
</figure>
</div>
</div>
</article>
<article>
<div class="layout-preview-only">
<div class="layout-preview">
<figure>
<img src="svg/chapter-14/bibtex-natdin-example-crop.svg" class="large thin-padding" alt="Citing in Natdin style">
<figcaption aria-hidden="true">Citing in Natdin style</figcaption>
</figure>
</div>
</div>
</article>
<article>
<div class="layout-preview-only">
<div class="layout-preview">
<figure>
<img src="svg/chapter-14/bamberg_catalogue_bibtex.jpg" class="large" alt="Finding ready-made BibTeX entries University of Bamberg Library">
<figcaption aria-hidden="true">Finding ready-made BibTeX entries
University of Bamberg Library</figcaption>
</figure>
</div>
</div>
</article>
<article>
<div class="layout-preview-only">
<div class="layout-preview">
<figure>
<img src="svg/chapter-14/google_bibtex1.jpg" class="large" alt="Finding ready-made BibTeX entries Google Scholar">
<figcaption aria-hidden="true">Finding ready-made BibTeX entries
Google Scholar</figcaption>
</figure>
</div>
</div>
</article>
<article>
<div class="layout-preview-only">
<div class="layout-preview">
<figure>
<img src="svg/chapter-14/google_bibtex2.jpg" class="large" alt="Finding ready-made BibTeX entries Google Scholar">
<figcaption aria-hidden="true">Finding ready-made BibTeX entries
Google Scholar</figcaption>
</figure>
</div>
</div>
</article>
<article>
<div class="layout-preview-only">
<div class="layout-preview">
<figure>
<img src="svg/chapter-14/dblp.jpg" class="large" alt="Finding ready-made BibTeX entries dblp.org">
<figcaption aria-hidden="true">Finding ready-made BibTeX entries
dblp.org</figcaption>
</figure>
</div>
</div>
</article>
<article>
<div class="layout-wide-content">
<div class="layout-content">
<h2 data-category="Task" data-task="12 ">Creating and inserting references
</h2>
<ul>
<li>Create a new BibTeX file called <code>literature.bib</code> in the
<code>exercises/literature</code> folder.</li>
<li>Use Google Scholar or dblp.org to retrieve BibTeX references for the
following <span class="math inline">\(\LaTeX\)</span> handbooks:
<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>Add the BibTeX entries to the BibTeX file.</li>
<li>Assign unique and meaningful BibTeX keys.</li>
<li>Include the BibTeX file in a suitable location, where later on the
references should be listed.</li>
<li>Cite the two handbooks in the file
<code>exercises/literature/literature.tex</code>.</li>
<li>Make use of the <code>plain</code> bibliography style.</li>
</ul>
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>
<span class="chapter-number">13
.</span>
<span>Source code listings
</span>
</h1>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>In-situ listings
</h2>
<p>The <code>listings</code> package provides a dedicated
environment:</p>
<pre class="lang-tex hljs"><code>\section*{Haskell Magic}
Squares of all even % …
\begin{lstlisting}[language=Haskell]
[x^2 | x &lt;- [1..200], even x]
\end{lstlisting}</code></pre>
</div>
<div class="layout-preview">
<img src="svg/chapter-10/listings-haskell-english-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>External source code
</h2>
<p>Conveniently, <code>listings</code> offers an import command:</p>
<pre class="lang-tex hljs"><code>\section*{Simple Java Application}
\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 src="svg/chapter-10/listings-java-english-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Themes and styles
</h2>
<p><code>listings</code> does not provide any themes by default, but can
be configured extensively.</p>
<pre class="lang-tex hljs"><code>\begin{lstlisting}[
language=Java,
basicstyle=\footnotesize\ttfamily,
breaklines=true,
keywordstyle=\color{ForestGreen},
commentstyle=\color{DarkGray},
literate={ö}{{\"o}}1
]
% …
\end{lstlisting}</code></pre>
<p>Have a look at the <code>\lstset</code> command for creating your own
themes.</p>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Further resources
</h2>
<ul>
<li>
<a href="https://www.overleaf.com/learn/latex/Code_listing#Reference_guide">introduction</a>
to the package</li>
<li>official <a href="https://www.overleaf.com/learn/latex/Code_listing#Reference_guide">documentation</a>
</li>
<li>predefined <a href="https://en.wikibooks.org/wiki/LaTeX/Source_Code_Listings#Encoding_issue">UTF-8
configuration</a>
</li>
<li>
<a href="https://www.overleaf.com/learn/latex/Using_colours_in_LaTeX"><code>xcolor</code>
package</a> for colors</li>
<li>two <a href="https://github.com/jez/latex-solarized">solarized
themes</a> for <code>listings</code>
</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2 data-category="Task" data-task="13 ">Listings
</h2>
<ul>
<li>In the directory <code>exercises/source-code-listings</code> you can
find a file named <code>Source.java</code>.</li>
<li>
<strong>Include</strong> it in the file
<code>source-code-listings.tex</code>. (Keep in mind that the file path
is relative to the main LaTeX document, i.e., to
<code>main-exercises.tex</code>.)</li>
<li>Enable <strong>special characters</strong> via the
<code>literate</code> option.</li>
<li>Activate <strong>syntax highlighting</strong> by stating the
programming language Java.</li>
<li>
<strong>Number</strong> the code lines.</li>
<li>Set the <code>basicstyle</code> to a proper mono-spaced font
(<code>\ttfamily \small</code>)</li>
<li>Change the <strong>keyword color</strong> to blue.</li>
<li>Dont show special characters for <strong>spaces in
strings</strong>.</li>
</ul>
<p>If you have questions, try to consult the documentation of the
<code>listings</code> package.</p>
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>
<span class="chapter-number">14
.</span>
<span>Package in sight!
</span>
</h1>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Creating an index
</h2>
<pre class="lang-tex hljs"><code>\usepackage{makeidx}
\makeindex
\begin{document}
\maketitle
\section{What is LaTeX\index{LaTeX}?}
LaTeX\index{LaTeX} is a typesetting
system\index{Typesetting system}.
\newpage \section{TeX\index{TeX} vs.
LaTeX\index{LaTeX}} It is based on
TeX\index{TeX}, an invention by
Donald Knuth\index{Knuth, Donald}.
As TeX\index{TeX} is way more complex
syntactically than LaTeX\index{LaTeX},
LaTeX\index{LaTeX} is much more
popular.
\printindex</code></pre>
</div>
<div class="layout-preview">
<img src="svg/chapter-15/index_en-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Designing presentation slides
</h2>
<p>For slides, there is the <code>beamer</code> document class, as well
as numerous <a href="https://www.overleaf.com/learn/latex/Beamer">templates and
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{Lemon sorbet}
\framesubtitle{Incarnation of good?}
\begin{definition}
A lemon sorbet is a
semi-frozen \textbf{dessert}
on \textit{lemon} base.
\end{definition}
\end{frame}
\end{document}</code></pre>
</div>
<div class="layout-preview">
<img 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>Drawing images
</h2>
<p><code>TikZ</code> (“TikZ ist kein Zeichenprogramm”“TikZ is no
drawing software”) is a powerful package for drawing vector
graphics.</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 {/ or 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 src="svg/chapter-04/relative-path-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Linguistics
</h2>
<p>The <code>qtree</code> package can render constituent-based parse
trees:</p>
<pre class="lang-tex hljs"><code>\Tree [.S [.NP LaTeX ]
[.VP [.V is ] [.NP fun ] ] ]</code></pre>
</div>
<div class="layout-preview">
<img src="svg/chapter-15/constituency-tree-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Mathematical proofs
</h2>
<p>Logical tableaux can be renderd using the <code>prftree</code>
package.</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" src="svg/chapter-15/prftree-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Other useful packages
</h2>
<table>
<tr>
<th>
Package
</th>
<th>
Use case
</th>
</tr>
<tr class="fragment">
<td>
<a href="https://www.ctan.org/pkg/xcolor"><code>xcolor</code></a>
</td>
<td>
colours
</td>
</tr>
<tr class="fragment">
<td>
<a href="https://www.ctan.org/pkg/todonotes"><code>todonotes</code></a>
</td>
<td>
todo annotations and index
</td>
</tr>
<tr class="fragment">
<td>
<a href="https://www.ctan.org/pkg/pdfpages"><code>pdfpages</code></a>
</td>
<td>
embedding PDF files
</td>
</tr>
<tr class="fragment">
<td>
<a href="https://www.ctan.org/pkg/subcaption"><code>subcaption</code></a>
</td>
<td>
Nested figures and fine-tuned captions
</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>
Table tuning
</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>
<span>Getting help and information
</span>
</h1>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>
<a href="https://en.wikibooks.org/wiki/LaTeX">Wikibooks</a>
</h2>
<p>The LaTeX Wikibook offers numerous interesting articles and is
available in English and German (among others).</p>
<p><img src="svg/chapter-16/wikibooks-latex_en.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>The “Comprehensive TeX Archive Network” is the central source for
LaTeX packages and their documentation.</p>
<p><img 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>Overleaf is a collaborative online LaTeX editor.</p>
<p>It also offers a multiple tutorials and templates for different
occasions (CV, theses, …):
<a href="https://www.overleaf.com/templates">»Templates«</a>.</p>
<p><img 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>Question-and-answer website for LaTeX.</p>
<p><img 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>A collection of LaTeX examples, especially with TikZ.</p>
<p><img src="svg/chapter-16/texample.jpg"></p>
</div>
</div>
</article>
<article>
<div class="layout-preview-only">
<div class="layout-preview">
<figure>
<img src="svg/chapter-16/klassisches-beispiel-2.jpeg" class="large" alt="Classic (source)">
<figcaption aria-hidden="true">Classic (<a href="https://tex.stackexchange.com/questions/1319/showcase-of-beautiful-typography-done-in-tex-friends">source</a>)</figcaption>
</figure>
</div>
</div>
</article>
<article>
<div class="layout-preview-only">
<div class="layout-preview">
<figure>
<img src="svg/chapter-16/klassischeres-beispiel.jpg" alt="More classic (source)">
<figcaption aria-hidden="true">More classic (<a href="https://tex.stackexchange.com/questions/1319/showcase-of-beautiful-typography-done-in-tex-friends">source</a>)</figcaption>
</figure>
</div>
</div>
</article>
<article>
<div class="layout-preview-only">
<div class="layout-preview">
<figure>
<img src="svg/chapter-16/anderes-beispiel.png" class="large" alt="Different (source)">
<figcaption aria-hidden="true">Different (<a href="https://tex.stackexchange.com/questions/1319/showcase-of-beautiful-typography-done-in-tex-friends">source</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>
If you have any other questions or problems, just come over or write us
an e-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 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>A short feedback round
</h2>
<ul>
<li>What did you like?</li>
<li>What could we have done better?</li>
<li>What did you wish for?</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-preview-only">
<div class="layout-preview">
<p><img src="svg/chapter-16/fooboar-latex-tut.jpg" style="width:100%; margin:0 auto; display: block;"></p>
</div>
</div>
</article>
</section>
<div id="page-number-container"></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>