---
title: Akademisches Schreiben mit Markdown
tags: markdown, talk, workshop
description: Eine Einführung in Markdown für das Praxislabor digitale Geisteswissenschaften WiSe 2021/2022
author: Christoph Marutschke
slideOptions:
  theme: white
  transition: 'fade'
---

<style type="text/css">
  .reveal p {
    font-size: 0.8em;
  }
  .reveal ul {
    display: block;
    font-size: 0.8em;
  }
  .reveal ol {
    display: block;
    font-size: 0.8em;
  }
 .reveal h1 {
    font-size: 1.8em
  }
  .reveal h2 {
    font-size: 1.4em;
  }
  .reveal h3 {
    font-size: 1em;
  }
  .reveal h4 {
    font-size: 0.8em;
  }
  .reveal pre code {
    max-height: 400px; 
  }
}
</style>

# Spielregeln

- Eigenes Mikrofon: <span style="color: red">**AUS**</span>
- Eigenes Video: <span style="color: green">**AN**</span> oder <span style="color: red">**AUS**</span>
- Buttons:
![](https://i.imgur.com/iL2X4hs.png)<!-- .element style="width: 80%"-->
- Fragen! 

---

# Akademisches Schreiben mit Markdown

## Christoph Marutschke

---

## Wer bin ich? Was mache ich?

- Referent für Forschungsdatenmanagement 
- Chemiker und Bibliothekar
- Beratungen und Schulungen 
- Aufbau eines Repositoriums 
- Mehr zu meinen Tätigkeiten unter [FDM@UB](https://www.ub.uni-frankfurt.de/forschungsdaten/home.html)

---

## Fahrplan

* Was ist Markdown?
* Wofür kann man es benutzen?
* Wie verwendet man es?
* Welche Werkzeuge stehen zur Verfügung?

[]()
**Hands-on**: Erstellung eines Blog Post zu einem wissenschaftlichen Artikel.

---

## Was ist Markdown?


Eine simple Auszeichnungssprache (angelehnt an HTML) für die Formatierung von Textdokumenten.

---

## Was ist Textauszeichnung?


Die Kodierung der Struktur(daten) eines Dokuments mithilfe einer eigenen Sprache. Visuelle oder semantische Informationen werden mittels Tags oder Zeichen in den Text eingebracht.

---

## Textformatierung 

Zwei verschiedene Konzepte haben sich in der computergestützten Eingabe von Texten etabliert.

WYSIWYG
: „What You See Is What You **Get**“
 
WYSIWYM
: „What You See Is What You **Mean**“

---

## Vergleich

Microsoft Word **(WYSIWYG)** vs. Markdown **(WYSIWYM)**

![](https://i.imgur.com/O7GmocS.png)<!-- .element style="width: 60%"-->

Aber ist das auch fair? <span style="color: red">**Nein!**</span> 

---

## Microsoft Word **(WYSIWYG)**

* MS Word übersetzt und formatiert die Texteingabe "live" 
* Die Auszeichnung erfolgt durch die Maus bzw. Buttons
* Die Kodierung erfolgt **versteckt** im Hintergrund mittels XML (Auszeichnungssprache)
* Eine Microsoft Word Datei besteht aus einer komplexen Struktur von XML-Dateien (gezippt)

---

## Microsoft Word 

```htmlembedded=
<w:body>
<w:p>
   <w:pPr>
      <w:pStyle w:val="Title"/>
      <w:bidi w:val="0"/>
      <w:spacing w:before="240" w:after="120"/>
      <w:jc w:val="center"/>
      <w:rPr></w:rPr>
   </w:pPr>
   <w:r>
      <w:rPr></w:rPr>
      <w:t>
         <span>
            Mein großartiges Paper, das in Nature oder wenigstens in PNAS veröffentlicht wird
         </span>
      </w:t>
   </w:r>
</w:p>
<w:p>
   <w:pPr>
      <w:pStyle w:val="
      <span>
         <!-- .element: class="fragment highlight-red" data-fragment-index="2" -->Heading2
      </span>
      "/>
      <w:bidi w:val="0"/>
      <w:jc w:val="left"/>
      <w:rPr></w:rPr>
   </w:pPr>
   <w:r>
      <w:rPr></w:rPr>
      <w:t>
         <span>
           Zusammenfassung
         </span>
      </w:t>
   </w:r>
</w:p>
<w:p>
<w:pPr>
   <w:pStyle w:val="TextBody"/>
   <w:bidi w:val="0"/>
   <w:jc w:val="left"/>
   <w:rPr></w:rPr>
</w:pPr>
<w:r>
<w:rPr></w:rPr>
<w:t>
<span>
   Lorem ipsum dolor sit amet, consetetur sadipscing...
</span>
```

---

## Wie läuft das bei Markdown?

Umwandlung von Markdown in HTML:

```mediawiki
# Von den grünen Auen vor Frankfurt
Als ich mich dem bezaubernden Tore ...
```
<!-- .element style="text-align: center" -->

:arrow_down_small:

```htmlembedded
<h1>Von den grünen Auen vor Frankfurt</h1>
<p>Als ich mich dem bezaubernden Tore ...</p>
```
<!-- .element style="text-align: center" -->

---

### Einsteigerfreundlichkeit: LaTeX

```latex
\section{Das ist eine Überschrift}
\label{sec:ueberschrift}
Hier stehen dann ein paar Worte in textbf{Fettdruck} und \textit{Kursiv}.
\subsection{Es folgt eine Unterüberschrift}
\label{subsec:ueberschrift}
\begin{itemize}
    \item Vielleicht
    \item auch
    \item eine
    \item Aufzählung
\end{itemize}
\href{https://www.website.de}{Links können auch eingefügt werden}
```

---

## Markdown-Editoren

### Lokal<!-- .element style="text-align: left" -->

- Texteditor und Kommandozeile z.B. mittels [Pandoc](https://pandoc.org/installing.html)
- Quelltexteditoren (z.B. Visual Studio Code) mit Markdown-Plugin 

[]()
### Online<!-- .element style="text-align: left" -->

- [HedgeDoc](https://pad.gwdg.de/)
- [HackMD](https://hackmd.io/)

**Hinweis:** Online-Editoren erlauben zusätzlich kollaboratives Arbeiten an einem Dokument.

---

## Übungen: Elemente

Einführung der wichtigsten Elemente für das Hand-on 

* Hervorhebungen
* Tabellen
* Bilder
* Verweise
* Bildunterschriften

**Bitte mitmachen**: [Spielplatz](https://hackmd.io/@cm4ubffm/SkINxEWdY/edit)

---

### Freundlich für Einsteiger: Markdown

```markdown
# Das ist eine Überschrift

Hier stehen dann ein paar Worte in **Fettdruck** und *Kursiv*.

## Es folgt eine Unterüberschrift

* Vielleicht
* auch
* eine
* Aufzählung

[Links können auch eingefügt werden](https://www.website.de)
```

---

## Tabellen in Markdown 

| Überschrift 1 | Überschrift 2 | Anmerkungen |
| ------------- | ------------- | ----------- |
| Das ist eine Zelle | Das ist noch eine | Bemerkung |
| Hier steht noch mehr | Hier nicht ||
<!-- .element style="font-size: 0.8em" -->

[]()
[]()

```
| Überschrift 1 | Überschrift 2| Anmerkungen ||
| ------------- | ------------ | ----------- ||
| Das ist eine Zelle | Das ist noch eine | Bemerkung ||
| Hier steht noch mehr | Hier nicht ||
```

---

## Bilder in Markdown

![Katze](https://images.pexels.com/photos/2518134/pexels-photo-2518134.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260 =300x230)<!-- .element style="width: 35%"-->

```
![Katze](https://www.katzen.de/bild.jpg =BreitexHöhe)
```

**Hinweis:** Der Online-Editor HackMD kann Bilder via Drag'n'Drop einbinden (Hosting bei [Imgur](https://imgur.com/))

---

## Bildunterschriften

<figure>
  <img src="https://images.pexels.com/photos/2518134/pexels-photo-2518134.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="Katze" width="40%"><!-- .element style="width: 35%"-->
    <figcaption><p>Eine besonders schöne Katze</p></figcaption>
</figure>

---

## Bildunterschriften

### ~~Markdown~~ HTML

```htmlembedded
<figure>
  <img src="https://www.katzen.de/bild.jpg" alt="my alt text">
  <figcaption>Eine besonders schöne Katze</figcaption>
</figure>
```

**Alternativ:** In *kursiver* Schrift weiterschreiben ... because it doesn\*t really matter!

```
*Eine besonders schöne Katze*
```

---

## Verweise


Ein wichtiges Zitat[^1] und ein anderes Zitat.[^2] 

[^1]: ... aus einem interessanten Artikel.
[^2]: ... aus einem besonderen Buch.

#### Literaturverzeichnis

---

## Verweise

```
Ein wichtiges Zitat[^1] und ein anderes Zitat.[^2] 

[^1]: ... aus einem interessanten Artikel.
[^2]: ... aus einem besonderen Buch.

#### Literaturverzeichnis
```

**Grenzen:** Keine automatische Formatierung & Keine automatische Erstellung von Verzeichnissen

---

## Cheat Sheets

Weitere Elemente: z.B. Code und „Extended Syntax“

* [Emoji-Cheat-Sheet](https://www.webfx.com/tools/emoji-cheat-sheet/)
* [HackMD Features](https://hackmd.io/features?both)
* [HackMD Syntax](https://www.markdownguide.org/tools/hackmd/)
* [GitHub Markdown Guide](https://www.markdownguide.org/tools/github-pages/)

**Hinweis:** [Markdown Flavors](https://gist.github.com/vimtaai/99f8c89e7d3d02a362117284684baa0f) ... nicht jede „Extended Syntax“ funktioniert auf jeder Plattform.

---

### Die nächsten Schritte

Für die „anspruchsvollere“ Verwendung von Markdown (beispielsweise in Kombination mit LateX) kann [Zettlr](https://www.zettlr.com/) auf dem eigenen Rechner installiert werden.

#### In Kombination mit ...

* [Latex](https://www.latex-project.org/get/)
* [Pandoc](https://pandoc.org/installing.html)

---

## Präsentationen in Markdown 

* Markdown kann - mittels Javaskript - in Präsentationen verwandelt werden
* Die meisten Pads haben diese Funktion standardmäßig dabei!
* Eine PDF-Version kann dann über die Print-Funktion (des Browsers) erzeugt werden

[Präsentation](https://hackmd.io/@cm4ubffm/B1KNTFUPK) bzw. [Markdown-Skript](https://hackmd.io/@cm4ubffm/B1KNTFUPK/edit)

---

### Hands-on

**Szenario:** Verfassen eines Blog-Post basierend auf einer „eigenen“ wissenschaftlichen Veröffentlichung. Die Aufgabe wird in Kleingruppen in Breakout-Rooms bearbeitet. *Eine Zusammenfassung des Textes ist nicht erforderlich!*

**Alternativ:** Sie suchen sich ein eigenes Thema, z.B. basierend auf einem Wikipedia-Artikel. Oder?

**Materialien:** [Publikation](https://doi.org/10.1088/0957-4484/25/33/335703) und [Manuskript](https://hessenbox-a10.rz.uni-frankfurt.de/getlink/fiMVPDV5LDwQsErxUbzyHqGf/Hands-on_Markdown)

**Backup:** [GitHub Account](https://education.github.com/pack)

---

### Vorteile von Markdown

* Einfach zu erlernen und zu verwenden (Online-Tools)
* Markdown eignet sich für die schnelle Textformatierung (besonders für das Internet)
* Kompromiss zwischen Sprachumfang und typographischen Möglichkeiten (Erweiterbar mit HTML/CSS)
* Durch (Online)-Tools ist der Umgang die Beherrschung der  Kommadozeile für die PDF- bzw. Folien-Erstellung nicht mehr notwendig!
* Einfache Textdateien: Versionierbar & Archivierbar & Maschinenlesbar & Unabhängigkeit von proprietäre Software

---

### Vielen Dank für die Aufmerksamkeit! 

<style>
    .reveal section img { 
        background:none; 
        border:none; box-shadow:none; 
        width: 11%
    }
</style>

Mein Dank gilt: [Adrian Pachzelt](https://github.com/GrazingScientist) 

Kontakt: [Christoph Marutschke](mailto:c.marutschke@ub.uni-frankfurt.de?subject=[Digitale%20Geisteswissenschaften]%20Markdown)

**Link zur Umfrage:** [https://survey.lamapoll.de/Markdown-1](https://survey.lamapoll.de/Markdown-1)

[![License: CC BY 4.0](https://img.shields.io/badge/License-CC_BY_4.0-lightgrey.svg)](https://creativecommons.org/licenses/by/4.0/)