Featured image

Wie ich mit LLMs Fußnoten in Marginalien umgesetzt habe

Als ich Maggie Appletons Essay über A Treatise on AI Chatbots Undermining the Enlightenment las, gefiel mit nicht nur der Text selber, sondern auch die Fußnoten in den Marginalien. Also rechts neben dem Haupttext anstelle von dem Ende des Artikels.

Ich habe es mit diesen LLMs versucht, umzusetzen im Rahmen eines Vibe-Codings [1] Bei Vibe-Coding programmiert das LLM, das per Fragen und Prompts des Benutzers seine Ziele erhält. : Qwen3-30B-A3B-Instruct lokal mit llama.cpp gehostet, und mit Claude Sonnet 4 über Copilot. Beide habe ich in Visual Studio Code eingesetzt.

Wichtiger Hinweis VORM Vibe-Coding

Am besten, bevor ihr mit eurem Vibe-Coding beginnt, setzt ihr euch vorher einen neuen git-commit in eurem Code-Ordner. So könnt ihr die LLMs an eurem Code rumspielen lassen und wenn das LLM es nicht hinbekommt, geht ihr einfach wieder zu eurem Commit zurück und alle Änderungen sind weg.

Bevor ihr Vibe-Coding startet, erstmal commiten:

git add .
git commit -m "Vorbereitung Vibe-Coding für Problem Soundso"

Wenn euer Vibe-Coding nicht nach vorne losging, sondern (wie alles im Leben) nach hinten, geht ihr einfach wieder zurück:

git reset --hard HEAD^
[2]

Wenn ihr das aufgeben wollt, was eure LLM da verzapft hat, aber nicht wegschmeissen, dann so:

git stash

Übrigens hilft euch das vorher committen auch, wenn ihr nach mehreren Stunden Vibe-Coding wissen wollt, was die LLM da alles gemacht hat. Denn die Dinger verlieren manchmal durch ihre Kontextbeschränkung das Wissen darüber, was sie am Anfang langer Sessions gemacht haben.

Den Status Deines Code-Verzeichnisses und aller darin befindlichen Dateien anzeigen lassen geht mit git status oder:

git status --porcelain
[3] noch ausführlicher ist git status --porcelain2

In der git-Dokumentation findest Du die Erklärung für Short Format von –porcelain.

Und dann kannst Du Dir anzeigen lassen, wie die einzelnen Dateien geändert wurden:

git diff HEAD -- folder/datei1 folder/nocheinfolder/datei2

Das selbe geht natürlich auch in VS Code, wenn Du da die git-Extension installiert hast.

Meine Erfahrungen beim Vibe-Coding

Qwen3 Coder 30B A3B Instruct.gguf:
Diese LLM ist lokal gehostet auf einem MacStudio bei uns auf Arbeit. Einzubinden fürs Vibe-Coding in Visual Studio Code geht das nur über die VS-Code Extension Continue, die aber dann alle Funktionalität erlaubt (Dateien anlegen, löschen, verändern, Terminal etc.). Qwen3 soll richtig gut sein, aber ich habe die folgenden Probleme gehabt:

Claude Sonnet 4:
In Visual Code gibt es ansonsten einen Copilot-Chat, wo man verschiedene kommerzielle LLMs einbinden kann. Dort habe ich Claude Sonnet 4 für diese Aufgabe verwendet und ea hat geklappt, wie man sieht. Wir sind aber auch mindestens vier Umwege abgelaufen, bis wir an einem Ziel angelangt sind (Fußnoten am rechten Rand innerhalb des Haupttextes), das vom ursprünglichen Ziel abweicht (Fußnoten neben dem Haupttext auf der rechten Seite im White Space).

Ich mag bislang den Copilot-Chat mehr, weil der (mit verschiedenen LLMs) bislang öfter meine Probleme gelöst hat als nicht, und ich eben alle meine Dateien im Folder sehen kann (so sonst die Extension Continue läuft).

Vibe-Coding hat aber die folgenden Probleme:

Per the original definition , it’s code written in contexts where you “forget that the code even exists.” Or as the fairly fleshed-out Wikipedia article puts it: ”A key part of the definition of vibe coding is that the user accepts code without full understanding.”

Like many developers, I’m constantly grappling with how much understanding I’m willing to hand over to Cursor or Claude Code.

Fußnoten am Rand

Und wie funktioniert das nun mit den Fußnoten? Für kurze Anmerkungen [4] Wie diese hier. eignet sich der fn Shortcode am besten:

{{< fn id="2" text="Wie diese hier." >}}

Für ausführlichere Erklärungen [5] Diese Fußnote enthält fett markierten Text und sogar einen Link zu Wikipedia. Sie kann mehrere Zeilen umfassen und unterstützt die vollständige Markdown-Syntax. verwende ich den footnote Shortcode.

{{< footnote id="4" >}}
Diese Fußnote enthält **fett markierten Text** und sogar einen [Link zu Wikipedia](https://de.wikipedia.org). 
Sie kann mehrere Zeilen umfassen und unterstützt die vollständige Markdown-Syntax.
{{< /footnote >}}

Beide habe ich mir als Tastaturkürzel in meiner App Text Expander zugewiesen, damit das alles schnell klappt.

Technische Umsetzung

1. Hugo Shortcodes erstellt:

2. CSS Float-Layout implementiert:

3. Minimales JavaScript:

Die Vorteile dieser Art von Umsetzung (und wir sind ja hier nur angekommen, weil ich andere Wege irgendwann ausschloß, als mir die Konsequenzen klar wurden oder sie nicht richtig funktionieren wollten):

Wie immer, wenn ich Vibe code, lasse ich mir am Ende alles zusammenfassen und trage das in Readme.md im entsprechenden Folder ein. Weil man beim Vibe-Coding weniger nachdenkt, merkt man sich auch viel weniger, was man gemacht hat. Und kann sich dann oft auch nicht daran erinnern, wie man was machen wollte.