Warum Markdown-Zeichen nur im Wort unter dem Cursor angezeigt werden

Im Live-Modus bestimmt die Position des Cursors unmittelbar die Darstellung. Markdown-Symbole sollten normalerweise verborgen sein und nur erscheinen, wenn man etwas bearbeitet.

Doch woran lässt sich erkennen, wann etwas „bearbeitet“ wird?

Anfangs orientierte sich mote am gesamten Absatz. Sobald der Cursor in einen Absatz gelangte, wurden alle Symbole dieses Absatzes angezeigt.

Die Umsetzung war einfach, doch die Darstellung wirkte unruhig. Obwohl der Cursor nur platziert worden war, um ein einziges fett geschriebenes Wort zu ändern, wurden selbst der Link und der Code drei Zeilen weiter unten in Quelltext verwandelt. Der Blick ruhte auf einer Stelle, während sich der gesamte Absatz bewegte.

Nicht auf den Absatz, sondern auf den Ausdruck schauen

Jetzt zeigt mote nur den Ausdruck an, den der Cursor berührt.

Der Quelltext erscheint nur, wenn sich der Cursor zwischen dem öffnenden und dem schließenden Symbol befindet. Auch die Stellen unmittelbar vor und hinter den Symbolen gehören zu diesem Bereich. Denn den Cursor dort zu platzieren ist ebenfalls eine Handlung, mit der man den Ausdruck bearbeiten möchte.

Sobald sich der Cursor auch nur um eine Stelle aus dem Bereich bewegt, kehrt die Anzeige zur gerenderten Darstellung zurück. Beim Ein- und Ausblenden wird ein 120 ms langer Übergang der Deckkraft verwendet. Da dieser Übergang einen Anfang und ein Ende hat, bleibt nach seinem Abschluss nichts zurück.

Auch wenn ein Absatz Fettschrift, einen Link und Inline-Code enthält, bewegt sich der Rest nicht. Nur der Ausdruck, den der Cursor berührt, verändert sich, und auch der neu gezeichnete Bereich beschränkt sich auf diese eine Zeile. Das gesamte Dokument wird nicht erneut interpretiert.

Dasselbe Prinzip gilt für Kursivschrift, Fettschrift, Durchstreichungen, Hervorhebungen, Tiefstellungen, Hochstellungen, Code, Formeln, Links, Bilder und Fußnotenverweise.

Symbole am Zeilenanfang verhalten sich etwas anders. Da # und > den Charakter der gesamten Zeile bestimmen, werden sie unabhängig davon, wo sich der Cursor in der Zeile befindet, immer gleich dargestellt. Das - einer Liste wird dagegen nur sichtbar, wenn sich der Cursor auf dem Symbol befindet. Sobald er sich über das Leerzeichen hinweg in den Text bewegt, wird es sofort wieder als Aufzählungszeichen dargestellt.

Auch bei ausgewähltem Text werden nur die Ausdrücke als Quelltext angezeigt, die sich mit dem Auswahlbereich überschneiden. Denn wenn man drei Buchstaben auswählt und sich daraufhin die gesamte Zeile in Quelltext verwandelt, ist noch schwerer zu erkennen, was eigentlich ausgewählt wurde.

Auch die Symbole übernehmen das Aussehen der Schrift

Sichtbar gewordene Symbole übernehmen den Stil des jeweiligen Ausdrucks.

Die ** eines fett geschriebenen Textes erscheinen fett, die * einer Kursivschrift kursiv. Auch die ~~ einer Durchstreichung werden durchgestrichen.

Früher wurden alle Symbole grau dargestellt. Dadurch wirkte es in dem Moment, in dem man den Cursor auf einen fett geschriebenen Text setzte, als sei das Wort zwischen grauen Klammern eingeschlossen. Auch die Information, dass der gerade bearbeitete Text fett geschrieben war, verschwand vorübergehend.

Als die Symbole den Stil der Schrift übernahmen, wurde ihre Bedeutung klarer. Das Wort bleibt weiterhin fett sichtbar, während die Sternchen nur noch als Markierungen dienen, die seinen Umfang anzeigen.

Grau wird nur für Blocksymbole wie #, > und Aufzählungszeichen verwendet. Denn diese Symbole beschreiben eher den Charakter der Zeile als den der Schrift.

Das Prinzip ist einfach. Symbole, die an Schrift angefügt sind, werden wie ein Teil der Schrift dargestellt, während Symbole, die eine Zeile bestimmen, wie ein Hintergrund behandelt werden.

Nur Sternchen werden automatisch paarweise ergänzt

Wenn man ein einzelnes Sternchen eingibt, wird zugleich das schließende Sternchen erzeugt. Gibt man ein weiteres Sternchen ein, wächst daraus ein Paar für Fettschrift.

Wenn man nach dem Inhalt das schließende Sternchen eingibt, wird kein neues Symbol erzeugt, sondern das vorhandene übersprungen. Mit dieser Regel wurde auch das Problem gelöst, bei dem jeweils vier Sternchen entstanden.

Ein Sternchen, das unmittelbar hinter einem Buchstaben oder einem anderen Sternchen eingegeben wird, gilt jedoch als Zeichen dafür, dass der Benutzer den Ausdruck selbst schließt. In diesem Fall wird kein Paar erzeugt.

Unterstriche und Tilden werden nicht automatisch paarweise ergänzt. Sie könnten sonst alltägliche Eingaben wie snake_case, __init__ und ~/경로 behindern. Nur beim Umschließen von ausgewähltem Text verhalten sie sich als Paar.

Die Einfügemarke sollte weniger auffallen als die Schrift

Anfangs war die Einfügemarke in der blauen Akzentfarbe gehalten. Jetzt verwendet sie dieselbe Tintenfarbe wie der Fließtext.

Ein blauer Balken passt gut zu einem kurzen Eingabefeld. In einem Dokument steht jedoch die Schrift im Mittelpunkt. Die Einfügemarke muss lediglich zeigen, bis wohin geschrieben wurde. Die Akzentfarbe bleibt nur für Auswahlbereiche und Suchergebnisse erhalten.

Ihre Breite wird bestimmt, indem die Höhe der Einfügemarke durch die Tintenhöhe des Fließtexts geteilt und das Ergebnis auf eine ganze Zahl gerundet wird. Im Fließtext ergibt das 1 px, und nur bei großen Überschriften steigt der Wert auf 2 px. Würde eine gebrochene Breite unverändert verwendet, verteilte sie sich auf zwei Pixelspalten und erschiene dadurch nicht dünner, sondern dicker und unschärfer.

Die Höhe orientiert sich nicht am Zeilenabstand, sondern an der Schrifthöhe. Beim Fließtext beträgt sie 18 px, bei h3 24 px, bei h2 29 px und bei h1 36 px. Schon an der Einfügemarke lässt sich erkennen, ob sich der Cursor im Fließtext oder in einer Überschrift befindet.

Das Blinken ist als einzige Ausnahme von der Regel vermerkt, im Ruhezustand keine sich wiederholenden Quellen zu verwenden. Verliert das Fenster den Fokus, hört die Einfügemarke auf zu blinken, und auch der Auswahlbereich tritt auf einen Alphawert von 45 % zurück.

Die Verschiebung haben wir beibehalten

Wenn die Symbole erscheinen, wird der nachfolgende Text ein wenig verschoben. Wir haben beschlossen, diese Bewegung nicht zu beseitigen.

Wir haben auch eine Methode getestet, bei der die verborgenen Symbole dauerhaft in einem hellen Grau angezeigt wurden, um Platz für sie freizuhalten. Bei fett geschriebenem Text blieb jedoch ein graues Nachbild zurück, und die Durchstreichung ragte über das Wort hinaus. Es entstand ein befremdlicher Zustand, der weder der gerenderten Darstellung noch dem Quelltext entsprach.

Bei Symbolen am Zeilenanfang, die wie Aufzählungszeichen oder Aufgabenkästchen als gezeichnete Formen erscheinen, wird die Zeile stattdessen um die Breitendifferenz zwischen Quelltext und gerenderter Darstellung verschoben. Dadurch bewegen sich die Buchstaben des Fließtexts nicht, wenn das Symbol sichtbar wird. Beim # einer Überschrift und dem > eines Zitats bleibt es dagegen dabei, dass sie den Fließtext verschieben. Diese Entscheidung beruht darauf, dass Editoren mit diesem Verhalten vertraut sind.

Bei Links kann die visuelle Veränderung größer ausfallen, weil die Adresse lang sein kann. Deshalb wird normalerweise nur der Linktext mit einem kleinen Pfeil am Ende angezeigt. So ist er als Link erkennbar, während die Adresse nur dann erscheint, wenn sie bearbeitet wird.

Wenn der Quelltext genau geprüft werden muss, kann dafür der Quelltextmodus verwendet werden. Der Live-Modus ist kein Ort, an dem alle Symbole angezeigt werden, sondern einer, der nur die Stelle öffnet, die gerade bearbeitet werden soll.

mote versucht nicht, die Absicht des Benutzers zu erraten. Befindet sich der Cursor innerhalb eines Ausdrucks, werden dessen Symbole angezeigt; befindet er sich außerhalb, werden sie verborgen. Eine Vermutung ist bequem, wenn sie stimmt, doch wenn sie falsch ist, lässt sich nur schwer erkennen, warum. Wird allein die Position als Kriterium verwendet, ist das Ergebnis jederzeit vorhersehbar.

Zu entscheiden, wann Symbole angezeigt werden, bedeutet letztlich zu entscheiden, wo der Blick des Benutzers verweilen soll.