serverPush/static.wiai.de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
static.wiai.de/latex-weekend-sose-2021/index.html
root f7f5212fc3 init
2023-01-10 11:40:39 +01:00

3788 lines
100 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 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. Created by Anika Amma, Evelyn Fradtschuk, Florian Knoch, Christian Kremitzl, Fabian Lamprecht, Bernhard Luedtke, and Anna Sauer.</p>
</small>
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>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?</h1>
</div>
</div>
</article>
<article>
<div class="layout-two-previews">
<div class="layout-preview">
<figure>
<img data-src="svg/chapter-01/example-word-orig.svg">
<figcaption class="fragment">Classic Word document</figcaption>
</figure>
</div>
<div class="layout-preview">
<figure>
<img data-src="svg/chapter-01/example-latex-orig.svg">
<figcaption class="fragment">Classic LaTeX document</figcaption>
</figure>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Origin</h2>
<ul>
<li>Donald <strong>Knuth</strong>, 1977–1986: 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 data-src="svg/chapter-01/knuth.jpg" style="height: 13em">
<figcaption>
Donald Knuth
</figcaption>
</figure>
<figure>
<img data-src="svg/chapter-01/lamport.jpg" style="height: 13em">
<figcaption>
Leslie Lamport
</figcaption>
</figure>
</div>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-01/taocp.jpg">
</div>
</div>
</article>
<article>
<div class="layout-two-previews">
<div class="layout-preview">
<figure>
<img data-src="svg/chapter-01/example-word-orig.svg">
<figcaption>Classic Word document</figcaption>
</figure>
</div>
<div class="layout-preview">
<figure>
<img data-src="svg/chapter-01/example-latex-orig.svg">
<figcaption>Classic LaTeX document</figcaption>
</figure>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Typography</h2>
<h3 id="macro-typography">Macro typography</h3>
<ul>
<li>type area</li>
<li>line length and leading</li>
<li>placement of headings in whitespace</li>
<li>placement of images and tables</li>
<li>widows and orphans</li>
<li>even grey value</li>
<li>…</li>
</ul>
<figure style="display: flex; justify-content: space-between; width: 100%; align-items: flex-end;">
<img data-src="svg/chapter-01/satzspiegel.svg" style="height: 8em;">
<figcaption style="margin-left: 1em; font-size: .8em">
Type area construction by Villard (<a class="dark-font" href="https://commons.wikimedia.org/wiki/File:Satzspiegel-4.svg">source</a>)
</figcaption>
</figure>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-01/vergleich-makro.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Typography</h2>
<h3 id="micro-typography">Micro typography</h3>
<ul>
<li>ligatures</li>
<li>kerning</li>
<li>real italics, small capitals, font sizes …</li>
<li>word spacing</li>
<li>…</li>
</ul>
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<figure>
<img data-src="svg/chapter-01/schriftschnitte-crop.svg" style="height: 1.7em;">
<figcaption style="font-size: .8em;">
Font styles:<br>straight, oblique, italic
</figcaption>
</figure>
<figure>
<img data-src="svg/chapter-01/schriftgrade.svg" style="height: 2.2em;">
<figcaption style="font-size: .8em">
Font sizes:<br>small, small scaled up, large
</figcaption>
</figure>
</div>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-01/vergleich-mikro.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Further advantages</h2>
<ul>
<li>much better default settings<br>than any other word processor</li>
<li>structured workflow</li>
<li>reliable undo</li>
<li>easy versioning</li>
<li>independence of proprietary software</li>
<li>source code and output<br>readable in the long term</li>
<li>easy cooperation with other software</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 data-src="svg/chapter-01/latex-script.svg">
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>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?</h1>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>WYSIWhat?</h2>
<h3 id="what-you-see-is-what-you-get" data-category="Word">What You See Is What You Get</h3>
<ul>
<li>Formatting with immediate visual feedback</li>
</ul>
<div class="fragment">
<h3 id="what-you-see-is-what-you-mean" 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>
</div>
<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 data-src="svg/chapter-02/xkcd-types-of-editors.png">
</div>
</div>
</article>
<article>
<div class="layout-preview-only">
<div class="layout-preview">
<figure>
<img data-src="svg/chapter-02/wysiwyg.svg" alt="How to get the final document"><figcaption>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>
<div class="sourceCode" id="cb1"><pre class="sourceCode lang-tex tex hljs"><code class="sourceCode latex"><a class="sourceLine" id="cb1-1" title="1"><span class="fu">\&lt;</span>command&gt;[&lt;optional_parameters&gt;]{&lt;obligatory_parameters&gt;}</a></code></pre></div>
<p class="fragment">A few examples:</p>
<div class="sourceCode" id="cb2"><pre class="sourceCode lang-tex tex hljs fragment"><code class="sourceCode latex"><a class="sourceLine" id="cb2-1" title="1"><span class="fu">\newpage</span> <span class="co">% inserts a new page</span></a>
<a class="sourceLine" id="cb2-2" title="2"><span class="fu">\textbf</span>{&lt;text&gt;} <span class="co">% formats the text bold</span></a>
<a class="sourceLine" id="cb2-3" title="3"><span class="bu">\usepackage</span>[utf8]{<span class="ex">inputenc</span>} <span class="co">% configures the character encoding</span></a>
<a class="sourceLine" id="cb2-4" title="4"><span class="fu">\frac</span>{&lt;numerator&gt;}{&lt;denominator&gt;} <span class="co">% inserts a mathematical fraction</span></a></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>
<article>
<div class="layout-wide-content">
<div class="layout-content">
<h2>Optional parameters</h2>
<p>Square brackets may contain different numbers of optional parameters:</p>
<pre class="lang-tex hljs"><code>\usepackage[utf8]{inputenc}
% configures the text encoding
\documentclass[a4paper,12pt]{article}
% configures the document class
\includegraphics[width=12cm,height=4cm]{image.png}
% embeds the image file "image.png"</code></pre>
</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 \\
Geburtsdatum: \\ % TODO: insert
Geburtsort: 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 data-src="svg/chapter-02/comments-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Software installation</h2>
<p>Please install <strong>the compiler first</strong> (MikTeX on Windows, MacTeX on MacOS, TeX Live on Linux), <strong>followed by the editor.</strong> In this workshop, we use TeXstudio.</p>
<ul>
<li>MikTeX (Windows): <a href="https://miktex.org/" class="uri">https://miktex.org/</a>
</li>
<li>MacTeX (MacOS): <a href="http://tug.org/mactex/" class="uri">http://tug.org/mactex/</a>
</li>
<li>TeX Live (Linux/all OS): <a href="https://tug.org/texlive/" class="uri">https://tug.org/texlive/</a>
</li>
<li>TeXstudio: <a href="https://www.texstudio.org/" class="uri">https://www.texstudio.org/</a>
</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2 data-category="Task" data-task="2">First steps with LaTeX</h2>
<ul>
<li>If necessary: Install now!</li>
<li>Download the project archive from the VC. Unzip the archive.</li>
<li>Open the file <code>main.tex</code> in TeXstudio. It is located in the root directory of the archive.</li>
<li>Navigate to the command settings of TeXstudio: Options -&gt; Configure TeXstudio… -&gt; Commands</li>
<li>Change the compiler command for PdfLaTeX to: <code>pdflatex -synctex=1 -interaction=nonstopmode -shell-escape %.tex</code>
</li>
<li>Compile <code>main.tex</code> by pressing <span class="emoji">⏩</span>.</li>
<li>What happened to the folder that contains the file?</li>
</ul>
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>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</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 data-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]{scrartcl}</code></pre>
<ul class="fragment">
<li>
<strong><code>scrartcl</code>, <code>article</code></strong> for short documents
</li>
<li>
<strong><code>scrreport</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-content-only">
<div class="layout-content">
<h2>Packages</h2>
<pre class="lang-tex hljs"><code>\usepackage[&lt;options&gt;]{&lt;package_name&gt;}</code></pre>
<ul>
<li>Packages provide additional commands and functionalities.</li>
<li>There are different packages for different use cases (e. g., mathematical formulas, lists, …).</li>
<li>Before they can be used, they have to be included <strong>within the preamble.</strong>
</li>
</ul>
</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 class="fragment">The character encoding determines which characters are available.</li>
<li class="fragment"><strong>ASCII</strong> contains no special characters like German umlauts.</li>
<li class="fragment"><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-wide-content">
<div class="layout-content">
<h2>Languages</h2>
<p>A document can use multiple languages at once:</p>
<pre class="lang-tex hljs"><code>\usepackage[ngerman, swedish, russian, greek, english]{babel}</code></pre>
<div class="fragment">
<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>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Languages — an example</h2>
<pre class="lang-tex hljs"><code>\today
\selectlanguage{ngerman}
\today
\selectlanguage{swedish}
\today
\selectlanguage{russian}
\today
\selectlanguage{greek}
\today
\selectlanguage{english}
\today</code></pre>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-03/languages-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<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 data-src="svg/chapter-03/paragraphs-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>’, we will see a solution for this later.</p>
</div>
<div class="layout-preview">
<img data-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 data-src="svg/chapter-03/sections-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Sections and chapters</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 data-src="svg/chapter-03/sections-differently-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 \\ Fachschaft WIAI\thanks{WIe AIn Profi},
Otto-Friedrich-Universität Bamberg}
\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 \\ Fachschaft
WIAI\thanks{WIe AIn Profi},
Otto-Friedrich-Universität Bamberg}
\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 data-src="svg/chapter-03/title-orig.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Table of contents</h2>
<pre class="lang-tex hljs"><code>\tableofcontents</code></pre>
<ul>
<li>automatic numbering</li>
<li>very configurable (enumeration characters and depth, automatic naming, …)</li>
<li>chapters and (sub-)sections with an asterisk (<code>*</code>) are hidden from the table of contents: e. g. <code>\section\*{}</code>.</li>
<li>generally requires two rounds of compilation</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 data-src="svg/chapter-03/contents-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Other indices</h2>
<p>List of figures and list of tables</p>
<pre class="lang-tex hljs"><code>\listoffigures
\listoftables</code></pre>
<ul>
<li>inserts the corresponding index wherever it is called</li>
<li>lists the caption of each figure or table by default, but you can also state a special list entry</li>
</ul>
</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[ngerman]{babel}
\usepackage[hidelinks]{hyperref}</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>
<li>Finally, <strong>comment out</strong> the preamble, the document environment, and the table of contents. Only this way, your solution can be embedded in the script itself.</li>
</ul>
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>Project structure</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 data-src="svg/chapter-04/langes-dokument.png" 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 and front matter</li>
<li>includes separate sections with<br>
<code>\input{path/to/file}</code> or<br>
<code>\include{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 data-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 data-src="svg/chapter-04/main-parts-crop.svg" class="thin-padding">
</div>
</div>
</article>
<article>
<div class="layout-two-columns">
<h2 class="layout-title">
<code>input</code> or <code>include</code>?</h2>
<div class="layout-column-one">
<pre class="hljs lang-tex"><code>\input{path/to/file}</code></pre>
<ul>
<li>file extension <code>.tex</code> <strong>may</strong> be added</li>
<li>
<strong>nesting</strong> possible: nested files can again be embedded using <code>\input{}</code>
</li>
<li>file is added to the resulting document <strong>without a page break</strong>
</li>
</ul>
</div>
<div class="layout-column-two">
<pre class="hljs lang-tex"><code>\include{path/to/file}</code></pre>
<ul>
<li>file extension <code>.tex</code> <strong>must not</strong> be added</li>
<li>
<strong>no nesting</strong> possible</li>
<li>each subfile starts a <strong>new page</strong> in the resulting document</li>
<li>advantage for larger projects: <code>\includeonly{file1,file2,...}</code> can be used in the preable to compile only certain subfiles (the entire project has to be compiled at least once before)</li>
</ul>
</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> and <code>\include{}</code>, later also for pictures</li>
<li>file and folder structure = tree structure <span class="emoji">🌳</span>
</li>
</ul>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-04/tree-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2 data-category="Excursion"><span data-category="Example">Specifying file paths <span class="emoji">👣</span></span></h2>
<h3 id="absolute-paths">Absolute paths</h3>
<ul>
<li>path from the root directory to a file</li>
<li>the direcories are separated by special characters:
<ul>
<li>in UNIX: <code>/</code>
</li>
<li>in Windows: <code>\</code>
</li>
</ul>
</li>
</ul>
<div class="fragment">
<p data-category="Example">
absolute path for <code>main.tex</code>
</p>
<ul>
<li>UNIX: <code>/home/knut/docs/latex/main.tex</code>
</li>
<li>Windows: <code>C:\knut\docs\latex\main.tex</code>
</li>
</ul>
<p data-category="Caution!">
In <strong>LaTeX,</strong> you have to use UNIX-style paths. Therefore, we will use those from here on.
</p>
</div>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-04/absolute-path-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>
<h3 id="relative-paths">Relative paths</h3>
<ul>
<li>path from somewhere in the tree to a certain file</li>
<li>shorter + less typing! <span class="emoji">☺</span>
</li>
<li>with <code>\input{}</code> and <code>\include{}</code>, you can specify the path relative to the main file</li>
</ul>
<div class="fragment">
<p data-category="Example">
Relative path<br>
from <code>main.tex</code> to <code>part1.tex</code>
</p>
<p><code>./part1.tex</code></p>
<p>A <strong>single dot ‘<code>.</code>’</strong> in a relative path represents the current folder (in this case: <code>latex</code>). It is optional, you could also write <code>part1.tex</code> here.</p>
</div>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-04/relative-path-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2 data-category="Excursion">Specifying paths <span class="emoji">👣</span>
</h2>
<h3 id="relative-paths">Relative paths</h3>
<p data-category="Example">
Relative path from <code>main.tex</code> to <code>part1.tex</code> in subfolder
</p>
<p><code>./sections/part1.tex</code></p>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-04/relative-path-subdir-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2 data-category="Excursion">Specifying paths <span class="emoji">👣</span>
</h2>
<h3 id="relative-paths">Relative paths</h3>
<p data-category="Example">
Relative path from <code>main.tex</code> in its own subfolder to <code>part1.tex</code> in another subfolder
</p>
<p><code>../sections/part1.tex</code></p>
<p><strong>Two dots ‘<code>..</code>’</strong> represent the parent folder of the current folder (in this case: <code>latex</code>, parent of <code>main</code>).</p>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-04/relative-path-superdir-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Compiling the project</h2>
<ul>
<li>
<strong>Only the main file</strong> has to be compiled to get the complete PDF document.</li>
<li>Error messages include a reference to the corresponding subfile.</li>
<li>Subfiles cannot be compiled on their own as they don’t have a preamble.</li>
</ul>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Outsourcing the preamble</h2>
<p>What do you think happens when we outsource the preamble into its own subfile?</p>
<p>Will the document compile?</p>
<p class="fragment"><strong>Yes, it will!</strong><br>
A simple way of keeping the main file even more organised.</p>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-04/main-parts-preamble-crop.svg" class="thin-padding">
</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>Extract the sections into their own files (<code>section1.tex</code>, <code>section2.tex</code>, and <code>section3.tex</code>) and insert them using the <code>\include</code> command.</li>
<li>Which command is rendered superfluous by <code>\include</code>?</li>
</ul>
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>Special characters</h1>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Spaces</h2>
<ul>
<li>normal space dividing words: <kbd>space bar</kbd>
</li>
<li>non-breaking space: <code>~</code>
</li>
<li>thin space: <code>\,</code>
</li>
<li>many other widths available</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>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-05/spaces-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>English and French spacing</h2>
<p>In English, LaTeX uses the old-fashioned <em>English spacing,</em> i. e., double sentence spacing.</p>
<p class="fragment">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 class="fragment">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 class="fragment">forcing normal spaces: <code>.\␣</code>
</li>
<li class="fragment">manually ending sentences: <code>\@.␣</code>
</li>
</ul>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-05/french-spacing-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<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: 12 – 2 p.m.
</td>
<td>
<code>--</code>
</td>
</tr>
<tr>
<td>
—
</td>
<td>
Em dash <em>(Geviertstrich)</em>
</td>
<td>
a dash — mostly in American English
</td>
<td>
<code>---</code>
</td>
</tr>
</table>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-05/hyphens-and-dashes-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Hyphenation</h2>
<p>Most of the time, LaTeX hyphenates words correctly, if the correct language is configured. But you can also intervene manually:</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 data-src="svg/chapter-05/hyphenation-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Quotation marks</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 it’s the same characters, only combined differently.</p>
</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 data-src="svg/chapter-05/quotes-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>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">
<div class="layout-content">
<h2>Special characters &amp; symbols</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>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Special characters &amp; symbols</h2>
<h3 id="math-mode">Math mode</h3>
<p>Some special characters and symbols require a math environment:</p>
<pre class="lang-tex hljs"><code>% greek letters (π Σ δ)
$\pi \Sigma \delta$
% dagger/obelisk/obelus (†)
$\dagger$</code></pre>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Special characters &amp; symbols</h2>
<h3 id="euro">Euro (€)</h3>
<ul>
<li>
<code>eurosym</code> package</li>
<li>
<code>\euro</code> command</li>
</ul>
<pre class="lang-tex hljs"><code>Using LaTeX costs 0 \euro.</code></pre>
</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>Draw symbols and have them recognised: <a href="http://detexify.kirelabs.org/classify.html">Detexify</a>
</li>
<li>A long list of symbols to use: <a href="http://tug.ctan.org/info/symbols/comprehensive/symbols-a4.pdf">PDF on the CTAN website</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.tex</code> to see your changes appear in the script itself (in this task, see section “Übung 5”).</p>
</div>
<ul>
<li>Replace the spaces in <code>exercises/special-characters.tex</code> within the abbreviations (“z. B.”, “u. a.”) by <strong>thin spaces</strong>. On top of that, replace the space before the word <em>Euro</em> by a thin space.</li>
<li>Replace the hyphens by a <strong>dash</strong> (<code>--</code>).</li>
<li>Add an <strong>exclusive hyphenation</strong> in the word <em>Studierendenausweis</em> after <em>Studierenden-</em>.</li>
<li>Replace <em>Euro</em> by a <strong>Euro sign</strong>.</li>
</ul>
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>Text Markup</h1>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Emphases</h2>
<p>The easiest way of emphasising in continuous text is the semantic command <code>\emph{}</code> that can also be nested:</p>
<pre class="lang-tex hljs"><code>\emph{If you have a whole bunch of
important text with some \emph{even more
important Text} hidden inside it,
you can use nested emphases.}</code></pre>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-06/emphases-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Optical highlighting</h2>
<p>specifies exactly how to format the text:</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>
slanted
</td>
<td>
<code>\textsl{important}</code>
</td>
</tr>
<tr>
<td>
underlined
</td>
<td>
<code>\underline{important}</code>
</td>
</tr>
<tr>
<td>
subscript
</td>
<td>
<code>\textsubscript{…}</code>
</td>
</tr>
<tr>
<td>
superscript
</td>
<td>
<code>\textsuperscript{…}</code>
</td>
</tr>
</table>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-06/optical-highlighting-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Nesting emphases</h2>
<p>Possible if the font contains the exact font style:</p>
<pre class="lang-tex hljs"><code>\textbf{Very
\textit{Important
\textsc{Stuff}
}
}</code></pre>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-06/nesting-emphases-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Font size</h2>
<div class="box warning">
<p><strong>Some well-meaning advice: Better Call <del>Saul</del> LaTeX!</strong></p>
<p>You want the entire document to look consistent?</p>
<p>Trust LaTeX’s 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-only">
<div class="layout-content">
<h2>Font size</h2>
<h3 id="normalsize"><code>normalsize</code></h3>
<ul>
<li>used for continuous text paragraphs</li>
<li>default: 10pt</li>
<li>can be modified in the preamble:</li>
</ul>
<pre class="lang-tex hljs"><code>\documentclass[12pt]{article}</code></pre>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>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 don’t}
{\huge need}
{\Huge glasses.}</code></pre>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-06/font-size-optician-crop.svg" class="thin-padding">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Font size</h2>
<h3 id="manual-configuration-possible">Manual configuration possible</h3>
<pre class="lang-tex hljs"><code>\fontsize{&lt;fontsize&gt;}{&lt;lineheight&gt;}
\selectfont</code></pre>
<p data-category="Example">
</p>
<pre class="lang-tex hljs"><code>This is text in normal font size.
\fontsize{1cm}{0.9cm}\selectfont
This is a ginormous passage.
\normalsize
Back to normal.</code></pre>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-06/font-size-fontsize-command-crop.svg" class="thin-padding">
</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 data-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>Rekursion</em> and <em>rekursiv</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>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>Formatting paragraphs</h1>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>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 data-src="svg/chapter-07/ausrichtung-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>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 data-src="./svg/chapter-07/indentation-spacing-orig.svg">
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>Enumerations</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 data-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" data-src="svg/chapter-08/definition-english-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>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 data-src="svg/chapter-08/compact-english-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>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" data-src="svg/chapter-08/paralist-extended-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{compactitem}
% …
\item vegetables \begin{compactitem}
\item crushed tomatoes
\item carrots
\item peas
\item onions
\end{compactitem}
\item herbs \begin{compactenum}
\item oregano
\item basil
\item rosemary
\end{compactenum}
% …
\end{compactitem}</code></pre>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-08/nested-lists-english-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>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 data-src="svg/chapter-08/list-style-types-english-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2 data-category="Task" data-task="8">Adding enumerations</h2>
<ul>
<li>Turn the recipe in <code>lists.tex</code> into an <strong>unordered list</strong> consisting of the elements <em>Zutaten</em> and <em>Arbeitsschritte</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>compact unordered list</strong> for the ingredients (<em>Zutaten</em>) and a <strong>compact ordered list</strong> for the instructions (<em>Arbeitsschritte</em>).</li>
</ul>
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>Typesetting mathematics</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 data-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>\sqrt{16}</code>
</td>
<td>
<span class="math inline">\(\sqrt{16}\)</span>
</td>
</tr>
<tr class="fragment">
<td>
<code>\frac{3}{4}</code>
</td>
<td>
<span class="math inline">\(\frac{3}{4}\)</span>
</td>
</tr>
<tr class="fragment">
<td>
<code>e^{\pi}</code>
</td>
<td>
<span class="math inline">\(e^{\pi}\)</span>
</td>
</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>
<p class="fragment"><code>^{…}</code> and <code>_{…}</code> make the content between the braces appear as sub- or superscripted.</p>
</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>
<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">
<div class="layout-content">
<h2>Height-adapting braces</h2>
<table>
<tr>
<th>
source code
</th>
<th>
result
</th>
</tr>
<tr class="fragment">
<td>
<code>\left( \frac{1}{2} \right)</code>
</td>
<td>
<span class="math inline">\(\left( \frac{1}{2} \right)\)</span>
</td>
</tr>
<tr class="fragment">
<td>
<code>\left[ \frac{1}{2} \right]</code>
</td>
<td>
<span class="math inline">\(\left[ \frac{1}{2} \right]\)</span>
</td>
</tr>
<tr class="fragment">
<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 fragment"><code>$4 \cdot \left( \frac{1}{2} % …</code></pre>
<p class="fragment" 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">
<div class="layout-content">
<h2>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!">
Don’t use <code>\limits</code> inline.
</p>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-09/limits-crop.svg">
</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 data-src="svg/chapter-09/alignment-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>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>\mathrm{}</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;" class="fragment">
<span class="math inline">\(\left\lbrace x \mid \mathrm{frequency}(x) \geq 20\right\rbrace\)</span>
</p>
<pre class="lang-tex hljs fragment"><code>$\left\lbrace x \mid \mathrm{frequency} …</code></pre>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2 data-category="Task" data-task="9a" 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="9b" 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}, \mathrm{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>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>Source code listings</h1>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Installation <span class="emoji">🖥️</span>
</h2>
<p><code>Minted</code>, another LaTeX package, is very useful to display source code. It requires the Python programming language.</p>
<p>As soon as <strong><a href="https://www.python.org/">Python is installed</a></strong>, we can download the corresponding Python package <strong><a href="http://pygments.org/"><code>Pygments</code></a></strong> using a command prompt:</p>
<pre class="lang-sh hljs"><code>pip install Pygments</code></pre>
<p>Add the LaTeX package and we are good to go:</p>
<pre class="lang-tex hljs"><code>\usepackage{minted}</code></pre>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-10/minted-overview-english-crop.svg" class="thin-padding">
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Compiler settings</h2>
<div class="box warning">
<p>We need to pass the additional flag <code>--shell-escape</code> to our compiler in order to use <code>minted</code>.</p>
</div>
<p>In TeXstudio, go to <strong><code>Options → Configure TeXstudio → Commands</code></strong> and add the flag in the PdfLaTeX row before <code>%.tex</code>:</p>
<p><code>pdflatex -synctex=1 -interaction=nonstopmode <strong>--shell-escape</strong> %.tex</code></p>
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Listings within LaTeX documents</h2>
<p class="fragment">Within a dedicated environment:</p>
<pre class="lang-tex hljs fragment"><code>\section*{Haskell Magic}
Squares of all even % …
\begin{minted}{haskell}
[x^2 | x &lt;- [1..200], even x]
\end{minted}</code></pre>
<p class="fragment">Directly inline:</p>
<pre class="lang-tex hljs fragment"><code>\section*{An HTML Example}
A headline is denoted the following way:
\mint{html}|&lt;h2&gt;LaTeX at University&lt;/h2&gt;|</code></pre>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-10/minted-haskell-english-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>External source code</h2>
<p>We can avoid redundancy by including source code directly from its source file.</p>
<pre class="lang-tex hljs"><code>\section*{Simple Java Application}
\inputminted{java}{Test.java}</code></pre>
<pre class="lang-java hljs" data-sourcefile="Test.java"><code>public class HelloWorld {
public static void main(/*…*/) {
System.out.println(/*…*/);
}
}</code></pre>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-10/minted-java-english-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2>Configuring <code>minted</code>
</h2>
<p>Optional parameters allow us to activate line numbers, automated line breaks, and syntax highlighting based on numerous color schemes.</p>
<pre class="lang-tex hljs"><code>\usemintedstyle{monokai}
\begin{minted}[
linenos=true,
breaklines=true,
]{javascript}
% ...
\end{minted}</code></pre>
<p><span class="emoji">🔗</span> <strong><a href="https://www.overleaf.com/learn/latex/Code_Highlighting_with_minted">introduction</a></strong> and <strong><a href="https://ctan.kako-dev.de/macros/latex/contrib/minted/minted.pdf">official documentation</a></strong></p>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2 data-category="Task" data-task="10">Listing source code</h2>
<ul>
<li>In the directory <code>exercises/source-code-listings</code> you can find a file named <code>Source.java</code>, which we want to include in our document.</li>
<li>
<strong>Include</strong> the java code 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.tex</code>.)</li>
<li>
<strong>Number</strong> the code lines.</li>
<li>Use the <strong>theme</strong> <code>native</code>.</li>
<li>Change the <strong>background colour</strong> to dark blue.</li>
<li>Now only include <strong>lines 5 to 7</strong>.</li>
<li>Delete the <strong>spaces</strong> at the beginning of the lines by using a suitable option (Hint: The documentation speaks of <code>gobble</code>).</li>
<li>If you have questions, try to consult the documentation of the Minted package.</li>
</ul>
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>Graphics</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&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 don’t 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 God’s 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="11">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>.</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>Tables</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 data-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 data-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; Version \\
\midrule
C++ &amp; Bjarne Stroustrup &amp; 1985 &amp; C++ 17 \\
Java &amp; James Gosling &amp; 1998 &amp; 13 \\
Python &amp; Guido van Rossum &amp; 1991 &amp; 3.8.0 \\
\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>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">
<div class="layout-content">
<h2>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 class="fragment">The <code>longtable</code> environment merges the <code>tabular</code> and <code>table</code> environments.</li>
<li class="fragment">Caption and label can therefore be inserted directly under the table content.</li>
<li class="fragment">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">
<div class="layout-content">
<h2>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">
<div class="layout-content">
<h2>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 data-src="svg/chapter-12/table-advanced-example-crop.svg" class="thin-padding">
</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 data-src="svg/chapter-12/tables-generator.png"></a></p>
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2 data-category="Task" data-task="12">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>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>References and footnotes</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 (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 data-src="svg/chapter-13/footnote-example-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>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 data-src="svg/chapter-13/footmisc-en-crop.svg" class="thin-padding">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>Cross-references</h2>
<p>Manually (just don’t!)</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 data-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 data-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-and-preview">
<div class="layout-content">
<h2>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 data-src="svg/chapter-13/cref-multiple-example-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h2 data-category="Task" data-task="13">Inserting footnotes</h2>
<ul>
<li>Make the text <em>Stand März 2021</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="14">Inserting references</h2>
<ul>
<li>In file <code>exercises/references/references.tex</code>, replace <em>in der Abbildung</em> and <em>Das nachstehende Quelltext-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>To do so, wrap the source code listing in a <code>listing</code> <strong>environment</strong>.</li>
<li>Additionally, add a <strong>caption</strong> to the source code listing.</li>
</ul>
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>Reference management</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 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 data-src="svg/chapter-14/bibtex-alpha-example-crop.svg" alt="Citing in Alpha style" class="large thin-padding"><figcaption>Citing in Alpha style</figcaption>
</figure>
</div>
</div>
</article>
<article>
<div class="layout-preview-only">
<div class="layout-preview">
<figure>
<img data-src="svg/chapter-14/bibtex-natdin-example-crop.svg" alt="Citing in Natdin style" class="large thin-padding"><figcaption>Citing in Natdin style</figcaption>
</figure>
</div>
</div>
</article>
<article>
<div class="layout-preview-only">
<div class="layout-preview">
<figure>
<img data-src="svg/chapter-14/bamberg_catalogue_bibtex.png" alt="Finding ready-made BibTeX entries – University of Bamberg Library" class="large"><figcaption>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 data-src="svg/chapter-14/google_bibtex1.jpg" alt="Finding ready-made BibTeX entries – Google Scholar" class="large"><figcaption>Finding ready-made BibTeX entries – Google Scholar</figcaption>
</figure>
</div>
</div>
</article>
<article>
<div class="layout-preview-only">
<div class="layout-preview">
<figure>
<img data-src="svg/chapter-14/google_bibtex2.jpg" alt="Finding ready-made BibTeX entries – Google Scholar" class="large"><figcaption>Finding ready-made BibTeX entries – Google Scholar</figcaption>
</figure>
</div>
</div>
</article>
<article>
<div class="layout-preview-only">
<div class="layout-preview">
<figure>
<img data-src="svg/chapter-14/wikipedia_bibtex_1_en.png" alt="Finding ready-made BibTeX entries – Wikipedia" class="large"><figcaption>Finding ready-made BibTeX entries – Wikipedia</figcaption>
</figure>
</div>
</div>
</article>
<article>
<div class="layout-preview-only">
<div class="layout-preview">
<figure>
<img data-src="svg/chapter-14/wikipedia_bibtex_2_en.png" alt="Finding ready-made BibTeX entries – Wikipedia" class="large"><figcaption>Finding ready-made BibTeX entries – Wikipedia</figcaption>
</figure>
</div>
</div>
</article>
<article>
<div class="layout-wide-content">
<div class="layout-content">
<h2 data-category="Task" data-task="15">Creating and inserting references</h2>
<ul>
<li>Use Google Scholar to retrieve BibTeX references for the following <span class="math inline">\(\LaTeX\)</span> handbooks:
<ul>
<li>Leslie Lamport (1994): <span class="math inline">\(\LaTeX\)</span>. A Document Preparation System.</li>
<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>Compare the entries with the results that dblp.org finds for the same titles.</li>
<li>Create a new BibTeX file called <code>literature.bib</code> in the <code>exercises/literature</code> folder.</li>
<li>Add the BibTeX entries to the BibTeX file. For this, select your preferred source among Google Scholar and dblp.</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 three handbooks in the file <code>exercises/literature/literature.tex</code>.</li>
<li>Make use of the <code>natdin</code> bibliography style.</li>
</ul>
</div>
</div>
</article>
</section><section>
<article>
<div class="layout-content-only">
<div class="layout-content">
<h1>Package in sight!</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 data-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 data-src="svg/chapter-15/beamer-orig.svg" style="width: 100%; margin: 0;">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>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 {/ oder C:}
child { node {home}
child { node {knut}
child { node {pictures}}
child { node {docs}
child { node [dir] {latex}
child { node [relativeTo] {main.tex}
child { node [selected] {part1.tex}
}
}
}
};
\end{tikzpicture}</code></pre>
</div>
<div class="layout-preview">
<img data-src="svg/chapter-04/relative-path-crop.svg">
</div>
</div>
</article>
<article>
<div class="layout-content-and-preview">
<div class="layout-content">
<h2>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 data-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" data-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>Getting help and information</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 data-src="svg/chapter-16/wikibooks-latex_en.png"></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 data-src="svg/chapter-16/ctan.png"></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 data-src="svg/chapter-16/overleaf.png"></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 data-src="svg/chapter-16/stackexchange.png"></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 data-src="svg/chapter-16/texample.png"></p>
</div>
</div>
</article>
<article>
<div class="layout-preview-only">
<div class="layout-preview">
<figure>
<img data-src="svg/chapter-16/klassisches-beispiel.png" alt="Classic (source)"><figcaption>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 data-src="svg/chapter-16/klassischeres-beispiel.png" alt="More classic (source)"><figcaption>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 data-src="svg/chapter-16/anderes-beispiel.png" alt="Different (source)"><figcaption>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 data-src="images/logo-fachschaft.png" 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 data-src="svg/chapter-16/fooboar-latex-tut.png" style="width:80%; margin:0 auto; display: block;"></p>
</div>
</div>
</article>
</section>
<div id="progress-bar"></div>
<input type="checkbox" id="help-menu-checkbox" />
<label for="help-menu-checkbox" id="help-menu-toggle">?</label>
<div id="help-menu-wrapper">
<h2>How to use this presentation</h2>
<ul>
<li>Next slide: <kbd>↓</kbd> or <kbd>→</kbd></li>
<li>Previous slide: <kbd>↑</kbd> or <kbd>←</kbd></li>
<li>Open slide overview: Hit <kbd>Ctrl</kbd> twice.</li>
<li>Close slide overview: <kbd>Esc</kbd></li>
<li>Open the help menu: <kbd>H</kbd></li>
</ul>
</div>
<script src="onpoint/onpoint.js"></script>
<script src="lib/highlightjs/highlight.pack.js"></script>
<script>
hljs.initHighlightingOnLoad();
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></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="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
<script>
MathJax = {
tex: {
inlineMath: [
['$', '$'], ['\\(', '\\)']
]
},
svg: {
fontCache: 'global'
}
};
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink