Vor ein paar Tagen hat mich jemand gefragt, ob ich das Script nicht öffentlich machen könnte und ich habe das zum Anlass genommen, da mal einige Dinge zu verschönern, damit auch andere Menschen damit etwas anfangen können.

Zur Installation des Scripts bitte in die README.md des Projekts schauen.

Konfiguration

In der Konfigurationsdatei ~/.config/hgh/hgh.json gibt es einen Abschnitt für allgemeine Einstellungen und dann je einen Abschnitt pro Website, die mit hgh verwaltet werden soll.

Hier ist hinterlegt, welcher Editor verwendet werden soll, wo die Basisverzeichnisse der Websites liegen, wo die content-Verzeichnisse, welcher Benutzernamen für rsync verwendet werden soll, usw.

Ein Alias macht das Leben einfacher

Damit ich nicht dauernd hgh.py --site blog tippen muss, habe ich für jede meiner Websites in der .bashrc einen Alias erstellt:

alias hgb=`hgh.py --site blog`
alias hgw=`hgh.py --site wiki`

Somit kann ich z. B. mittels hgb -cdb ins Basisverzeichnis des Blogs wechseln.

Was der Hugo Helper (hgh) für mich macht

Allgemeine Infos

Mit --help gibt es eine hoffentlich hilfreiche Hilfe. 😁

Mit hgh.py --sites bekomme ich eine Liste aller Websites und der zugehörigen Basisverzeichnisse. Mit --printconfig wird die ganze Konfiguration ausgegeben.

Verzeichniswechsel

Mit -cdb kann ich ins Basisverzeichnis einer Website wechseln, mit -cdc ins normale Content-Verzeichnis und mit -cdl in ein alternatives Content-Verzeichnis.

Letzeres nutze ich für verschiedene Blogbeiträge im Entwurfsmodus. Denn mein Blog besteht aus mehreren tausend Blogbeiträgen und das Bauen dauert sehr lange. Zum Schreiben von längeren Blogbeiträgen nutze ich dieses Verzeichnis und das Bauen dauert dann nur wenige Sekunden.

Kommentar-Datei

Für Kommentare im Blog nutze mittlerweile eine eigene Implementation, bei der die Kommentare im Page Bundle innerhalb der Datei comments.json stehen.

Mit hgh.py --site blog --create-comments-file wird im aktuellen Verzeichnis eine comments.json-Datei erstellt, die bereits ein Skelett für einen Kommentar enthält. Dazu wird die Info ausgegeben, dass man noch im Front Matter jsoncomments: true eintragen muss. Da es hier im Blog nur sehr selten Kommentare gibt, vergesse ich das sonst und will auch nicht jedes Mal nachschauen, wie die Syntax eines Kommentars ist.

Neuer Blogbeitrag

Diese Funktion nutze ich nur für meinen Blog und kann mit einem kurzen hgb --create "Ein neuer Blogbeitrag bla blub" gleich mehrere Aufgaben automatisieren:

• benötigte Verzeichnisse erstellen
• Slug aus dem angegebenen Titel erzeugen
• Page Bundle erstellen
• Markdown-Datei für den Blogbeitrag erstellen und mit einem Template befüllen

Details dazu, was alles gemacht wird, gibt es in diesem Blogbeitrag.

In der aktuellen Version des Scripts kann ich auch noch mit --template angeben, welches Template verwendet werden soll.

Mit hgh.py --list-templates wird eine Liste aller vorhandenen Templates angezeigt.

Wer das benutzen will, muss den Code dafür im Script anpassen, um alle notwendigen Variablen auch zu befüllen.

Tmux

Bevor ich VSCode für die Bearbeitung meiner Websites nutzte, habe ich dafür den micro-Editor auf der Kommandozeile benutzt. Aus dieser Zeit stammt --tmux, das ein bestimmtes Layout in Tmux startet. Das habe ich aber schon länger nicht mehr verwendet und man müsste es für sich anpassen.

Lokale Vorschau einer Website

Mittels --hugo-server wird der Blog lokal gebaut und auf dem einstellbaren Port zugänglich gemacht. Für das alternative Content-Verzeichnis gibt es --hugo-server-light.

Dazu kann man noch --hugo-server-env angeben, mit dem sich einstellen lässt, welche Umgebung Hugo verwendet. Default hier ist development. Ich nutze diese Funktion, um den umfangreichen Blog testweise so zu bauen, dass nur die Blogbeiträge der letzten Monate enthalten sind, was dann statt 35 Sekunden (für den gesamten Blog) nur ca. 3 Sekunden dauert.

Tags, Kategorien und deren Häufigkeit

Was mir am Anfang bei Hugo im Vergleich zu WordPress sehr gefehlt hat, waren die Vorschläge für zu verwendende Tags und Kategorien in einem neuen Blogbeitrag.

Hierfür muss man mit dem Hugo Helper eine kleine “Datenbank” erstellen lassen. Dazu wird mit Hilfe von find und dem Tool yq je eine Liste aller bisher verwendeten Tags und Kategorien erstellt und dazu auch die Häufigkeit der Verwendung angegeben.

Diese “Datenbank” erstellt man mit hgh.py --site blog --create-tags-categories-caches und das dauert ein paar Sekunden. Im Ergebnis werden innerhalb von ~/.cache/hgh/ für jede Website zwei Dateien erzeugt:

> ls -1 .cache/hgh/
natenom.de_categories.list
natenom.de_tags.list

Ein Auszug aus den Tags:

[…]
8:F-Droid
1:FLAC
4:Facebook
1:Fahrbahn
556:Fahrrad
52:Fahrradanhänger
1:Fahrradbubble
22:Fahrradcomputer
6:Fahrradmordor
6:Fahrradparkplätze
2:Fahrradstaffel
1:Fahrräder
10:Falschparker
[…]

Um nicht manuell in den “Datenbanken” herumstöbern zu müssen, gibt es --find-tags xyz und --find-categories xyz bzw. die Kurzformen -ft xyz und -fc xyz. Man kann reguläre Ausdrücke verwenden.

Führt man diese aus, wird das Tool fzf (Fuzzy Find) benutzt, um die Liste anzuzeigen und darin suchen zu können:

Alles andere finden

Mittlerweile nutze ich zum Auffinden von Blogbeitragen die Tastenkombination Strg + Shift + f in VSCode. Aber früher brauchte ich dafür etwas Eigenes.

Hierfür gibt es zwei Varianten.

Einfache Variante

Mittels --find xyz bzw. der Kurzform -f xyz wird einfach nur rekursiv nach xyz im Content-Verzeichnis der angegebenen Website gegrept und es gibt eine farbige Ausgabe mit Dateinamen und der zum Suchbegriff passenden Zeile. Groß- und Kleinschreibung werden dabei nicht ignoriert.

Hier z. B. das Ergebnis für die Suche nach ^hugo. Das ist ein Regulärer Ausdruck, der nur auf Zeilen passt, in denen hugo am Anfang der Zeile steht:

posts/2022/2022-02-18-mein-workflow-mit-hugo/index.md:130:1:hugo server -E -D -F -v -c /home/hugo-light/content/
posts/2022/2022-02-27-hugo-theme-optimiert-zeit-zum-rendern-massiv-verringert.md:24:1:hugo --templateMetrics --templateMetricsHints --gc --minify > hugo-metric_0.txt
posts/2022/2022-02-06-ich-mache-wieder-einen-linkdump-woechentlich/index.md:64:1:hugo new -k linkdump posts/2022-02-linkdump-kw-6-2022
posts/2022/2022-03-19-umzug-dokuwiki-hugo-3-einrichtung/index.md:29:1:hugo new site wiki.natenom.com
posts/2022/2022-02-03-umzug-von-wordpress-zu-hugo-1/index.md:310:1:hugo server --renderToDisk -D -E -F -v
posts/2022/2022-02-13-weiterleitungen-auf-umlaut-urls/index.md:55:1:hugo-search-tags -E "(ä|ö|ü|ß)" | cut -d':' -f2 > /tmp/umlaut-urls-hugo.txt

So kann ich z. B. sehr einfach alle Blogbeiträge anzeigen lassen, die ein bestimmtes Tag oder eine Kategorie verwenden, hier z. B. “Linux”, in dem ich den Regulären Ausdruck hgb -f "^\W+- Linux" nutze, der auf Zeilen passt, die am Zeilenanfang beliebig viele Leerzeichen enthalten, gefolgt von - Linux:

[…]
posts/2013/2013-06-27-alle-videos-eines-youtube-kanals-auf-einmal-herunterladen-mit-youtube-dl.md:7:1:  - Linux
posts/2018/2018-11-12-mit-fensterregeln-in-plasma5-kde-bestimmte-fenster-beim-task-switcher-und-anderen-effekten-ignorieren.md:13:1:  - Linux
posts/2013/2013-08-15-neuer-versuch-mit-kde-sc.md:11:1:  - Linux
[…]

Erweiterte Variante

Mittels --find-fuzzy xyz bzw. der Kurzform -ff xyz wird die Ausgabe der oben gezeigten einfachen Variante zusätzlich an fzf übergeben, sodass man darin suchen kann, eine Vorschau der Datei angezeigt bekommt und durch Drücken von F4 die Datei direkt im Editor öffnen kann, den man in der Konfiguration in bin_editor eingestellt hat.

Auch hier kann man reguläre Ausdürcke verwenden, z. B. -ff "Markdown.*kate"

Website bauen und hochladen

Mit hgh.py --site blog --build wird mein Blog lokal gebaut, sodass ich ihn nach einer kurzen Prüfung mit hgh.py --site blog --upload hochladen kann.

Wenn ich mir sicher bin, kann ich auch beide Schritte vereinen mit hgh.py --site blog --deploy.

Hugo Helper herunterladen

Das Hugo Helper Script gibt es hier.

Viel Spaß damit. Oder eben nicht. ☺️

Jetzt ist es auch möglich, direkt im Anschluss den neuen Blogbeitrag (als index.md) innerhalb eines bestimmten Workspace in VSCode zu öffnen.

Wie das geht, ist aber meiner Ansicht nach nicht wirklich intuitiv und deshalb lege ich es hier ab, damit es gefunden werden kann.

So reicht es nicht aus, einfach VSCode beim Start den Dateinamen in der Shell anzugeben. Dann wird nur die Datei geöffnet aber ohne einen Bezug zum Workspace herzustellen und der “Explorer” ist auch nicht verfügbar:

Stattdessen muss man zusätzlich zum Pfad der Datei noch den Pfad zum Verzeichnis des Workspace in der Kommandozeile angeben:

vscode /pfad/blogworkspace/blogpost1/index.md /pfad/blogworkspace

Erst dann ist links der Explorer mit all den zugehörigen Dateien des Workspace sichtbar:

Das habe ich jetzt mit einem Script automatisiert und kann direkt mit dem Schreiben beginnen, statt die verschiedenen Dinge im Voraus manuell machen zu müssen.

Das Script rufe ich z. B. so auf:

hgb --create "Neues Helferlein für Hugo erleichtert das Bloggen"

Das Script

Das Script macht folgende Arbeiten für mich:

Verzeichnisse erstellen

Innerhalb des content Verzeichnisses von Hugo legt es, wenn noch nicht vorhanden, alle Überverzeichnisse für Jahr und Monat an.

Da dies der erste Beitrag in diesem Jahr ist, hat das Script die Verzeichnisstruktur in …/content/posts/ erstellt:

2024/
    01/

Slug erzeugen

Der Slug ist ein Teil der späteren URL. Bei mir im Blog besteht die endgültige URL eines Blogbeitrags z. B. aus https://natenom.de/JAHR/MONAT/SLUG/.

Das Script erzeugt den Slug automatisch aus dem angegebenen Titel für den neuen Blogbeitrag. Dabei werden folgende Aufgaben erledigt:

• Der Slug wird auf xx Zeichen verkürzt.
• Großschreibung wird in Kleinschreibung umgewandelt.
• Leerzeichen werden durch Bindestriche ersetzt.
• Umlaute werden durch Entsprechungen wie z. B. ae oder ss ersetzt.
• Alle verbleibenden Zeichen, die nicht alphanumerisch und keine Bindestriche sind, werden entfernt.

Page Bundle

Innerhalb der bereits erstellten Verzeichnisstruktur für Jahr und Monat (siehe oben) wird nun ein Page Bundle erstellt. Der Verzeichnisname besteht aus dem aktuellen Datum und dem Slug. Hier z. B.:

2024-01-05-neues-helferlein-fuer-hugo-erleichtert-das-bloggen/

Datei index.md

