BBCode + Mermaid
Misoss Membre non connecté
Booster Fronde
- Booster Fronde
- Voir le profil du membre Misoss
- Inscrit le : 08/09/2023
Un petit topic pour l'implémentation de MermaidJS avec BBCode:
Mermaid est un outil de diagramme et de cartographie
Ajouter le code suivant au pied de page (Template Base) : {PATH_TO_ROOT}/templates/__default__/js_bottom.tpl
Code JAVASCRIPT :
<script type='text/javascript'> document.addEventListener("DOMContentLoaded", function() { var elements = document.querySelectorAll('.mermaid'); if (elements.length > 0) { var script = document.createElement('script'); script.src = 'https://unpkg.com/mermaid@10.7.0/dist/mermaid.min.js'; script.type = 'text/javascript'; document.head.appendChild(script); script.onload = function() { elements.forEach(function(element) { var brElements = element.querySelectorAll('br'); brElements.forEach(function(br) { br.parentNode.removeChild(br); }); }); console.log('mermaid a été chargé avec succès.'); mermaid.initialize({ logLevel: "error", // [1] securityLevel: "loose", // [2] theme: (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "default" // [3] }) }; } }); </script>
le script cherche si dans la page il existe une balise css s'appelant mermaid; dans cas il charge et initialise la librairie Mermaid
utiliser la balise container avec la class mermaid pour afficher les diagrammes
Code BBCODE :
[container class="mermaid"] graph TD A[Client] --> B[Load Balancer] B --> C[Server1] B --> D[Server2] [/container]
babsolune Membre non connecté
Administrateur
- Administrateur
- Voir le profil du membre babsolune
- Inscrit le : 16/05/2008
- Site internet
- Groupes :
Le mettre dans le dossier __default__ permet de l'utiliser dans tous les thèmes utilisés sur le site mais la modif peut être écrasée dans une possible mise à jour de __default__
tu peux importer le fichier dans ton thème
[container class="file-path"]
- templates
- +__default__
- ++js_bottom.tpl
pour éviter de perdre ta modif à la prochaine mise à jour du fichier dans __default__
- templates
- +mon_thème
- ++js_bottom.tpl
sinon sympa la lib
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie