Fonctionnalités Markdown étendues
Carte de dépôt GitHub
Vous pouvez ajouter des cartes dynamiques pointant vers des dépôts GitHub. Au chargement de la page, les informations du dépôt sont récupérées depuis l’API GitHub.
Utilisez le code ::github{repo="CuteLeaf/Firefly"} pour créer une carte de dépôt GitHub.
::github{repo="CuteLeaf/Firefly"}Configuration des blocs d’avertissement (Admonitions)
Firefly utilise le plugin rehype-callouts, qui prend en charge trois styles de thèmes pour les blocs d’avertissement : GitHub, Obsidian et VitePress. Vous pouvez les configurer dans src/config/siteConfig.ts :
export const siteConfig: SiteConfig = { // ... rehypeCallouts: { // Options : "github" | "obsidian" | "vitepress" theme: "github", }, // ...};Remarque : après avoir modifié la configuration, vous devez redémarrer le serveur de développement pour que les changements prennent effet.
Voici la liste des types pris en charge par chaque thème. Chaque style de thème a sa propre syntaxe ; choisissez selon vos préférences.
1. Style de thème GitHub
Voici les 5 types de base officiellement pris en charge par GitHub.
Syntaxe de base
> [!NOTE] NOTE> Informations que l'utilisateur devrait prendre en compte.
> [!TIP] TIP> Informations facultatives pour aider l'utilisateur à mieux réussir.
> [!IMPORTANT] IMPORTANT> Informations essentielles nécessaires au succès de l'utilisateur.
> [!WARNING] WARNING> Contenu critique nécessitant une attention immédiate.
> [!CAUTION] CAUTION> Conséquences négatives potentielles d'une action.
> [!NOTE] Titre personnalisé> Ceci est un exemple avec un titre personnalisé.2. Style de thème Obsidian
Le style Obsidian prend en charge un grand nombre de types et d’alias.
Cliquer pour développer... la liste de syntaxes Obsidian
> [!NOTE] NOTE> Bloc de notes générique.
> [!ABSTRACT] ABSTRACT> Résumé de l'article.
> [!SUMMARY] SUMMARY> Synthèse de l'article (identique à Abstract).
> [!TLDR] TLDR> Trop long, pas lu (identique à Abstract).
> [!INFO] INFO> Informations supplémentaires.
> [!TODO] TODO> Éléments à accomplir.
> [!TIP] TIP> Conseils pratiques ou astuces.
> [!HINT] HINT> Indication (identique à Tip).
> [!IMPORTANT] IMPORTANT> Information importante.
> [!SUCCESS] SUCCESS> Opération réussie.
> [!CHECK] CHECK> Vérification passée (identique à Success).
> [!DONE] DONE> Terminé (identique à Success).
> [!QUESTION] QUESTION> Poser une question.
> [!HELP] HELP> Demander de l'aide (identique à Question).
> [!FAQ] FAQ> Questions fréquentes (identique à Question).
> [!WARNING] WARNING> Avertissement.
> [!CAUTION] CAUTION> Précaution (identique à Warning).
> [!ATTENTION] ATTENTION> Attirer l'attention (identique à Warning).
> [!FAILURE] FAILURE> Opération échouée.
> [!FAIL] FAIL> Échec (identique à Failure).
> [!MISSING] MISSING> Contenu manquant (identique à Failure).
> [!DANGER] DANGER> Avertissement d'opération dangereuse.
> [!ERROR] ERROR> Message d'erreur (identique à Danger).
> [!BUG] BUG> Signaler un défaut logiciel.
> [!EXAMPLE] EXAMPLE> Présenter un exemple.
> [!QUOTE] QUOTE> Citer un passage.
> [!CITE] CITE> Citation (identique à Quote).
> [!NOTE] Titre personnalisé> Ceci est un exemple avec un titre personnalisé.
3. Style de thème VitePress
Le style VitePress propose un ensemble de styles plats et modernes par défaut. Il comprend actuellement 5 types de base identiques à ceux de GitHub.
Cliquer pour développer... la liste de syntaxes VitePress
> [!NOTE] NOTE> Correspond au Note de GitHub.
> [!TIP] TIP> Correspond au Tip de GitHub.
> [!IMPORTANT] IMPORTANT> Correspond au Important de GitHub.
> [!WARNING] WARNING> Correspond au Warning de GitHub.
> [!CAUTION] CAUTION> Correspond au Caution de GitHub.
> [!TIP] Titre personnalisé> Le style VitePress prend également en charge les titres personnalisés.
4. Syntaxe de style Docusaurus
Seule la syntaxe est prise en charge ; le style reste identique aux trois thèmes ci-dessus.
Cliquer pour développer... la liste de syntaxes Docusaurus
Prend en charge les types de blocs d’avertissement suivants : note tip important warning caution
:::noteInformations que l'utilisateur devrait prendre en compte, même en parcourant rapidement.:::
:::tipInformations facultatives pour aider l'utilisateur à mieux réussir.:::
:::importantInformations essentielles nécessaires au succès de l'utilisateur.:::
:::warningContenu critique nécessitant une attention immédiate en raison de risques potentiels.:::
:::cautionConséquences négatives potentielles d'une action.:::
:::tip[Titre personnalisé]Informations facultatives pour aider l'utilisateur à mieux réussir.:::Spoiler
Vous pouvez ajouter un effet spoiler à votre texte. Le texte prend également en charge la syntaxe Markdown.
Contenu
Contenu :spoiler[caché **haha**] !Grille d’images (Image Grid)
Vous pouvez utiliser les balises [grid] et [/grid] pour afficher plusieurs images côte à côte verticalement. C’est très utile pour présenter une galerie de photos ou des comparaisons d’images. Le système dispose automatiquement les images dans une grille responsive en fonction du nombre d’images encadrées (jusqu’à 4 images côte à côte maximum).
Compensation automatique de la hauteur des images : Si des images d’une même rangée ont des hauteurs, tailles ou proportions différentes, elles se rempliront automatiquement comme dans une « galerie en mosaïque ». Les images plus courtes ou non conformes seront automatiquement recadrées au centre avec object-cover pour combler l’espace. Les bords des images sont parfaitement alignés horizontalement sans espace, mais après le recadrage, seul un clic sur l’image via la visionneuse permet de voir l’image complète ; il est donc conseillé d’éviter autant que possible de mélanger des images aux proportions très différentes dans une même rangée.
Légendes toujours alignées en bas : Quelle que soit la variation de dimensions des images au-dessus, toutes les légendes d’une même ligne sont alignées sur une ligne de base horizontale parfaite.
Syntaxe de base
[grid][/grid]Soutenir & Partager
Si cet article vous a aidé, partagez-le ou soutenez-moi !