In dem erstellten Page Bundle wird nun die Datei index.md aus einem eigenen Template generiert, in welchem die Metadaten title, slug und date im Front Matter eingefügt werden. Die anderen Metadaten wie Kategorien und Tags fülle ich manuell aus.

---
title: "Neues Helferlein für Hugo erleichtert das Bloggen"
slug: neues-helferlein-fuer-hugo-erleichtert-das-bloggen
author: Natenom
date: 2024-01-05T20:25:55+01:00
categories:
  -
tags:
  -
---
<!--more-->

Nächster Schritt

Das Script zeigt nun ein paar Infos an und auch, wie ich die Datei direkt in VSCode öffnen kann, weil ich das fürs Schreiben in Markdown verwende:

Page Bundle erfolgreich erstellt:
        Template: default
        Slug: neues-helferlein-fuer-hugo-erleichtert-das-bloggen
        Verzeichnis: /…/content/posts/2024/01/2024-01-05-neues-helferlein-fuer-hugo-erleichtert-das-bloggen
Hinweise:
        Pfad zur Datei in Zwischenablage eingefügt. In VSCodium öffnen mit 'Strg + o' und einfügen, Leerzeichen am Ende entfernen. (Das Leerzeichen am Ende kommt von VSCode.)

Blogbeitrag schreiben

Nun kann ich im bereits geöffneten VSCode die Tastenkombinatin Strg + o drücken, gefolgt von Strg + v, muss noch das Leerzeichen entfernen, das VSCode ans Ende angefügt hat, drücke Enter und kann anfangen, den Blogbeitrag zu schreiben.

Passt

So soll das sein. Wenn ich in Zukunft eine Idee habe, kann ich sofort anfangen, zu schreiben und bin nicht erst noch abgelenkt von den vielen verschiedenen Aufgaben, um die Datei für den Blogbeitrag erst noch erstellen zu müssen.

Das hat jetzt auch sehr gut funktioniert.

Ich habe noch keine Lösung dafür gefunden, sodass es nur hilft, die Hervorhebung des Bereichs auszuschalten. Dies findet man in den Einstellungen des Plugins “Front Matter”:

Denn als ich damals meine Snippets für Hugo in VSCode erstellt hatte, gab es noch keine Variable, die den Offset der aktuellen Zeitzone enthielt.

Das hat man in diesem Release nachgeholt, die Variable heißt $CURRENT_TIMEZONE_OFFSET und enthält bei mir den String +02:00.

Ich nutze Markdown schon eine ganze Weile und es gab nie Fehler beim Rendern von Websites. Aber es ist natürlich schöner, wenn man Markdown so schreibt, wie es vorgegeben ist und so hoffentlich Probleme mit anderen Programmen vermeiden kann.

Beispiele

Ein paar Beispiele für Fehler, die ich bisher falsch auch in älteren Beiträgen hatte und die durch das Plugin mit einer gelben Wellenlinie markiert werden:

• Keine Leerzeile zwischen Überschrift und nächstem Absatz.
• Unformatierte inline URLs ohne < … > an Anfang und Ende.
• Unnötige Leerzeilen.
• Anzahl Leerzeichen für Einrückungen.
• Fehlende Bildbeschreibung für eingebettete Bilder. Natürlich geht das nur, wenn man die Markdown-Syntax dafür nutzt, für Shortcodes von Hugo funktioniert das nicht.
• Fußnote am Ende des Dokuments hat keine Entsprechung im Fließtext.

Infos und Projektseite

Eine Liste der Regeln, die markdownlint kennt, gibt es hier.

Und hier die Projektseite.

Vielleicht ist für jemanden etwas Nützliches dabei.

"nat_sphere": {
    "scope": "markdown",
    "prefix": "md-nat-sphere",
    "body": [
        "{{< sphere src=\"$1\" caption=\"$2\" osmurl=\"$3\" osmembedurl=\"$4\" imgsize=\"$5\" >}}"
    ],
    "description": "360° Photosphere"
},

"nat_gallery": {
    "scope": "markdown",
    "prefix": "md-nat_gallery",
    "body": [
        "{{< nat_gallery match=\"images/*\" >}}"
    ],
    "description": "Natenoms own gallery"
},

