Packages

mdex

0.7.5
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, path: ".."}

])



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()