eQuantic.UIeQuantic.UI
Docs
Playground
GitHub
DocsWrite-once
Markdown
Edit this page
3 min read
Seit 0.2.0-preview.26
Markdown, gerendert als das Design System. Ein Aufruf, und ein Dokument (eine Doku-Seite, eine Chat-Antwort, eine Release-Notiz) kommt im eigenen Theme der Anwendung heraus, weil jeder Block sich zu den Komponenten absenkt, aus denen die Anwendung schon gemacht ist. Es gibt keinen zweiten "einfachen" Renderer, von dem abzudriften wäre: Das Standardaussehen ist das Standard-Theme, und MaterialTheme.FromSeed(…) gibt einem gerenderten Dokument eine neue Marke, ohne dass sich sonst etwas ändert.
1
2
3
4
5
6
7
8
9
10
11
Markdown(source)
Markdown(source)
{
Style = new MarkdownStyle // optional; die Voreinstellungen kommen aus dem Theme
{
Heading1 = TypeRole.Display, // Rollen je Überschriftenebene
CodeLineNumbers = true, // Rinne am eingezäunten Code (standardmäßig aus)
BlockGap = 18, // vertikaler Rhythmus zwischen den Blöcken
},
}
Was sich zu was absenkt
Markdown
Komponente
Überschrift 1 bis 4
Text auf den TypeRole-Stufen (Heading, Title, TitleSmall, Label)
Absatz
EIN Text mit TextRun-Spans: fett, kursiv, Inline-Code, Links mitten im Satz
Inline-Code
ein Mono-Span eine Stufe unter der Prosagröße, der die Zeilenbox des Absatzes behält
[Link](href)
TextRun.Destination, das auf BEIDEN Zielen navigiert (Photon testet den Run seit 0.2.0-preview.28 auf Treffer)
Eingezäunter Code
CodeBlock, nach denselben Regeln hervorgehoben, die der CodeEditor nutzt, mit seinem Kopierknopf
mermaid `-Zaun | ein Mermaid-Diagramm, nativ vom Design System gezeichnet
Liste (-, 1.)
Markierungsrinne + Span-Absätze, eine Schachtelungsstufe
> Zitat
eine am Anfang berandete Box
Tabelle
Grid-Zeilen unter einer haarlinienumrahmten Karte
---
Divider
Ein Absatz ist ein Text mit Spans, nie eine Reihe von Texts, denn eine Reihe bricht zwischen Runs statt zwischen Wörtern, ein Satz mit drei Code-Spans würde also an den Spans umbrechen.
Betonung zeichnet auf jedem Ziel
Seit 0.2.0-preview.28
*kursiv* neigt sich nun: TypeStyle hat die Achse bekommen (sie komponiert mit Gewicht und mit Mono, also existieren **fett *kursiv*** und kursiver Code beide), und der Zaun, den diese Seite trug ("kursiv parst, malt aber aufrecht"), schloss damit, eine Schleife in der Komponente später, genau wie versprochen. Auf Photon ließ dieselbe Version den ganzen Absatz RUN FÜR RUN zeichnen, sodass das fette Wort, der Inline-Code-Span und der Link mitten im Satz dort aufhörten, sich in flache Prosa aufzulösen. Siehe Photon für die Mechanik der Fragmente.
Ein Parser, jede Seite
Der Parser (MarkdownParser.Parse / .Inline, öffentlich, weil das Blockmodell ohne die Komponente nutzbar ist) ist in der eqc-Teilmenge geschrieben und läuft auf jeder Seite des Frameworks: Dasselbe C# parst beim SSR und auf Photon, und sein transpilierter Zwilling parst im Browser. Das ist, was den Render des Servers und das Neurendern des Clients von Bauart übereinstimmen lässt, und was es erlaubt, dass eine Chat-Nachricht, die als Strom in den Client-Zustand läuft, mit null Serverrunden neu rendert.
Parität wird nicht erstrebt, sie ist gepinnt: Ein kanonisches Dokument und ein Formen-Dumper leben in beiden Testsuiten (MarkdownParserTests.cs, markdown-parser.spec.ts) mit identischen erwarteten Literalen. Widerspräche der Zwilling je dem C#-Parser, bricht eine Suite, bevor eine Seite bricht.
Der Entwurf des Scanners (Code-Spans beanspruchen ihre Zeichen zuerst, ein Gang von links nach rechts, kein Regex) kommt von der Dokumentationsseite, die ihn in Produktion bewiesen hat; die Seite behält ihren eigenen Dialekt (Hinweiskästen aus fett angeführten Zitaten, die eq:-Versionsmarken) als Transformationen über diesen Blöcken.
Zäune (v1, absichtlich)
•
Betonung geht nur mit Sternchen: _Unterstriche_ bleiben wörtlich; Prosa über Code ist voll von Bezeichnern_mit_Unterstrichen.
•
Bilder lesen sich als ihr Alt-Text, der auf die Quelle verlinkt: Ein Image-Knoten ist laut Spezifikation ein ausdrücklich dimensionierter Platz, und Markdown trägt keine Maße, mit denen man einen dimensionieren könnte.
•
Rohes HTML kommt nie durch: eine Injektionsfläche im Web, bedeutungslos auf Photon.
•
Nur eingezäunter Code: keine Blöcke mit vier Leerzeichen Einzug; die Alert-Hinweiskästen von GitHub (> [!NOTE]) sind vorläufig ein Dialekt auf Anwendungsebene. Ein mermaid `-Zaun ist die Ausnahme, die rendert: siehe Mermaid.