"notice": {
    "scope": "markdown",
    "prefix": "md-notice",
    "body": [
    "{{< notice ${1|hinweis,tipp,info,warnung,update|} >}}",
    "${TM_SELECTED_TEXT}$0",
    "{{< /notice >}}"
    ],
    "description": "Notice, tip, info, …"
},

"codewarning": {
    "scope": "markdown",
    "prefix": "md-codewarning",
    "body": "{{< codewarning >}}",
    "description": "Codewarning wegen Copy & Paste in die Shell hinein."
},

"video": {
    "scope": "markdown",
    "prefix": "md-video",
    "body": [
        "{{< video src=\"$1\" caption=\"$2\" type=\"video/mp4\" linktext=\"\" >}}"
    ],
    "description": "Video"
},

"figure": {
    "scope": "markdown",
    "prefix": "md-figure",
    "body": [
        "{{< figure src=\"$1\" link=\"$2\" alt=\"$3\" title=\"$4\" caption=\"$5\" width=\"\" float=\"\" >}}"
    ],
    "description": "Bilder einfügen"
},

"disclaimer": {
    "scope": "markdown",
    "prefix": "md-disclaimer",
    "body": [
        "{{< disclaimer >}}"
    ],
    "description": "Disclaimer für Beiträge über Produkte"
},

"details": {
    "scope": "markdown",
    "prefix": "md-details",
    "body": [
        "{{< details title=\"$1\" >}}",
        "${TM_SELECTED_TEXT}$0",
        "{{< /details >}}"
    ],
    "description": "Ausklappbarer Details"
},

"clear": {
    "scope": "markdown",
    "prefix": "md-clear",
    "body": [
        "{{< clear >}}"
    ],
    "description": "Float clear"
},

"datetime": {
    "prefix": "md-datetime",
    "body": [
        "$CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}T${CURRENT_HOUR}:$CURRENT_MINUTE:$CURRENT_SECOND+02:00"
    ],
    "description": "Date/Time for blog post."
},

"blockquote": {
    "scope": "markdown",
    "prefix": "md-blockquote",
    "body": [
        "{{< blockquote cite=\"$1\" link=\"$2\" linktext=\"\" >}}",
        "${TM_SELECTED_TEXT}$0",
        "{{< /blockquote >}}"
    ],
    "description": "Zitat"
},

"frontmatter-blog": {
    "scope": "markdown",
    "prefix": "md-frontmatter-blog",
    "body": [
        "---",
        "title: \"$1\"",
        "# linkTitle: ",
        "slug: ${2/[\\ ]/-/g}",
        "date: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}T${CURRENT_HOUR}:$CURRENT_MINUTE:$CURRENT_SECOND+02:00",
        "# featured: false",
        "draft: false",
        "# comment: true",
        "# toc: true",
        "# reward: false",
        "# pinned: false",
        "# carousel: false",
        "# reward: false",
        "author: Natenom",
        "#description: ",
        "categories:"
        "  - $3",
        "tags:",
        "  - $4",
        "# series: ",
        "#comments:",
        "#  host: social.anoxinon.de",
        "#  username: natenom",
        "#  id: ",
        "---"
    ],
    "description": "Front Matter Blog"
},

"blog-template-fahrradstatistik": {
    "scope": "markdown",
    "prefix": "md-blog-template-fahrradstatistik",
    "body": [
        "---",
        "title: \"Meine Fahrradstatistik für ${1:monat} ${CURRENT_YEAR}\"",
        "slug: fahrradstatistik-${1/(.*)/${1:/downcase}/}-${CURRENT_YEAR}",
        "author: Natenom",
        "date: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}T${CURRENT_HOUR}:$CURRENT_MINUTE:$CURRENT_SECOND+02:00",
        "categories:",
        "- Mobilität",
        "tags:",
        "- ${1}",
        "- Fahrrad",
        "- Mobilität",
        "- Statistiken",
        "- Strecke",
        "",
        "---",
        "",
        "<!--more-->",
        "- Gefahrene Kilometer: ${0} km ([${1}]() 2022:  km)",
        "- Reine Fahrzeit: h (${1} 2022:  h  min)",
        "- Höhenmeter (nur hoch):  hm (${1} 2022:  hm)",
        "- Gesamtkilometer 2023:  km (gleicher Zeitraum 2022:  km)",
        "- Regentage: ",
        "- Schneetage: ",
        "- Kalorienverbrauch:  kcal",
        "- Durchschnittliche Geschwindigkeit:  km/h",
        "- Durchschnittlicher Puls: ",
        "- Höchster Puls: ",
        "- Aktuelles Gewicht:  kg"
    ],
    "description": "Blog Template Fahrradkilometer"
},

"blog-template-microblog": {
    "scope": "markdown",
    "prefix": "md-blog-template-microblog",
    "body": [
        "---",
        "title: \"Microblog: ${1:Titel}\"",
        "slug: ${2/[\\ ]/-/g}",
        "author: Natenom",
        "date: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}T${CURRENT_HOUR}:$CURRENT_MINUTE:$CURRENT_SECOND+02:00",
        "categories:",
        "- ${3:Allgemein}",
        "tags:",
        "- Microblog",
        "",
        "---",
        "",
        "$0"
    ],
    "description": "Blog Template Microblog"
},

"more": {
    "scope": "markdown",
    "prefix": "md-more",
    "body": [
        "<!--more-->",
        "$0"
        ],
    "description": "More anchor"
},

"codefence": {
    "scope": "markdown",
    "prefix": "md-codefence",
    "body": [
        "```${1|apacheconf,awk,bash,c,c#,coffeescript,css,diff,go,html,ini,json,julia,markdown,plaintext,python,ruby,toml,xml,javascript|}",
        "${TM_SELECTED_TEXT}$0",
        "```"
    ],
    "description": "More anchor"
},

"table": {
    "scope": "markdown",
    "prefix": "md-table",
    "body": [
        "| ${1} | ${2} |",
        "| ------|------ |",
        "| ${3} | ${4} |",
        "|  |  |",
    ],
    "description": "Table"
}

Lag wohl am “Scope”, der auf “Markdown” eingestellt war und der Markdown-Bereich in einem Blogbeitrag für Hugo erst nach den drei --- anfängt. Habe das auf “FrontMatter” eingestellt und gehofft, aber das ging auch nicht.

Wenn man die “Eigenschaft” “Scope” ganz entfernt, geht es.

Hier das Snippet:

"datetime": {
    "prefix": "md-datetime",
    "body": [
      "$CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}T${CURRENT_HOUR}:$CURRENT_MINUTE:$CURRENT_SECOND+02:00"
    ],
    "description": "Date/Time for blog post."
},

Hier alle meine Snippets fürs Schreiben von Blogbeiträgen in Hugo, vielleicht ist ja was Brauchbares für jemanden dabei. 😊

Doch nach mehreren Monaten und vielen geschriebenen Blogbeiträgen fehlen mir ein paar Funktionen in Kate, die Zeit und Nerven fressen oder umständliche “Lösungen” brauchen.

Was mir in Kate besonders fehlt:

• Live-Vorschau (wenn auch nicht alle Shortcodes gerendert werden können).
• Ordentlich funktionierende Snippets mit Zusatzfunktionen (die in Kate sind nur rudimentär und zudem buggy).
• Inhaltsverzeichnis mit der Möglichkeit, zu einem Eintrag zu springen.
• Distraction free writing (oder zumindest einigermaßen ordentliche Vorschau). Hierfür habe ich in VSCodium noch keine Lösung gefunden.

Ich probierte einige der bereits getesteten Editoren noch einmal aus und am besten gefiel mir MarkText, doch das kann leider keine Snippets.

Deshalb habe ich mich für VSCodium entschieden, einer etwas freieren Variante von Visual Studio Code. Die basiert zwar auf Electron, aber ich jetzt bereit, diesen Kompromiss einzugehen, um dafür viele schöne Funktionen zu bekommen.

In VSCodium gibt es – im Unterschied zu Kate – einige Funktionen, die ich folgend beschreibe.

Erweiterungen

Für VSCodium gibt es extrem viele Erweiterungen (die ich bisher nicht benötige, aber vielleicht finde ich doch noch hilfreiche Dinge).

Für Kate gibt es Plugins, aber nicht annähernd so viele.

Live-Vorschau

An der Live-Vorschau gefällt mir besonders, dass

• sie automatisch mit scrollt.
• es links immer einen Indikator gibt, der anzeige, in welcher Zeile der Cursor gerade ist.
• man optional trotzdem unabhängig vom Code in der Vorschau scrollen kann, diese aber wieder synchron läuft, sobald man im Quelltext scrollt.
• der Cursor bei einem Doppelklick auf einen Bereich in der Vorschau automatisch auf diese Zeile im Quelltext gesetzt wird.

