Packages

mdex

0.8.0
0.13.3 0.13.2 0.13.1 0.13.0 0.12.5 retired 0.12.4 0.12.3 0.12.2 0.12.1 0.12.0 0.11.7 0.11.6 0.11.5 0.11.4 0.11.3 0.11.2 0.11.1 0.11.0 0.10.0 0.9.4 0.9.3 0.9.2 0.9.1 0.9.0 0.8.6 0.8.5 0.8.4 0.8.3 0.8.2 0.8.1 0.8.0 0.7.5 0.7.4 0.7.3 0.7.2 0.7.1 0.7.0 0.6.2 0.6.1 0.6.0 0.5.0 0.4.3 0.4.2 0.4.1 0.4.0 0.3.3 0.3.2 0.3.1 0.3.0 0.2.0 0.1.18 0.1.17 0.1.16 0.1.15 0.1.14 0.1.13 0.1.12 0.1.11 0.1.10 0.1.9 0.1.8 0.1.7 0.1.6 0.1.5 0.1.4 0.1.3 0.1.2 0.1.1 0.1.0

Fast and extensible Markdown for Elixir

Security advisory: This version has known vulnerabilities. View advisories
HexDocs

Current section

Files

Jump to
Readme
69 Versions
5 Dependencies
36 Dependants
6 Advisories
Files
Activity
mdex examples mermaid.exs
Raw

examples/mermaid.exs 

Mix.install([
  :mdex
])
defmodule MermaidExample do
  import MDEx.Sigil
  def run do
    opts = [
      render: [unsafe: true]
    ]
    markdown = ~MD"""
    # Mermaid Example
    In this example we'll inject the script code to initialize and render mermaid blocks.
    ```mermaid
    sequenceDiagram
        participant Alice
        participant Bob
        Alice->>John: Hello John, how are you?
        loop HealthCheck
            John->>John: Fight against hypochondria
        end
        Note right of John: Rational thoughts <br/>prevail!
        John-->>Alice: Great!
        John->>Bob: How about you?
        Bob-->>John: Jolly good!
    ```
    The following script is used to load the mermaid library and initialize it:
    ```js
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true });
    ```
    """
    mermaid_node =
      MDEx.parse_fragment!("""
      <script type="module">
        import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
        mermaid.initialize({ startOnLoad: true });
      </script>
      """)
    html =
      markdown
      |> MDEx.traverse_and_update(fn
        # inject the mermaid script
        %MDEx.Document{nodes: nodes} = document ->
          nodes = [mermaid_node | nodes]
          %{document | nodes: nodes}
        # inject the mermaid <pre> block without escaping the content
        %MDEx.CodeBlock{info: "mermaid", literal: code, nodes: nodes} ->
          code = """
          <pre class="mermaid">#{code}</pre>
          """
          %MDEx.HtmlBlock{literal: code, nodes: nodes}
        node ->
          node
      end)
      |> MDEx.to_html!(opts)
    File.write!("mermaid.html", html)
    IO.puts(html)
  end
end
MermaidExample.run()