Plain-Text-Markup-Formate für Texte (Markdown, Asciidoc) – IT-Berufe-Podcast #155

Um die Vorteile und Einsatzgebiete von Plain-Text-Markup-Formaten für längere Texte geht es in der einhundertfünfundfünfzigsten Episode des IT-Berufe-Podcasts.

Inhalt

Plain-Text-Formate sind Formate, die in reinen (menschenlesbaren) Text-Dateien abgelegt werden, also keine binären Formate wie z.B. in Microsoft Word oder LibreOffice.

Vorteile von Plain-Text-Formaten

• Versionierung: Diff, Merge, Branches möglich
• Langlebigkeit: Keine proprietäre Bearbeitungssoftware nötig, keine Abhängigkeit von Herstellern
• Produktivität: Arbeit ausschließlich mit der Tastatur ohne Maus
• Flexibilität: Konvertierbar, zur Not selbst parsbar, mit jedem beliebigen Editor änderbar
• Automatisierung: Mächtige Tools zur Manipulation vorhanden

Beispiele für Formate

• Markdown
  • leicht zu lernen, geringer Sprachumfang
  • Output hauptsächlich HTML
  • breite Unterstützung in Tools, z.B. WordPress, GitHub
• AsciiDoc
  • sehr großer Sprachumfang, sogar geeignet für Bücher
  • viele verschiedene Output-Formate, z.B. HTML, PDF, EPUB
  • gut in übliche Build-Prozesse integriert, z.B. in Gradle
• Textile
  • ähnelt der Wiki-Syntax
  • Redmine
• LaTeX
  • komplettes Textsatz-System, „perfekter“ Textsatz
  • geeignet für komplette Bücher inkl. Verzeichnissen, Index, Literaturverzeichnis
• PlantUML
  • Gestaltung von UML-Diagrammen
  • kann u.a. in LaTeX und AsciiDoc eingebunden werden, aber auch in Wikis

Tools

• Pandoc: Konvertiert automatisch Dateien zwischen beliebigen Formaten
• VSCode: Editor für beliebige Markup-Formate inkl. Preview-Funktion
• MarkdownPad: Editor für Markdown

Quelltextbeispiele

Es folgen Beispiele für das gezeigte HTML-Fragment in den unterschiedlichen Markup-Sprachen.

