Math in markdown

Frappe Framework Website
1

For markdown page math formula like:

$$A^2 + B_2$$

is not rendered.

What can be done to make markdown pages to render math equations?

2

@hsrai

Frappe uses markdown2 (GitHub - trentm/python-markdown2: markdown2: A fast and complete implementation of Markdown in Python)

To render markdown syntax.

On Markdown2 the unique available way to render Math formulas is using the extra feature mermaid as documented here

But by default frappé don’t enable mermaid on the extra features
as you can see here

With all that in mind, you can elaborate a PR to enable Marmaid into Frappe, and make it available for everyone.

3

@max_morais_dmm

Thank you for the great answer.

It will be great if we can add mermaid as well, but I believe, for math only, we can use:

However, it is 11 year old :frowning:

What are your views?

4

@hsrai it will add another layer of dependancy!

Just enabling mermaid, will consume much less code, turn everything more powerfull!

Also markdown2 is more maintenable.

1 Like
5

@max_morais_dmm

Agree.

Tried, by editing apps/frappe/frappe/utils/data.py

        extras = {
                "fenced-code-blocks": None,
                "tables": None,
                "header-ids": None,
                "toc": None,
                "highlightjs-lang": None,
                "mermaid": None,
                "html-classes": {"table": "table table-bordered", "img": "screenshot"},
        }

After doing this unable to get math formula rendered.

Even reloaded nginx service:

sudo service nginx reload

Still not working.

Is there any other step?

Any need of build something more.

Tried installing md-mermaid:

(env) frappe@exp:~/frappe-bench/env$ pip3 install md-mermaid
Requirement already satisfied: md-mermaid in ./lib/python3.10/site-packages (0.1.1)
Requirement already satisfied: markdown>=2.5 in ./lib/python3.10/site-packages (from md-mermaid) (3.4.3)

Although md-mermaid installed, but is not showing in following list:

(env) frappe@exp:~/frappe-bench/env$ pip3 list | grep arkd
Markdown                 3.4.3
markdown2                2.4.8
markdownify              0.11.6
(env) frappe@exp:~/frappe-bench/env$

Still not working.

Any hint will be appreciated.

6

@hsrai

The following method worked for me:

Added following in apps/frappe/frappe/utils/data.py:

extras = {
        "fenced-code-blocks": None,
        "tables": None,
        "header-ids": None,
        "toc": None,
        "highlightjs-lang": None,
        "html-classes": {"table": "table table-bordered", "img": "screenshot"},
         "mermaid": None,
         "mathjax": None,
         "cuddled-lists": None,
         "code-friendly": None,
    }

Added following in templates/web.html:

<script type="text/javascript" async
    src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<script type="module" defer>
      import mermaid from
'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
      mermaid.initialize({
        securityLevel: 'loose',
        startOnLoad: true
      });
      let observer = new MutationObserver(mutations => {
        for(let mutation of mutations) {
          mutation.target.style.visibility = "visible";
        }
      });
      document.querySelectorAll("pre.mermaid-pre div.mermaid").forEach(item => {
        observer.observe(item, {
          attributes: true,
          attributeFilter: ['data-processed'] });
      });
    </script>

Then used LaTeX syntax in Markdown by adding a webpage.
I was successfully able to use math formula as well as mermaid flowcharts.

2 Likes
7

Excellent @Diya

Welcome to Frappe | ERPNext community.

This is a working solution, and is a big achievement.

However it looks to me that amending these code will be good if community need this solution, in that case you may send PR. Otherwise there must be a better way be do this without touching core files.

Can any knowledgeable person give some pointer.

1 Like