ARTLUNG LAB Share

July 2024. Updated February 2025.

MathML Test Page now with MathJax / LaTeX

I first got curious to experiment with MathML during an HWC Europe meeting.

This test is based on The Problem, an interview question we used at a former employer.

This is an image:

This is MathML:

Given a sequence of integers A 0 ... A n
find i, j such that ∑ x = i j Ax is maximized.

Source Code of the MathML

    <article class="sample">
        Given a sequence of integers
        <math>
            <mrow>
                <msub>
                    <mi>A</mi>
                    <mn>0</mn>
                </msub>
                <mo>...</mo>
                <msub>
                    <mi>A</mi>
                    <mi>n</mi>
                </msub>
            </mrow>
        </math>
        <br/> find i, j such that

        <math xmlns="http://www.w3.org/1998/Math/MathML">
            <mstyle displaystyle="true">
                <munderover>
                    <mo>&sum;</mo>
                    <mrow>
                        <mi>x</mi>
                        <mo>=</mo>
                        <mi>i</mi>
                    </mrow>
                    <mi>j</mi>
                </munderover>
            </mstyle>
        </math>

        A<sub><i>x</i></sub> is maximized.
    </article>

Using MathJax

Thanks to the participants of Front End Study Hall #022 for helping clarify the uses of MathML, LaTeX

Given a sequence of integers $$ A_{0} \dots A_{n} $$
find i, j such that $$ \sum^{j}_{x=1} A_{x} $$ is maximized.

MathJax Source Code

<article class="sample">
  Given a sequence of integers
    <span style="display: inline-block;">$$ A_{0} \dots A_{n} $$</span>
  <br/>
  find i, j such that <span style="display: inline-block;">$$  \sum^{j}_{x=1} A_{x} $$</span>
  is maximized.
</article>

<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
  MathJax.Hub.Config({
    tex2jax: {
      displayMath: [['$$', '$$'], ['\\[', '\\]']],
      processEscapes: true
    }
  });
</script>

Resources