HTML <h1 id="markup-sprachen-markdown">Markup-Sprachen: HTML</h1> <p>Ein normaler Absatz in HTML.</p> <h2 id="überschrift">Überschrift</h2> <p><strong>Fetter Text</strong> und <em>kursiver Text</em>.</p> <h2 id="listen">Listen</h2> <ul> <li>Ungeordnete Liste <ul> <li>Mit Unterpunkten</li> <li>Noch ein Unterpunkt</li> </ul></li> <li>Noch ein Punkt</li> </ul> <ol type="1"> <li>Geordnete Liste <ol type="1"> <li>Mit Unterpunkten</li> <li>Noch ein Unterpunkt</li> </ol></li> <li>Noch ein Punkt</li> </ol> <h2 id="links">Links</h2> <p><a href="https://it-berufe-podcast.de" title="Website des IT-Berufe-Podcasts">IT-Berufe-Podcast</a></p> <h2 id="bilder">Bilder</h2> <figure> <img src="https://it-berufe-podcast.de/Abbildungen/LogoITBerufePodcast500px.jpg" title="Das Logo des IT-Berufe-Podcasts" alt="" /><figcaption>Bildbeschreibung</figcaption> </figure> <h2 id="code">Code</h2> <p>Inline Code mit <code>code</code>.</p> <div class="sourceCode" id="cb1"><pre class="sourceCode java"><code class="sourceCode java"><span id="cb1-1"><a href="#cb1-1"></a><span class="kw">public</span> <span class="dt">static</span> <span class="dt">void</span> <span class="fu">main</span>(<span class="bu">String</span>[] args) {</span> <span id="cb1-2"><a href="#cb1-2"></a> <span class="bu">System</span>.<span class="fu">out</span>.<span class="fu">println</span>(<span class="st">"Hallo!"</span>);</span> <span id="cb1-3"><a href="#cb1-3"></a>}</span></code></pre></div> <h2 id="zitate">Zitate</h2> <blockquote> <p>Zitate sehen so aus.</p> </blockquote> Markdown # Markup-Sprachen: Markdown Ein normaler Absatz in Markdown. ## Überschrift **Fetter Text** und *kursiver Text*. ## Listen * Ungeordnete Liste * Mit Unterpunkten * Noch ein Unterpunkt * Noch ein Punkt 1. Geordnete Liste 1. Mit Unterpunkten 2. Noch ein Unterpunkt 2. Noch ein Punkt ## Links [IT-Berufe-Podcast](https://it-berufe-podcast.de "Website des IT-Berufe-Podcasts") ## Bilder  ## Code Inline Code mit `code`. \```java public static void main(String[] args) { System.out.println("Hallo!"); } \``` ## Zitate > Zitate sehen so aus. AsciiDoc == Markup-Sprachen: AsciiDoc Ein normaler Absatz in AsciiDoc. === Überschrift *Fetter Text* und _kursiver Text_. === Listen * Ungeordnete Liste ** Mit Unterpunkten ** Noch ein Unterpunkt * Noch ein Punkt . Geordnete Liste .. Mit Unterpunkten .. Noch ein Unterpunkt . Noch ein Punkt === Links https://it-berufe-podcast.de[IT-Berufe-Podcast] === Bilder image:https://it-berufe-podcast.de/Abbildungen/LogoITBerufePodcast500px.jpg[Bildbeschreibung,title="Das Logo des IT-Berufe-Podcasts"] === Code Inline Code mit `code`. [source,java] ---- public static void main(String[] args) { System.out.println("Hallo!"); } ---- === Zitate ____ Zitate sehen so aus. ____ Textile h1(#markup-sprachen-markdown). Markup-Sprachen: Textile Ein normaler Absatz in Textile. h2(#überschrift). Überschrift *Fetter Text* und _kursiver Text_. h2(#listen). Listen * Ungeordnete Liste ** Mit Unterpunkten ** Noch ein Unterpunkt * Noch ein Punkt # Geordnete Liste ## Mit Unterpunkten ## Noch ein Unterpunkt # Noch ein Punkt h2(#links). Links "IT-Berufe-Podcast":https://it-berufe-podcast.de h2(#bilder). Bilder !https://it-berufe-podcast.de/Abbildungen/LogoITBerufePodcast500px.jpg(Das Logo des IT-Berufe-Podcasts)! Bildbeschreibung h2(#code). Code Inline Code mit @code@. bc(java). public static void main(String[] args) { System.out.println("Hallo!"); } h2(#zitate). Zitate bq. Zitate sehen so aus. LaTeX \hypertarget{markup-sprachen-markdown}{% \section{Markup-Sprachen: LaTeX}\label{markup-sprachen-markdown}} Ein normaler Absatz in LaTeX. \hypertarget{uxfcberschrift}{% \subsection{Überschrift}\label{uxfcberschrift}} \textbf{Fetter Text} und \emph{kursiver Text}. \hypertarget{listen}{% \subsection{Listen}\label{listen}} \begin{itemize} \tightlist \item Ungeordnete Liste \begin{itemize} \tightlist \item Mit Unterpunkten \item Noch ein Unterpunkt \end{itemize} \item Noch ein Punkt \end{itemize} \begin{enumerate} \def\labelenumi{\arabic{enumi}.} \tightlist \item Geordnete Liste \begin{enumerate} \def\labelenumii{\arabic{enumii}.} \tightlist \item Mit Unterpunkten \item Noch ein Unterpunkt \end{enumerate} \item Noch ein Punkt \end{enumerate} \hypertarget{links}{% \subsection{Links}\label{links}} \href{https://it-berufe-podcast.de}{IT-Berufe-Podcast} \hypertarget{bilder}{% \subsection{Bilder}\label{bilder}} \begin{figure} \centering \includegraphics{https://it-berufe-podcast.de/Abbildungen/LogoITBerufePodcast500px.jpg} \caption{Bildbeschreibung} \end{figure} \hypertarget{code}{% \subsection{Code}\label{code}} Inline Code mit \texttt{code}. \begin{Shaded} \begin{Highlighting}[] \KeywordTok{public} \DataTypeTok{static} \DataTypeTok{void} \FunctionTok{main}\NormalTok{(}\BuiltInTok{String}\NormalTok{[] args) \{} \BuiltInTok{System}\NormalTok{.}\FunctionTok{out}\NormalTok{.}\FunctionTok{println}\NormalTok{(}\StringTok{"Hallo!"}\NormalTok{);} \NormalTok{\}} \end{Highlighting} \end{Shaded} \hypertarget{zitate}{% \subsection{Zitate}\label{zitate}} \begin{quote} Zitate sehen so aus. \end{quote} PlantUML

Und zum Schluss noch ein Beispiel für ein Klassendiagramm in PlantUML.

class Auto { hersteller : String farbe : String kilometerstand : Integer neupreis : Double fahre() : void hupe() : void }

Gerendert sieht das dann so aus.

Literaturempfehlungen

Eines meiner absoluten Lieblingsbücher widmet ein eigenes Kapitel dem Thema „Plain Text“: The Pragmatic Programmer*. Dave Thomas und Andy Hunt erklären dir auch noch einmal die Vorteile von einfachen Textdateien.

*

Links

• Permalink zu dieser Podcast-Episode
• RSS-Feed des Podcasts
• Markdown
• AsciiDoc
• Textile
• LaTeX
• PlantUML
• Pandoc
• Visual Studio Code
• MarkdownPad