Merge pull request #6497 from jsoref/docs/6496_fix-duplicate-and-missing-examples

chore: Fix duplicate and missing examples

docs/config/theming.md

@@ -53,18 +53,6 @@ Example of `init` directive setting the `theme` to `forest`:
     a --> b
 ```
 
-```mermaid-example
-%%{init: {'theme':'forest'}}%%
-  graph TD
-    a --> b
-```
-
-```mermaid
-%%{init: {'theme':'forest'}}%%
-  graph TD
-    a --> b
-```
-
 > **Reminder**: the only theme that can be customized is the `base` theme. The following section covers how to use `themeVariables` for customizations.
 
 ## Customizing Themes with `themeVariables`
@@ -139,66 +127,6 @@ Example of modifying `themeVariables` using the `init` directive:
           end
 ```
 
-```mermaid-example
-%%{
-  init: {
-    'theme': 'base',
-    'themeVariables': {
-      'primaryColor': '#BB2528',
-      'primaryTextColor': '#fff',
-      'primaryBorderColor': '#7C0000',
-      'lineColor': '#F8B229',
-      'secondaryColor': '#006100',
-      'tertiaryColor': '#fff'
-    }
-  }
-}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-```mermaid
-%%{
-  init: {
-    'theme': 'base',
-    'themeVariables': {
-      'primaryColor': '#BB2528',
-      'primaryTextColor': '#fff',
-      'primaryBorderColor': '#7C0000',
-      'lineColor': '#F8B229',
-      'secondaryColor': '#006100',
-      'tertiaryColor': '#fff'
-    }
-  }
-}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
 ## Color and Color Calculation
 
 To ensure diagram readability, the default value of certain variables is calculated or derived from other variables. For example, `primaryBorderColor` is derived from the `primaryColor` variable. So if the `primaryColor` variable is customized, Mermaid will adjust `primaryBorderColor` automatically. Adjustments can mean a color inversion, a hue change, a darkening/lightening by 10%, etc.

packages/mermaid/src/docs/config/8.6.0_docs.md

@@ -75,7 +75,7 @@ When deployed within code, init is called before the graph/diagram description.
 
 **for example**:
 
-```mermaid
+```mermaid-example
 %%{init: {"theme": "default", "logLevel": 1 }}%%
  graph LR
   a-->b

packages/mermaid/src/docs/config/directives.md

@@ -88,7 +88,7 @@ Here the directive declaration will set the `logLevel` to `debug` and the `theme
 
 Note: You can use 'init' or 'initialize' as both are acceptable as init directives. Also note that `%%init%%` and `%%initialize%%` directives will be grouped together after they are parsed.
 
-```mermaid
+```mermaid-example
 %%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
 %%{initialize: { 'logLevel': 'fatal', "theme":'dark', 'startOnLoad': true } }%%
 ...

packages/mermaid/src/docs/config/math.md

@@ -10,7 +10,7 @@ Note that at the moment, the only supported diagrams are below:
 
 ### Flowcharts
 
-```mermaid
+```mermaid-example
  graph LR
       A["$$x^2$$"] -->|"$$\sqrt{x+3}$$"| B("$$\frac{1}{2}$$")
       A -->|"$$\overbrace{a+b+c}^{\text{note}}$$"| C("$$\pi r^2$$")
@@ -20,7 +20,7 @@ Note that at the moment, the only supported diagrams are below:
 
 ### Sequence
 
-```mermaid
+```mermaid-example
 sequenceDiagram
     autonumber
     participant 1 as $$\alpha$$

packages/mermaid/src/docs/config/theming.md

@@ -41,12 +41,6 @@ Example of `init` directive setting the `theme` to `forest`:
     a --> b
 ```
 
-```mermaid
-%%{init: {'theme':'forest'}}%%
-  graph TD
-    a --> b
-```
-
 > **Reminder**: the only theme that can be customized is the `base` theme. The following section covers how to use `themeVariables` for customizations.
 
 ## Customizing Themes with `themeVariables`
@@ -91,36 +85,6 @@ Example of modifying `themeVariables` using the `init` directive:
           end
 ```
 
-```mermaid
-%%{
-  init: {
-    'theme': 'base',
-    'themeVariables': {
-      'primaryColor': '#BB2528',
-      'primaryTextColor': '#fff',
-      'primaryBorderColor': '#7C0000',
-      'lineColor': '#F8B229',
-      'secondaryColor': '#006100',
-      'tertiaryColor': '#fff'
-    }
-  }
-}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
 ## Color and Color Calculation
 
 To ensure diagram readability, the default value of certain variables is calculated or derived from other variables. For example, `primaryBorderColor` is derived from the `primaryColor` variable. So if the `primaryColor` variable is customized, Mermaid will adjust `primaryBorderColor` automatically. Adjustments can mean a color inversion, a hue change, a darkening/lightening by 10%, etc.

packages/mermaid/src/docs/intro/getting-started.md

@@ -41,7 +41,7 @@ In the `Code` panel, write or edit Mermaid code, and instantly `Preview` the ren
 
 Here is an example of Mermaid code and its rendered result:
 
-```mermaid
+```mermaid-example
 graph TD
     A[Enter Chart Definition] --> B(Preview)
     B --> C{decide}

packages/mermaid/src/docs/intro/syntax-reference.md

@@ -83,7 +83,7 @@ Mermaid offers a variety of styles or “looks” for your diagrams, allowing yo
 
 You can select a look by adding the look parameter in the metadata section of your Mermaid diagram code. Here’s an example:
 
-```mermaid
+```mermaid-example
 ---
 config:
   look: handDrawn
@@ -108,7 +108,7 @@ In addition to customizing the look of your diagrams, Mermaid Chart now allows y
 
 You can specify the layout algorithm directly in the metadata section of your Mermaid diagram code. Here’s an example:
 
-```mermaid
+```mermaid-example
 ---
 config:
   layout: elk

packages/mermaid/src/docs/syntax/block.md

@@ -7,7 +7,7 @@ outline: 'deep' # shows all h3 headings in outline in Vitepress
 
 ## Introduction to Block Diagrams
 
-```mermaid
+```mermaid-example
 block-beta
 columns 1
   db(("DB"))

packages/mermaid/src/docs/syntax/classDiagram.md

@@ -248,7 +248,7 @@ classE o-- classF : aggregation
 
 Relations can logically represent an N:M association:
 
-```mermaid
+```mermaid-example
 classDiagram
     Animal <|--|> Zebra
 ```

packages/mermaid/src/docs/syntax/examples.md

@@ -141,7 +141,7 @@ sequenceDiagram
 
 ## A commit flow diagram.
 
-```mermaid
+```mermaid-example
 gitGraph:
     commit "Ashish"
     branch newbranch

packages/mermaid/src/docs/syntax/gantt.md

@@ -259,7 +259,7 @@ gantt
 
 The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceding YAML settings.
 
-```mermaid
+```mermaid-example
 ---
 displayMode: compact
 ---

packages/mermaid/src/docs/syntax/sequenceDiagram.md

@@ -442,7 +442,7 @@ sequenceDiagram
 
 Comments can be entered within a sequence diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
 
-```mermaid
+```mermaid-example
 sequenceDiagram
     Alice->>John: Hello John, how are you?
     %% this is a comment