Informatik/Mathematik / Software Engineering / Git und AsciiDoc

Das Dokument beschreibt die Installation & Konfiguration der für das Praktikum und den Beleg in Software Enigneering I + II benötigten Software Git, Asciidoctor und Visual Studio Code.

1. Installation

1.1. Git

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. - https://git-scm.com/

Test im Terminal[1] ob Git schon installiert ist bzw. erfolgreich installiert wurde:

$ git --version
git version 2.32.0 (Apple Git-132)

1.1.1. Windows

Laden und installieren Sie sich Git von der offiziellen Projektseite: git-scm.com/downloads. Es können die Standardeinstellungen bei der Installation übernomen werden. Dabei wird Git samt der Git Bash installiert.

1.1.2. Linux und macOS

In der Regel ist Git standartdmäßig vorhanden, so dass hier keine weitere Installation notwendig ist. Alternativ den Hinweisen auf git-scm.com/downloads folgen.

1.2. Visual Studio Code

Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. - https://code.visualstudio.com/docs

1.2.1. Windows, Linux und macOS

Laden und installieren Sie sich Visual Studio Code von der offiziellen Projektseite: code.visualstudio.com/download.

1.3. Asciidoctor

Asciidoctor is a fast, open source text processor and publishing toolchain for converting AsciiDoc content to HTML5, DocBook, PDF, and other formats. Asciidoctor is written in Ruby and runs on all major operating systems. - Asciidoctor

Folgend werden drei Varianten gezeigt, wie Asciidoctor installiert werden kann. Die erste Variante ist für den Anfang die einfachste, da hier nur Visual Studio Code mit der Asciidoctor Erweiterung benötgt wird.

1.3.1. Variante 1: Asciidoctor mit Visual Studio Code

Für die Unterstützung von AsciiDoc-Dokumenten (Syntax Highlighting, Live-Vorschau, PDF-Generierung …​) wird eine Erweiterung (Extension) in Visual Studio Code benötigt.

  1. Starten Sie Visual Studio Code

  2. Gehen Sie in Visual Studio Code in die Extensions Ansicht (View  Extensions) und suchen Sie nach AsciiDoc. Installieren Sie die Erweiterung AsciiDoc von asciidoctor.

1.3.2. Variante 2: Asciidoctor lokal installiert

Für die Installation von Asciidoctor wird Ruby und die zugehörigen RubyGems[2] benötigt. Für die Erweiterung Asciidoctor Diagram wird zusätzlich Java (OpenJDK) und Graphviz benötigt.

Wird die Diagrammunterstützung von Asciidoctor nicht benötigt, muss java, asciidoctor-diagram und graphviz nicht installiert werden.
Tabelle 1. Benötigte Software und Erweiterungen für Asciidoctor

asciidoctor

Asciidoctor is a fast, open source text processor and publishing toolchain.

asciidoctor-pdf

Asciidoctor PDF is a native PDF converter for AsciiDoc

rouge

Rouge is a pure Ruby syntax highlighter. Use in AsciiDoc documents the attribute :source-highlighter: rouge.

asciidoctor-diagram

Asciidoctor Diagram is a set of Asciidoctor extensions that enable you to add diagrams, which you describe using plain text, to your AsciiDoc document.

graphviz

Graphviz is open source graph visualization software. Graph visualization is a way of representing structural information as diagrams of abstract graphs and networks.

Tabelle 2. Optionale Software und Erweiterungen für Asciidoctor

text-hyphen

Erweitert Asciidoctor-PDF um die Möglichkeit von Silbentrennung bei der Erstellung von PDF-Dokumenten. Asciidoctor Dokumentenattribute: :lang: DE und :hyphens:

Test der Installation

Tests im Terminal, ob Ruby, Java, Asciidoctor, Graphviz und benötigte RubyGems schon installiert sind bzw. erfolgreich installiert wurden. Die Versionen können je nach Betriebssystem oder alter der Anleitung abweichen.

Ruby
$ ruby -v
ruby 3.1.1p18 (2022-02-18 revision 53f5fc4236) [arm64-darwin21]
Java
$ java --version
openjdk 17.0.2 2022-01-18
OpenJDK Runtime Environment (build 17.0.2+8-86)
OpenJDK 64-Bit Server VM (build 17.0.2+8-86, mixed mode, sharing)
Asciidoctor
$ asciidoctor -v
Asciidoctor 2.0.17 [https://asciidoctor.org]
Runtime Environment (ruby 3.1.1p18 (2022-02-18 revision 53f5fc4236) [arm64-darwin21]) (lc:UTF-8 fs:UTF-8 in:UTF-8 ex:UTF-8)
Asciidoctor-PDF (falls extra vorhanden)
$ asciidoctor-pdf -v
Asciidoctor PDF 1.6.2 using Asciidoctor 2.0.17 [https://asciidoctor.org]
Runtime Environment (ruby 3.1.1p18 (2022-02-18 revision 53f5fc4236) [arm64-darwin21]) (lc:UTF-8 fs:UTF-8 in:UTF-8 ex:UTF-8)
Graphviz Dot
$ dot -V
dot - graphviz version 3.0.0 (20220226.1711)
RubyGems
$ gem list | grep rouge
rouge (3.28.0)

$ gem list | grep asciidoctor-pdf
asciidoctor-pdf (1.6.2)

$ gem list | grep asciidoctor-diagram
asciidoctor-diagram (2.2.1)
asciidoctor-diagram-ditaamini (1.0.1)
asciidoctor-diagram-plantuml (1.2022.1)

$ gem list | grep text-hyphen
text-hyphen (1.4.1)
Windows
  1. Ruby über den RubyInstaller, bspw. Ruby 3.x (x64), installieren. Eine minimale Installation ohne Devkit und ohne MSYS2 development toolchain reicht.

    Alternativ kann über das WSL (Windows Subsystem für Linux) Ruby installiert werden. Hier kann je nach gewählter Distribution eine Ruby Version dabei sein. Andernfalls entsprechend für das gewählte Linux nachinstallieren.

  2. Asciidoctor und benötigte Tools per RubyGems über das Terminal installieren:

    $ gem install asciidoctor
    $ gem install asciidoctor-pdf
    $ gem install rouge
    $ gem install asciidoctor-diagram
    $ gem install text-hyphen
  3. Java OpenJDK über Adoptium oder Azul Zulu laden und installieren. Es ist egal ob die JDK oder JDK (LTS) Version genommen.

  4. Graphviz über die Downloadseite laden und installieren:

  5. Graphviz Dot fertig konfigurieren:

    • Windows Startmenü Button  Rechtsklick  Eingabeaufforderung (Administrator) oder PowerShell (Administrator) öffnen

    • In das bin Verzeichnis der Graphviz-Installation wechseln cd C:\Program Files\Graphviz 2.44.1\bin und dot -c ausführen:

      screenshot eingabeaufforderung dot
      Abbildung 1. Screenshot: Eingabeaufforderung (Administrator)
      Hinweise zum Setzen der Umgebungsvariable GRAPHVIZ_DOT

      Das Anlegen der Umgebungsvariable GRAPHVIZ_DOT ist nur notwendig, wenn die Graphviz Installation nicht im Standardpfad liegt bzw. ein Fehler auftaucht, welcher besagte Umgebungsvariable vermisst.

      1. -Taste drücken und umgebungsvariable eingeben

      2. Systemumgebungsvariablen bearbeiten auswählen

      3. In den Systemeigenschaften den Umgebungsvariablen…​ Button betätigen

      4. Im oberen Bereich Benutzervariablen über den Button Neu…​ folgende Umgebungsvariable anlegen:

        • Name der Variable: GRAPHVIZ_DOT

        • Wert der Variable: über Datei durchsuchen…​ in das Installationsverzeichnis von Graphviz wechseln und im Ordner bin die dot.exe auswählen, bspw.: C:\Program Files\Graphviz 2.44.1\bin\dot.exe

      5. Mit OK übernehmen und das Umgebungsvariablen-Fenster ebenfalls mit OK schließen

      6. Terminal und Visual Studio Code neustarten

Screenshot: Windows 10 mit Visual Studio Code unter VirtualBox
700
Beim wiederholten Generieren nach erfolgreicher Installation kann es sein, dass immer noch die alten fehlerhaften Diagrammbilder angezeigt werden. Hier hilft es die alten Diagrammbilder vorher zu löschen. In Praktikum 4 wären das der Ordner .asciidoctor und der Ordner images/diagrams.
Linux
  1. Ruby per Paketverwaltungssystem installieren, bspw. unter Ubuntu mit:

    $ sudo apt-get install ruby
  2. Asciidoctor und benötigte Tools per RubyGems über das Terminal installieren:

    $ gem install asciidoctor
    $ gem install asciidoctor-pdf
    $ gem install rouge
    $ gem install asciidoctor-diagram
    $ gem install text-hyphen
  3. Java OpenJDK über die Packetquellen oder über Adoptium oder Azul Zulu laden und installieren. Es ist egal ob die JDK oder JDK (LTS) Version genommen wird.

  4. Für die lokale Generierung der Diagramme wird noch Graphviz benötigt und kann über die Packetquellen (Alternativ entsprechende Downloadseite) installiert werden:

    $ sudo apt-get install graphviz
macOS
  1. Homebrew nach zugehöriger Anleitung installieren.

  2. Ruby per Homebrew über das Terminal installieren (alternative Anleitung):

    % brew install ruby

    Zusätzlich muss noch die Umgebungsvariable PATH für die mit Homebrew installierte Ruby Version angepasst werden:

    Hinweise: Anpassen der PATH-Variable
    1. Im Terminal die verwendete Shell und Architektur des Macs identifizieren:

      Shell
      % echo $SHELL
      /bin/zsh
      Architektur
      % uname -m
      arm64 oder x86_64
    2. Die Konfigurationsdatei der verwendeten Shell .zshrc (.bashrc) zum Bearbeiten öffnen:

      % open -e ~/.zshrc
      #oder
      % vi ~/.zshrc
    3. In der Konfigurationsdatei die PATH-Variable anpassen. Dazu, entsprechend der Architektur des Macs, am Ende folgendes hinzufügen:

      Mac mit Apple-Chip (arm64)
      if [[ -d "/opt/homebrew/opt/ruby/bin" ]]; then
        export PATH="/opt/homebrew/opt/ruby/bin:$PATH"
        export PATH="$(gem environment gemdir)/bin:$PATH"
      fi
      Mac mit Intel-Prozessor (x86_64) oder Rosetta
      if [[ -d "/usr/local/opt/ruby/bin" ]]; then
        export PATH="/usr/local/opt/ruby/bin:$PATH"
        export PATH="$(gem environment gemdir)/bin:$PATH"
      fi
      Alternativ beides per IF-ELSE
      if [[ `uname -m` = "arm64" && -d "/opt/homebrew/opt/ruby/bin" ]]; then
        # arm64 (apple)
        export PATH="/opt/homebrew/opt/ruby/bin:$PATH"
      elif [[ `uname -m` = "x86_64" && -d "/usr/local/opt/ruby/bin" ]]; then
        # x86_64 (intel)
        export PATH="/usr/local/opt/ruby/bin:$PATH"
      fi
      gem_path="$(gem environment gemdir)/bin" && export PATH="$gem_path:$PATH"
    4. Das Terminal beenden und neustarten oder mit source ~/.zshrc die geänderte Konfiguration neuladen lassen.

  1. Asciidoctor Tools per RubyGems über das Terminal installieren:

    $ gem install asciidoctor
    $ gem install asciidoctor-pdf
    $ gem install rouge
    $ gem install asciidoctor-diagram
    $ gem install text-hyphen
  2. Java OpenJDK über das Terminal installieren:

    $ brew install openjdk

    Alternativ über Adoptium oder Azul Zulu in passender Architektur laden und installieren. Es ist egal ob die JDK oder JDK (LTS) Version genommen wird.

    Hinweise: OpenJDK Download Variante
    $ cd ~/Downloads
    $ tar -xf openjdk-17.0.2_macos-aarch64_bin.tar.gz
    $ sudo mv ~/Downloads/jdk-17.0.2.jdk /Library/Java/JavaVirtualMachines
  3. Für die lokale Generierung der Diagramme wird noch Graphviz benötigt:

    $ brew install graphviz

1.3.3. Variante 3: Asciidoctor mit Docker

Voraussetzung für die Verwendung dieser Variante ist eine vorhandene Installation von Docker.
Variante: Interaktive Shell

In dieser Variante wird das Generieren der Dokumente über einen Asciidoctor Docker Container gelöst. Die Vorschau des Dokumentes in VS Code erfolgt über die Asciidoctor Erweiterung (JavaScript).

  1. In das lokale Projektverzeichnis my-asciidoctor-project wechseln und Docker Container mit interaktiver Shell im Terminal (bspw. von VS Code) starten:

    % cd my-asciidoctor-project/
    % docker run -it -v "$(pwd):/documents/" asciidoctor/docker-asciidoctor  (1) (2)
    
    1 Im Docker Container ist das Projektverzeichnis im Verzeichnis /documents gemountet.
    2 Der angegebene Asciidoctor Docker Container asciidoctor/docker-asciidoctor ist vom Asciidoctor Projekt und enthält alle relevanten Tools.

    Alternativ direkt mit Pfad zum Projektverzeichnis starten:

    % docker run -it -v "/path/to/my-asciidoctor-project/:/documents/" asciidoctor/docker-asciidoctor
  2. Prüfen, ob lokaler Projektinhalt im Docker Container im /documents Verzeichnis verfügbar ist:

    bash-5.1# pwd
    /documents
    bash-5.1# ls
    document.adoc ...
  3. Dokument mit Asciidoctor-Befehl im Docker Container als HTML/PDF erstellen:

    bash-5.1# asciidoctor document.adoc
    bash-5.1# asciidoctor-pdf document.adoc
    bash-5.1# asciidoctor -r asciidoctor-diagram document.adoc
    bash-5.1# asciidoctor-pdf -r asciidoctor-diagram document.adoc

    Das Ergebnis liegt anschließend im Projektverzeichnis.

  4. Docker Container in der interaktiver Shell mit exit beenden:

    bash-5.1# exit
Variante: Dev Container in Visual Studio Code

In dieser Variante wird das Projektverzeichnis innerhalb von Visual Studio Code in einem zugehörigen Dev Container gestartet. Das Generieren und die Vorschau geschieht über den Asciidoctor Docker Container.

  1. Installation der VS Code Erweiterung: Remote - Containers

  2. Projektverzeichnis über File  Open folder… in VS Code öffnen

  3. Im geöffneten Projektverzeichnis wird ein Ordner .devcontainer mit den Dateien devcontainer.json und Dockerfile erstellt.

  4. Folgenden Inhalte für die Datei devcontainer.json übernehmen:

    devcontainer.json
    {
        "name": "Asciidoctor", (1)
        "context": "..", (2)
        "dockerFile": "Dockerfile", (3)
        "extensions": [ (4)
            "asciidoctor.asciidoctor-vscode",
            "jebbs.plantuml"
        ],
        "settings": { (5)
            "asciidoc.asciidoctor_command": "asciidoctor -r asciidoctor-diagram",
            "asciidoc.preview.useEditorStyle": false,
            "asciidoc.use_asciidoctor_js": false
        }
    }
    1 Sets the name of the dev container
    2 Sets the run context to one level up instead of the .devcontainer folder.
    3 Update the 'dockerFile' property if you aren’t using the standard 'Dockerfile' filename.
    4 Add the IDs of extensions you want installed when the container is created.
    5 Set default container specific settings.json values on container create.

    Enthält den Namen, den Ort des zugehörigen Dockerfiles und die für den Container von VS Code benötigten Erweiterungen mit den zugehörigen Einstellungen.

  5. Folgenden Inhalte für die Datei Dockerfile übernehmen:

    Dockerfile
    FROM asciidoctor/docker-asciidoctor

    Enthält die Angabe des zu verwendenden Asciidoctor Docker Containers asciidoctor/docker-asciidoctor vom Asciidoctor Projekt.

  6. In VS Code die View > Command Palette… öffnen und Remote-Containers: Reopen in Container auswählen.

    screenshot vscode dev container
    Abbildung 2. Screenshot: Laufender Dev Container in VS Code

    Die Vorschau und das Terminal in VS Code nutzen jetzt den Asciidoctor Docker Container.

  7. Beenden mit Rechtsklick auf Dev Container: Asciidoctor (links unten) …Close Remote Connection oder Reopen folder localy

2. Konfiguration

2.1. Git-Identität

Legen Sie Ihre lokale Git-Identität in der globalen Git-Konfiguration fest:

$ git config --global user.name "Vorname Nachname"
$ git config --global user.email s00000@informatik.htw-dresden.de

Ausgewählte Inhalte bzw. alles kann mit folgenden Git-Kommandos angezeigt werden:

$ git config --global user.name
Vorname Nachname
$ git config --global user.email
s00000@informatik.htw-dresden.de
$ git config --list
...
Hinweise für verschiedene Git-Identitäten (Privat, Studium, Arbeit, …​)

Arbeiten Sie auf Ihrem (privaten) Rechner mit verschiedenen Git-Identitäten (andere E-Mail für Privat, Studium, Arbeit, …​), können Sie auch eine spezifische Konfiguration je Repository anlegen.

Befehle wie oben, nur ohne --global und innerhalb ihres Repository-Verzeichnisses ausgeführt:

$ git config user.name "Vorname Nachname"
$ git config user.email s00000@informatik.htw-dresden.de

Alternativ gibt es auch die Möglichkeit Conditional includes zu verwenden. Hier kann man bspw. Git-Konfigurationen abhängig von der Verzeichnisstruktur setzen:

.gitconfig (global)
[user]
    name = Vorname Nachname
    email = vorname.nachname@private.de
[includeIf "gitdir:~/Studium/"]
    path = "~/.gitconfig_studium"
.gitconfig_studium
[user]
    name = Vorname Nachname
    email = s00000@htw-dresden.de

2.2. GitHub - Personal access token verwenden

Eine Möglichkeit für die Authentifizierung zu GitHub über die Shell/Terminal bzw. Visual Studio Code ist der Personal access token.

Mit den Access Tokens (Personal access tokens) können Anwendungen gezielt eingeschränkte Zugriffsmöglichkeiten gegeben oder entzogen werden, ohne das Accountpasswort preiszugeben.

  1. Legen Sie auf GitHub über Settings  Developer settings  Personal access tokens einen neuen Token bspw. Privater Rechner mit einer unendlichen Gültigkeit und nur dem Scope repo an.

    Der Personal access token ist nur nach dem Erstellen zu sehen und kann danach nicht wieder angezeigt werden!
  2. Führen Sie im Terminal (Windows bspw. Power Shell) ein git clone oder bei existierendem Repository git pull durch. Dabei wird der Login abgefragt und in der Regle im Login-Manager (Credential Manager) des Systems hinterlegt.

    Wird nach einem Passwort gefragt, wird stattdessen der eben angelegte Personal access token verwendet.
    Bei der Frage nach der Authentication Methode entsprechend 2 für Personal access token wählen.
    Ausgabe: Windows - PowerShell
    > git clone https://github.com/<account>/htwd-se-example-project.git
    Cloning into 'htwd-se-example-project'...
    Select an authentication method for 'https://github.com/':
      1. Web browser (default)
      2. Personal access token
    option (enter for default): 2
    Enter GitHub personal access token for 'https://github.com/'...
    Token:
    remote: Enumerating objects: 10, done.
    remote: Counting objects: 100% (10/10), done.
    remote: Compressing objects: 100% (8/8), done.
    remote: Total 10 (delta 0), reused 4 (delta 0), pack-reused 0
    Receiving objects: 100% (10/10), done.
    Ausgabe: Linux und macOS - Terminal
    % git clone https://github.com/<account>/htwd-se-example-project.git
    Klone nach 'htwd-se-example-project' ...
    Username for 'https://github.com': <account>
    Password for 'https://<account>@github.com':
    remote: Enumerating objects: 10, done.
    remote: Counting objects: 100% (10/10), done.
    remote: Compressing objects: 100% (8/8), done.
    remote: Total 10 (delta 0), reused 4 (delta 0), pack-reused 0
    Receiving objects: 100% (10/10), done.

2.3. Visual Studio Code

2.3.1. Anpassung der AsciiDoc Extension

Die Einstellungen finden Sie unter: Visual Studio Code über Preferences (oder Zahnradsymbol)  Settings  Extensions  AsciiDoc.

Vorschau und Generierung mit AsciiDoc Extension
Vorschau mit Asciidoctor-Thema (weißer Hintergrund)
  • Asciidoc > Preview: Use Editor Style: (deaktiviert)

PDF-Generierung
  • Asciidoc > PDF: Engine: asciidoctor-pdf

Unterstützung von Diagrammen (PlantUML)
  • Asciidoc > Extensions: Enable Kroki: (aktiviert)

Verwendung der lokal installierten Asciidoctor Version

Sind die Asciidoctor Tools lokal installiert, kann die Erweiterung statt der integrierten JavaScript-Variante direkt die Asciidoctor-Kommandos verwenden. Dazu sind folgende Einstellungen anzupassen:

Seit Version 3.1 der Asciidoctor Erweiterung ist die Asciidoctor CLI Unterstützung entfernt worden. Somit wird nur noch die integrierte und nicht mehr die lokal installierte Version für die Vorschau und Generierung innerhalb von Visual Studio Code verwendet.

Einzig für die PDF-Generierung ist es noch möglich die loakl installierte Version zu Konfigurieren.

PDF-Generierung
  • Asciidoc > PDF: Asciidoctor PDF Command Path: asciidoctor-pdf

  • Asciidoc > PDF: Asciidoctor PDF Command Args: -r,asciidoctor-diagram

2.3.2. Hilfreiche Erweiterungen (optional)

Weitere hilfreiche Erweiterungen für Visual Studio Code wären:

  • Trailing Spaces …​ highlight trailing spaces and delete them in a flash

  • Markdown Preview Github Styling …​ changes VS Code’s built-in markdown preview to match Github’s styling

  • PlantUML …​ rich PlantUML support for Visual Studio Code

  • Git Graph …​ View a Git Graph of your repository, and perform Git actions from the graph

2.3.3. Bugs & Bugfixes

  • Funktioniert in Visual Studio Code die Anzeige von Bildern in der Vorschau eines AsciiDoc-Dokumentes nicht, aber beim Rendern über das Terminal, könnte es nach obiger Konfiguration an folgendem liegen: Preview Attributes: data-uri


1. Ein Terminal ermöglicht die Eingabe von Kommandos (CLI) und ist unter Windows bspw. die PowerShell oder CMD
2. RubyGems (Gems) ist das Paketsystem für die Programmiersprache Ruby (Quelle)