Um eine lange Markdown-Codezeile vollständig anzuzeigen, lasse den Code unverändert und passe seine Darstellung an. Diese Anleitung hilft Mac-Nutzern dabei, abgeschnittene Beispiele zu diagnostizieren, den Zeilenumbruch in der Obsidian-Leseansicht zu aktivieren und zu verstehen, was sich auf GitHub übertragen lässt.

Was bestimmt, ob eine Codezeile umgebrochen wird?

Ein umschlossener Codeblock bewahrt den Code als wörtlichen Inhalt. CommonMark definiert die öffnenden und schließenden Begrenzungen und wie der Inhalt geparst wird; eine portable Einstellung für den Umbruch langer Zeilen gibt es nicht. Die aktuelle Spezifikation entspricht Version 0.31.2. CommonMark-Spezifikation, umschlossene Codeblöcke.

GitHub Flavored Markdown folgt denselben grundlegenden Regeln für umschlossene Codeblöcke. Auch seine Spezifikation schreibt keine Umbruchanweisung in der Infozeichenfolge der Begrenzung vor. wrap nach einem Sprachnamen einzufügen, sorgt daher nicht für portables Umbruchverhalten. Die veröffentlichte GFM-Spezifikation weist Version 0.29-gfm aus; diese Versionsnummer ist nicht mit der aktuellen CommonMark-Version zu verwechseln. GitHub-Flavored-Markdown-Spezifikation.

Unterscheide für diese Aufgabe drei Ergebnisse:

Ergebnis Was Leser sehen Muss dafür der Quelltext des Beispiels geändert werden?
Visueller Zeilenumbruch Eine Quellzeile erstreckt sich über mehrere angezeigte Zeilen Nein
Horizontales Scrollen Die Zeile reicht über den sichtbaren Bereich hinaus, bleibt aber erreichbar Nein
Manuelle Zeilenumbrüche Das Beispiel enthält zusätzliche Quellzeilen Ja

Praktisch bietet sich der Zeilenumbruch an, wenn die vollständige Zeile innerhalb des Bereichs sichtbar sein soll, oder horizontales Scrollen, wenn die visuelle Ausrichtung erhalten bleiben soll. Bei manuellen Umbrüchen muss gesondert geprüft werden, ob das Beispiel weiterhin dasselbe bedeutet.

Die Unterscheidung zwischen Quelle und Darstellung ist in CSS ausdrücklich vorgesehen: Die Verarbeitung von Leerraum beeinflusst die Darstellung, ohne die zugrunde liegenden Dokumentdaten zu ändern. Deshalb ist der visuelle Zeilenumbruch ein guter Ausgangspunkt, wenn sich das Beispiel weiterhin als eine Zeile kopieren lassen soll. CSS Text Module Level 3.

Prüfe zuerst, ob das Beispiel fehlt oder nur außerhalb des sichtbaren Bereichs liegt

Prüfe den Quelltext, bevor du einen langen Befehl oder Ausdruck bearbeitest. Wähle in Obsidian über die Steuerung für den Bearbeitungsmodus Source mode. Um auf einem Mac die gerenderte Ausgabe zu vergleichen, drücke Cmd+E, um zwischen Bearbeitung und Reading view umzuschalten. Obsidian unterscheidet diese Ansichten von Live Preview, einem Bearbeitungsmodus. Ansichten und Bearbeitungsmodus.

Verwende diesen synthetischen Test in einer separaten Notiz. Kopiere das innere Markdown einschließlich der öffnenden und schließenden Zeilen mit drei Backticks. Der Inhalt ist bewusst einfacher Text und kein Befehl zum Ausführen.

```text
BEGIN sample=amber notebook=desktop layout=wide description=This synthetic example contains a deliberately long line so you can check whether the final marker remains visible when the note pane becomes narrow END
```

Verkleinere den Notizbereich und suche nach END. Wenn es in einer Folgezeile erscheint, funktioniert der Zeilenumbruch. Wenn horizontales Scrollen innerhalb des Blocks es sichtbar macht, ist der Inhalt durch Scrollen erreichbar. Wenn es weiterhin unerreichbar ist, vergleiche den gerenderten Block mit dem Quelltext, bevor du annimmst, dass Text gelöscht wurde.

Mit diesem Test lassen sich zwei Probleme unterscheiden, die unterschiedliche Lösungen erfordern: Fehlender Quellinhalt muss wiederhergestellt werden, während vorhandener, aber unerreichbarer Inhalt eine Anpassung der Darstellung erfordert. Lass den Test unverändert, während du Einstellungen ausprobierst, damit du jede Verbesserung der geänderten Einstellung zuordnen kannst.

