gumdrop -Download - gumdrop -Quellcode herunterladen

gumdrop

Andere Kategorien

v2.2.0

Herunterladen

Gummibärchen

Konfigurationsfreies Skript zum Anzeigen von Markdown-Dokumenten als statische HTML-Seiten

Gumdrop ist als benutzerfreundliches, eigenständiges Skript konzipiert, das in Markdown geschriebene Websites und Dokumentationen generieren kann. Es lädt alle seine Abhängigkeiten dynamisch von einem CDN (einschließlich des Markdown-Parsers) und erfordert keine Konfiguration oder Initialisierung.

Installation

Gumdrop erfordert keine Installation, Sie müssen es lediglich mit einem script Tag in ein HTML-Dokument laden.

 < script src =" https://cdn.jsdelivr.net/npm/gumdrop@4 " > </ script >

Verwendung

Um eine statische Website mit Markdown zu erstellen, müssen Sie lediglich eine HTML-Vorlage ( index.html ) auf Ihrem Dateiserver erstellen und Gumdrop als externe Skriptdatei hinzufügen.

 < main > </ main >
< script src =" path/to/gumdrop.js " >

Beachten Sie, dass Sie Ihre Dateien über http / https -Protokoll bereitstellen müssen, da das file keine Abrufanforderungen unterstützt.

Markdown-Dateien im pages können geladen werden. Gumdrop überwacht das Hash-Fragment der URL und lädt die entsprechende Markdown-Datei aus dem pages . Die analysierten Markdown-Dateien werden im HTML-Knoten <main> gerendert, sofern vorhanden, andernfalls im body . Wenn keine Datei angegeben wird, wird standardmäßig die Datei pages/index.md geladen. Um einen Link zu einer anderen Datei im pages zu erstellen, erstellen Sie einfach einen Link mit dem Präfix #!/ vor dem Namen.

 [ Link to about.md ] ( #!/about )

Statische Ressourcen (z. B. Bilder) können aus jedem Ordner geladen werden, der von Ihrem Dateiserver bereitgestellt wird. Pfade sind relativ zu index.html . Im errors können Fehlerseiten für verschiedene HTTP-Fehler abgelegt werden. Jede Datei sollte nach dem HTTP-Fehlercode benannt werden, den sie darstellt (z. B. „ errors/404.md “).

Zusätzliche Daten können für Ihre Dokumente in einem YAML Front Matter angegeben werden. Sie können in jedem Ihrer Markdown-Dokumente mit Moustache-Vorlagen auf diese Daten zugreifen.

Sie können auch separate Dateien zum Speichern von Daten verwenden und diese Ressourcendateien mit einem Dokument im Titelblatt verknüpfen. Ressourcendateien können den Typ YAML (Standard), JSON oder Markdown verwenden. Jeder Wert im Titelblatt eines Dokuments, der mit dem !file versehen ist, wird als Dateiressource betrachtet. Dateipfade, die mit einem führenden / beginnen, sind relativ zu index.html . Wenn das führende / fehlt, wird der data als Ressourcenspeicherort angenommen. Wenn kein Dateityp (Erweiterung) angegeben ist, wird die Erweiterung .yaml angenommen. Bei .md Ressourcendateien ist der zurückgegebene Wert das gerenderte Markdown-Dokument.

 # data/todo.yaml

todos :
  - title : First todo
    text : Complete your first assignment
    completed : true
  - title : YAML
    text : Learn more about YAML Front Matters
    completed : false

 ---
todos: !file todo.yaml
---
{{#todos}}
- **{{title}}**: {{text}} {{#completed}}(✔){{/completed}}
{{/todos}}

Merkmale

Keine Konfiguration, keine Initialisierung erforderlich
Kein serverseitiger Code, benötigt nur einen statischen Dateiserver
Kein Build-/Generierungsschritt, es werden lediglich Dateien bereitgestellt
Zusätzliche Markdown-Funktionen über ExtraMark
Navigation nach Abrufanfragen
Lokales Caching von Dateien für schnellere Ladezeiten
Zusätzliche Daten im Titelblatt und Datendateien, die von Moustache-Vorlagen verarbeitet werden
Fehlerseiten für verschiedene HTTP-Fehlercodes (404, 500, 300)

Syntaxhervorhebung

Umzäunte Codeblöcke werden von Prism.js automatisch verarbeitet. Unterstützte Sprachen sind die Standardsprachen im Prism.js-Bundle. Zur Syntaxhervorhebung müssen Sie einen Prism.js -Stil in Ihre index.html einbinden.

 < link rel =" stylesheet " href =" https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism.css " />

Verwendung mit GitHub-Seiten

Sie können Gumdrop mit GitHub Pages verwenden, da es als statischer Dateiserver dienen kann. Um zu verhindern, dass GitHub Pages versucht, Ihre Site mit Jekyll zu transformieren, fügen Sie eine leere .nojekyll Datei im Stammverzeichnis Ihrer Site hinzu.