docs: enable mermaid code fences

bburgin · Apr 20, 2021 · 054b962 · 054b962
1 parent 8dd9a1b
commit 054b962
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/docs/updating.md b/docs/updating.md
@@ -80,8 +80,7 @@ copier --force --data updated_question="my new answer" update
 
 To understand how the updating process works, take a look at this diagram:
 
-<!-- prettier-ignore-start -->
-<div class="mermaid">
+```mermaid
 graph TD
 
 %% nodes ----------------------------------------------------------
@@ -122,9 +121,7 @@ diff("diff")
 %% style ----------------------------------------------------------
 classDef grey fill:#e8e8e8;
 class compare,update,apply grey;
-</div>
-
-<!-- prettier-ignore-end -->
+```
 
 As you can see here, `copier` does several things:
 

diff --git a/mkdocs.yml b/mkdocs.yml
@@ -34,7 +34,11 @@ markdown_extensions:
   - admonition
   - codehilite:
       guess_lang: false
-  - pymdownx.superfences
+  - pymdownx.superfences:
+      custom_fences:
+        - name: mermaid
+          class: mermaid
+          format: !!python/name:pymdownx.superfences.fence_div_format
   - pymdownx.emoji
   - pymdownx.magiclink
   - toc: