Search code examples
javascripthtmlrendering

How to combine Marked and MathJax

What I know

Using Marked Documentation, I am able to create code which renders markdown syntax correctly:

<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Marked in the browser</title>
</head>
<body>
  <div id="content"></div>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script>
    document.getElementById('content').innerHTML =
      marked('# Marked in browser\n\nRendered by **marked**.');
  </script>
</body>
</html>

A real-world webpage with the above example is here.

I am also able to make mathJax inline rendering work, using this answer:

<!from: https://tex.stackexchange.com/questions/27633/mathjax-inline-mode-not-rendering>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true
}
});
</script>

Works nicely (real-world example).

<script type="text/javascript"
    src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

<!from: https://www.mathjax.org/#gettingstarted>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

<!from: https://stackoverflow.com/a/46511456/8565438>

<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


This is an example of MathJax inline rendering: $\dot{u}=\alpha \nabla^2 u$.

Question

How can I combine the Marked and MathJax? I would like to be able to use syntax similar to that of math.stackexchange.com: markdown & MathJax combined.

Expected Output

For example, this text (sorrounded by some JS magic):

Problem
-------

I am having trouble with finding a solution which satisfies the boundary and initial conditions to this PDE:

$$\frac{\partial u}{\partial t} = \frac{\partial ^2 u}{\partial^2x}$$
where $u=u(x,t)$, $0 \leq x \leq L$
with boundary & initial conditions: 
 
BC1: $u(x=0,t>0)=T_f$;
BC2: $u(x=L,t>0)=T_i$;
IC: $u(x,t=0)=f(x)$

should render something like this:

enter image description here

(source)

How can I achieve this?

(JS newbie here)

Solution

  • A quick workaround can be the usage of https://stackedit.io/app

    After writing the text you can publish the stuff into HTML (to a cloud drive), and the result gives exactly what you want, e.g. http://hangtarolo.hu/math.html The result can be embedded via stackedit.js: https://openbase.io/js/stackedit/documentation

    On the other hand, there are suggestions for the combined use here: https://hiltmon.com/blog/2017/01/28/mathjax-in-markdown – but for me it did not work. Maybe markdown2 can be fine, but it is only for Mac.

    Or a third possibility: You can use both notation in the same file, but not in same row, as it is in https://hangtarolo.hu/math.php (The php code is here: https://hangtarolo.hu/math.txt – the php task is only to replace line breaks to "\n".)