Prüfe auch die Begrenzungen. Eine schließende Begrenzung muss dasselbe Zeichen wie die öffnende verwenden und mindestens genauso viele Begrenzungszeichen enthalten. Eine passende Begrenzung innerhalb eines Beispiels kann den Block vorzeitig schließen. CommonMark-Spezifikation, umschlossene Codeblöcke. Wenn Markdown-Syntax erklärt wird, kann eine äußere Begrenzung aus vier Backticks einen inneren Block mit drei Backticks anzeigen, wie oben. Codeblöcke erstellen und hervorheben.

Gib der Obsidian-Notiz mehr Platz, bevor du CSS hinzufügst

Öffne Settings → Editor und suche nach Readable line length. Obsidian beschreibt diese Einstellung als Begrenzung der maximalen Zeilenlänge. Schalte sie vorübergehend aus und vergleiche dieselbe Testnotiz bei gleicher Fenstergröße. Dies passt die Breite an; in der Dokumentation wird die Einstellung nicht als Schalter für den Zeilenumbruch in Codeblöcken beschrieben. Einstellungen.

Wenn nun das ganze Beispiel hineinpasst, reicht die Breitenanpassung möglicherweise für dein Desktop-Layout aus. Teste vor der Entscheidung einen schmaleren Bereich: Mehr Platz in einer Fensteranordnung sagt nicht aus, ob die Zeile in einer anderen lesbar bleibt.

Ändere Strict line breaks nicht als Abhilfe für überlaufenden Code. Obsidian dokumentiert diese Einstellung im Zusammenhang mit Markdown-Zeilenumbrüchen, während umschlossener Code als wörtlicher Inhalt behandelt wird. Sie betrifft ein anderes Formatierungsproblem. Einstellungen, CommonMark-Spezifikation, umschlossene Codeblöcke.

Lange Codezeilen in der Obsidian-Leseansicht umbrechen

Verwende für ausgewählte Notizen den dokumentierten CSS-Snippet-Mechanismus von Obsidian und die Eigenschaft cssclasses. Das folgende Beispiel ist eine eigene Anpassung, die auf diesem Mechanismus und dem üblichen CSS-Verhalten beruht. Es ist für gewöhnliche gerenderte umschlossene Blöcke in Reading view gedacht; es ist weder eine von Obsidian bereitgestellte Umbruchvoreinstellung noch eine Konfiguration für einen Bearbeitungsmodus. CSS-Snippets.

Snippet erstellen und aktivieren

  1. Öffne Settings → Appearance → CSS snippets.
  2. Wähle Open snippets folder.
  3. Erstelle in einem reinen Texteditor in diesem Ordner die Datei wrap-code.css und speichere das folgende CSS darin.
  4. Kehre zu CSS snippets zurück, wähle Reload snippets und aktiviere wrap-code.

Dies sind die von Obsidian dokumentierten Installationsschritte für die Desktopversion. Nach der Aktivierung werden gespeicherte Änderungen an Snippets normalerweise automatisch übernommen. CSS-Snippets.

.wrap-code pre,
.wrap-code pre code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
}

Füge diesen Eigenschaftsblock an den Anfang der Testnotiz ein. Wenn sie bereits Eigenschaften enthält, füge wrap-code zu den bestehenden Werten von cssclasses hinzu, statt einen zweiten Eigenschaftsblock einzufügen.

---
cssclasses:
  - wrap-code
---

Obsidian beschreibt cssclasses als Möglichkeit, ausgewählten Notizen benutzerdefiniertes CSS zuzuweisen. Hier beschränkt .wrap-code die Regel auf diese Notizen; die übrigen Selektoren zielen auf gerenderte, vorformatierte Blöcke und deren Codeinhalt. Diese Regel konfiguriert nicht die Bearbeitungsoberfläche. CSS-Snippets.

Verstehen, was das CSS ändert

Die Deklaration white-space: pre-wrap bewahrt Leerraum und Zeilenumbrüche aus der Quelle, erlaubt aber visuelle Umbrüche. Die Deklaration overflow-wrap: anywhere erlaubt außerdem, dass eine ansonsten nicht umbrechbare Zeichenfolge bei Bedarf umgebrochen wird, ohne einen Trennstrich einzufügen. Zusammen decken sie sowohl lange Zeilen mit Leerzeichen als auch lange zusammenhängende Zeichenfolgen ab. CSS Text Module Level 3, CSS-Eigenschaft overflow-wrap.