Die Vorschaufunktion gibt zwar nicht genau wieder, wie es später im Blog oder im Wiki aussehen wird, aber es ist ausreichend, sodass ich während des Schreibens den Hugo-Server gar nicht erst anwerfen muss, außer zum Schluss mal wegen Shortcodes, die nicht dargestellt werden, wie figure.

Die Vorschau öffent man mit der Tastenkombination Ctrl + k gefolgt von v.

Inhaltsverzeichnis

Es gibt drei Möglichkeiten, ein Inhaltsverzeichnis des aktuellen Dokuments zu sehen:

• Mit der Tastenkombination Strg + Shift + o öffnet man das Inhaltsverzeichnis und kann zu einer bestimmten Überschrift springen.
• Die aktuelle Überschrift wird auch immer oben in den Breadcrumbs angezeigt. Dort kann man drauf klicken und kann auch wieder zu den Bereichen springen.
• In der Leiste links öffnet man den Explorer oder drück die Tastenkombination Ctrl + Shift + e und öffnet unten den Bereich OUTLINE.

  

Snippets

In VSCodium kann man tolle Dinge mit Snippets machen, die ich teilweise auch schon vom Editor Micro kenne.

Die Dokumentation für Snippets in VSCodium gibt es hier.

Hier einige der Möglichkeiten.

Eigene Snippets trägt man in eine selbst gewählte Datei ein, die man über Ctrl + Shift + p gefolgt von Snippets: Configure User Snippets definieren und öffnen kann.

Tabstops

In Snippet kann man Positionen definieren, zu denen man nach dem Einfügen mit der Tab-Taste springen kann, sodass man notwendige Eingaben schneller erledigen kann, also mit den Cursor-Tasten zu navigieren. Das nutze ich z. B. in meinem Front Matter-Snippet.

Vorauswahl

Hier bekommt man ein kleines Popup-Fenster und kann einen der Einträge auswählen:

Das Snippet dazu sieht so aus:

"notice": {
		"scope": "markdown",
		 "prefix": "md-notice",
		 "body": [
			"{{< notice ${1|hinweis,tipp,info,warnung,update|} >}}",
			"$0",
			"{{< /notice >}}"
		 ],
		 "description": "Notice, tip, info, …"
	}

Snippets auf markierte Bereiche anwenden

Um einen aktuell im Editor markieren Bereich innerhalb eines Snippets nutzen zu können, gibt es die Variable ${TM_SELECTED_TEXT} und weitere (siehe hier). Diese Möglichkeit bietet sich an, wenn man z. B. nachträglich einen Bereich als Codeblock oder Zitat formatieren will.

Hat man so ein Snippet geschrieben, markiert man zuerst den benötigen Bereich, drückt Alt + Leertaste, und wählt anschließend das Snippet mit den Cursor-Tasten aus.

Seltsam wird es, wenn man den Eintrag nicht per Cursor-Taste auswählt, sondern, wie sonst auch, den Namen des Snippets tippt. Dann überschreibt man nämlich den markieren Bereich. Doch das macht nichts. Sobald man den passenden Eintrag ausgewählt hat und sofern das Snippet die genannte Variable nutzt, wird beim Bestätigen mit Enter das komplette Snippet inklusive dem überschrieben geglaubten Bereich eingefügt.

Datum fürs Front Matter direkt statt über Shell

Beim Einfügen meines eigenen Snippets frontmatter ist jetzt direkt das aktuelle Datum enthalten. Bisher musste ich das immer erst über ein Shellkommando machen und dann ins Front Matter einfügen. Theoretisch ginge das auch mit Kate und JavaScript, aber das habe ich bisher nicht geschafft.

So sieht dann das Front Matter nach dem Einfügen aus:

---
title:
slug:
date: 2022-09-11T12:40:57+02:00
draft: false
author: Natenom
#description:
categories:
  -
tags:
  -
---

Und das ist das zugehörige Snippet:

