Auch wenn GitHub Readme-Dateien (typischerweise ./readme.md) Markdown sind und Markdown HTML unterstützt, können Sie keine <style>- oder <script>-Tags darin einfügen. (Nun, Sie können es tun, sie werden einfach entfernt.) Sie können also keine benutzerdefinierten Stile anwenden. Oder doch?
- Sie können SVG als
<img src="./file.svg" alt="" />verwenden (überall). - Wenn sie so verwendet werden, spielen sogar Dinge wie Animationen darin (wow).
- SVG hat Elemente wie
<text>für Textinhalte, aber auch<foreignObject>für normale HTML-Inhalte. - SVG unterstützt
<style>-Tags. - Ihre Datei
readme.mdunterstützt<img>mit SVG-Quellen.
Sindre Sorhus hat all das in einem Beispiel kombiniert.
Dieselbe SVG-Quelle funktioniert auch hier
Wenn jemand denkt: „Hey! Ich habe so etwas schon mal in CRA gesehen“, *ja*, das haben Sie (PR#3816).
asciinema+svg-term-cli(oderasciicast2gif) ist eine ziemlich schicke Möglichkeit, Ihre READMEs hervorzuheben, besonders wenn Sie CLIs präsentieren.Sehr nützlich
Oh, es scheint, dass die Tags entfernt wurden... Also noch einmal, mit korrekt kodierten Klammern.
Können Sie die Rolle von <foreignObject> für animierte SVGs näher erläutern? Abgesehen vielleicht vom text-shadow in diesem Beispiel, sollte <style> selbst nicht ausreichen?
Ich habe es sogar mit einem weiteren Beispiel für ein animiertes SVG-Headerbild ausprobiert: https://raw.githubusercontent.com/pmndrs/valtio/master/logo.svg – und tatsächlich scheint es auch dann zu funktionieren, wenn das <foreignObject> entfernt und das <style> direkt in das SVG platziert wird (abgesehen von der offensichtlichen Beeinträchtigung der Positionierung der Elemente, die behoben werden müsste).
Fehlt mir etwas?
Hallo,
Ich habe diesen Trick verwendet, um Unterstützung für
prefers-color-schemein Bildern hinzuzufügen, sodass Sie nun ein Bild für das dunkle Thema und ein weiteres für das helle Thema verwenden können. Ich denke, das ist in READMEs sehr nützlich.Ich habe diesen Ansatz im Projekt
github-readme-activity-graphimplementiert.Mehr dazu erfahren Sie in meinem readme, das zeigt, wie es geht.
Ich hoffe, Sie finden es nützlich.
Danke!
Guter Trick!
Ich habe mich nur gefragt, ob es möglich ist, den Stil des body-Elements zu ändern?
Danke!