Script sans configuration pour afficher les documents Markdown sous forme de pages HTML statiques
Gumdrop est conçu pour être un script autonome facile à utiliser qui peut générer des sites Web et des documentations écrites en Markdown. Il charge dynamiquement toutes ses dépendances à partir d'un CDN (y compris l'analyseur Markdown) et ne nécessite aucune configuration ni initialisation.
Gumdrop ne nécessite pas d'installation, il vous suffit de le charger dans un document HTML avec une balise script
.
< script src =" https://cdn.jsdelivr.net/npm/gumdrop@4 " > </ script >
Pour créer un site Web statique avec Markdown, il vous suffit de créer un modèle HTML ( index.html
) sur votre serveur de fichiers et d'ajouter Gumdrop en tant que fichier de script externe.
< main > </ main >
< script src =" path/to/gumdrop.js " >
Sachez que vous devez servir vos fichiers via le protocole
http
/https
, car le protocolefile
ne prend pas en charge les requêtes de récupération.
Les fichiers Markdown dans le dossier pages
peuvent être chargés. Gumdrop surveille le fragment de hachage de l'URL et charge le fichier Markdown correspondant à partir du dossier pages
. Les fichiers Markdown analysés sont rendus dans le nœud HTML <main>
s'il est présent, dans body
sinon. Le fichier par défaut qui est chargé si aucun fichier n'est spécifié est pages/index.md
. Pour créer un lien vers un autre fichier du dossier pages
, créez simplement un lien avec son nom préfixé par #!/
.
[ Link to about.md ] ( #!/about )
Les ressources statiques (par exemple les images) peuvent être chargées à partir de n'importe quel dossier servi par votre serveur de fichiers, les chemins sont relatifs à index.html
. Les pages d'erreur pour diverses erreurs HTTP peuvent être placées dans le dossier errors
. Chaque fichier doit être nommé en fonction du code d'erreur HTTP qu'il représente (par exemple errors/404.md
).
Des données supplémentaires peuvent être spécifiées pour vos documents dans un Front Matter YAML. Vous pouvez accéder à ces données dans n'importe lequel de vos documents Markdown avec des modèles de moustache.
Vous pouvez également utiliser des fichiers distincts pour stocker des données et lier ces fichiers de ressources à un document de présentation. Les fichiers de ressources peuvent utiliser le type YAML (par défaut), JSON ou Markdown. Toute valeur dans le texte préliminaire d'un document annotée avec le type !file
est considérée comme une ressource de fichier. Les chemins de fichiers commençant par un /
sont relatifs à index.html
, si le /
est manquant, le dossier data
est considéré comme l'emplacement de la ressource. Si aucun type de fichier (extension) n'est indiqué, l'extension .yaml
est supposée. Pour les fichiers de ressources .md
la valeur renvoyée sera le document Markdown rendu.
# 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}}
Les blocs de code clôturés sont automatiquement traités par Prism.js. Les langues prises en charge sont les langues par défaut dans le bundle Prism.js. Pour la coloration syntaxique, vous devez inclure un style Prism.js dans votre index.html
.
< link rel =" stylesheet " href =" https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism.css " />
Vous pouvez utiliser Gumdrop avec GitHub Pages car il peut servir de serveur de fichiers statiques. Pour empêcher les pages GitHub d'essayer de transformer votre site avec Jekyll, ajoutez un fichier .nojekyll
vide à la racine de votre site.
Toutes les idées, recommandations, rapports de bugs, demandes de tirage sont les bienvenus. ?