Ersetze white-space: normal nicht durch diesen Wert: Er fasst Leerraum zusammen, wodurch sich die visuelle Einrückung ändern kann, die du erhalten möchtest. Außerdem kann overflow-wrap allein eine Leerraumregel, die Umbrüche verbietet, nicht außer Kraft setzen. CSS-Eigenschaft white-space, CSS Text Module Level 3.

Kehre zu Reading view zurück, verkleinere den Bereich und prüfe END erneut. Kopiere dann den Testinhalt in einen reinen Texteditor und vergleiche ihn mit dem Original. Das gewünschte Ergebnis sind mehrere angezeigte Zeilen, die dieselbe einzelne Quellzeile enthalten. Mit diesem Kopiertest überprüfst du das tatsächliche Verhalten des installierten Renderers und Themes.

Unterschiede zwischen Renderern berücksichtigen

Eine Obsidian-Anpassung der Darstellung wird nicht Teil der portablen Markdown-Syntax des umschlossenen Codeblocks. Wenn du das Beispiel an anderer Stelle verwendest, teste das Ziel separat. Mit diesem Vergleich kannst du entscheiden, was überprüft werden muss:

Ziel Worauf du dich verlassen kannst Was du separat überprüfen solltest
CommonMark-Implementierung Dokumentiertes Parsen umschlossener Codeblöcke Umbruch, Scrollen und verfügbare Anzeigebreite
Von GitHub gerendertes Markdown GitHubs dokumentierte Begrenzungen und Sprachkennungen Die Darstellung von Codeblöcken am tatsächlichen Zielort
Obsidian Reading view Gerenderte Notiz mit aktivierter lokaler Formatierung Ob das Snippet mit dem aktuellen Theme funktioniert
Obsidian Live Preview oder Source mode Der ausgewählte Bearbeitungsmodus Darstellung im Editor; das obige Snippet konfiguriert sie nicht

Die Grenzen der Syntax ergeben sich aus der CommonMark-Spezifikation, GitHubs Dokumentation zu Codeblöcken und Obsidians Dokumentation zu Ansichten.

GitHub dokumentiert, dass die Sprachkennung nach der öffnenden Begrenzung die Syntaxhervorhebung aktiviert. text durch eine andere Sprachkennung zu ersetzen, ist daher keine dokumentierte Möglichkeit, einen Zeilenumbruch anzufordern. Verwende die passende Kennung für das Beispiel und passe das Darstellungsverhalten im zuständigen Renderer an. Codeblöcke erstellen und hervorheben.

Wenn du die Darstellung am Zielort nicht kontrollieren kannst, entscheide dich dafür, die unveränderte Zeile mit den dort verfügbaren Navigationsmöglichkeiten beizubehalten oder das Beispiel in gültige kürzere Quellzeilen umzuschreiben. Die Umschreibung muss der Sprache oder dem Format des Beispiels entsprechen; Markdown-Begrenzungen können einen beliebigen eingefügten Zeilenumbruch nicht gültig machen.

Fehler beheben, ohne notwendige Inhalte zu kürzen

Wenn die Obsidian-Regel scheinbar nichts bewirkt, gehe die folgende Reihenfolge durch:

  1. Vergewissere dich, dass du Reading view testest.
  2. Vergewissere dich, dass wrap-code.css unter CSS snippets angezeigt und aktiviert ist.
  3. Vergewissere dich, dass cssclasses der Notiz genau wrap-code enthält.
  4. Schalte das Snippet aus und wieder ein, während du die unveränderte Testnotiz ansiehst.
  5. Deaktiviere bei Bedarf vorübergehend andere Snippets und vergleiche das Ergebnis mit dem Standard-Theme von Obsidian, um einen Formatierungskonflikt einzugrenzen.
  6. Wiederhole den Test mit dem echten Beispiel, bevor du die Aufgabe als abgeschlossen betrachtest.

Betrachte die Selektorregel als Anpassung, die du in deiner Installation überprüfen solltest. Ein Theme oder ein spezieller Blockrenderer kann eine andere Formatierung oder Struktur verwenden. Wenn der einfache umschlossene Test funktioniert, der echte Block aber nicht, ist dieser Unterschied ein hilfreicher Hinweis: Untersuche den Renderer des echten Blocks, statt blind Zeilenumbrüche einzufügen.

Prüfe zum Schluss, ob das letzte Zeichen erreichbar ist, die Einrückung verständlich bleibt, der kopierte Text der beabsichtigten Quelle entspricht und das Beispiel in der Ansicht funktioniert, in der es gelesen wird. Bewahre den vollständigen Quelltext, entscheide dich bewusst für Umbruch oder Scrollen und teste jedes relevante Ziel.

Quellen