"md-frontmatter": {
  "scope": "markdown",
    "prefix": "md",
    "body": [
    "---",
    "title: $1",
    "slug: $2",
    "date: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}T${CURRENT_HOUR}:$CURRENT_MINUTE:$CURRENT_SECOND+02:00",
    "draft: false",
    "author: Natenom",
    "#description: ",
    "categories:"
    "  - $3",
    "tags:",
    "  - $4",
    "---"
    ],
    "description": "Front Matter Blog"
}

Tastenkombinationen

Eine Liste der Tastenkombinationen für VSCodium.

Merk dir was

Besonders gut gefällt mir, dass man ein “Verzeichnis” mit Ctrl + k gefolgt von Ctrl + o öffnen kann und der Editor sich dafür dann die geöffneten Dateien und Ansichten merkt.

So kann ich zwischen Blog und Wiki sehr einfach wechseln und die bearbeiteten Dateien sind weiterhin geföffnet. Das erleichtert die Arbeit.

Alternativ nutzt man die Tastenkombination Ctrl + r und kann dann bisher geöffnete Dateien und oben genannte Verzeichnisse wieder öffnen. Hält man Ctrl dabei gedrückt, werden diese in einem neuen Fenster geöffnet.

Hier z. B. die Ansicht für die Arbeit im Wiki, wo gerade die Selfies vom kleinen Elefanten geöffnet sind:

Meine Anpassungen und installierte Erweiterungen

Ich habe ein paar kleine Anpassungen für VSCode, die ich hier aufliste, falls ich das irgendwann mal wieder brauche.

Weniger ist mehr

Ich habe die “Status bar” (View -> Appearence -> Status bar) unten und die “Menu bar” (View -> Appearence -> Menu bar) oben ausgeblendet.

Falls man die “Status Bar” wieder benötigt, kann man sie mit Ctrl + Shift + p und der Eingabe von View: Toggle Status Bar Visibility oder Teilen davon wieder aktivieren.

Für die “Menu bar” gibt man View: Toggle Menu bar ein. Oder man drückt die Alt-Taste, dann erscheint die Menübar, wird direkt fokusiert, und verschwindet dann wieder, sobald man einen Eintrag gewählt hat oder erneut die Alt-Taste drückt.

Hervorhebung der aktuellen Zeile

Die Hervorhebung der aktuellen Zeile gefällt mir bei VSCodium gar nicht, deshalb habe ich das so angepasst, wie ich es von Kate gewohnt bin.

Dazu öffnet man die Datei settings.json via Strg + Shift + p und der Eingabe von Preferences: Open User Settings (JSON) und trägt ein:

"workbench.colorCustomizations": {
    "[Default Dark+]": {
        "editor.lineHighlightBackground": "#4587de2a",
        "editor.lineHighlightBorder": "#4587de2a"
    },
    "[Default Light+]": {
        "editor.lineHighlightBackground": "#4587de2a",
        "editor.lineHighlightBorder": "#4587de2a"
    }
}

Zeilenhervorhebung ohne Anpassung im Dark Theme mit kaum sichtbarer Umrandung:

Und mit Anpassung:

Damit zusätzlich auch noch die Zeilennummer hervorgehoben wird, fügt man hinzu:

"editor.renderLineHighlight": "all",

Installierte Erweiterungen

• streetsidesoftware.code-spell-checker-german für Rechtschreibüberprüfung

Fazit

Ich habe diesen Blogbeitrag schon mit VSCodium geschrieben und währenddessen hier dokumentiert und ausprobiert.

Mein Fazit bisher ist, dass ich mich mit diesem Editor besser auf Inhalte fokussieren kann, da ich nicht ständig andere Tools benutzen muss. Wie z. B. eine Konsole für das aktuelle Datum und die Uhrzeit fürs Front-Matter, weil man auch Bilder (zumindest in der Markdown-Standard-Syntax) über den Dateiexplorer von VSCodium direkt einfügen kann.

Desweiteren brauche ich kein laufendes Hugo und keinen Browser, in dem die Vorschau angezeigt wird. Diese zeigt zwar genau das Ergebnis, wie es auch später online aussehen wird, aber das ist für meine Sachen meist nur zur Endkontrolle vor dem Veröffentlichen notwendig.

Ich kann mir vorstellen, dass man das Bauen mit Hugo auch noch in VSCodium einrichten könnte, aber ich mache das lieber extern. Ich brauche einen guten Editor zum Bearbeiten, aber keine eierlegende Wollmilchsau für alles zusammen.