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?
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.
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 
What are your views?
@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
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.
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.
3 Likes
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
@Diya I tried with mathjax 3 from Getting Started with MathJax Components — MathJax 3.2 documentation, but apparently the grammar has chagned. Wonder anyone has succesful experience.
Anyways, thx bunch for the script!