Common HTML Tags such as <b>, <i>, <ul>, <ol>, <li> not being rendered.

[MustangMath-Tournament]

Replace the text below with the details of the issue you are facing.
DO NOT simply erase the form and type a free-form response.

Issue Summary

I have a working implementation of MathJax for all my math typsetting needs, but for some reason, some basic HTML tags don't work. Of note, <b> doesn't work but <strong> does, <i> doesn't work but <em> does, and none of the listing tags are working (<ul>,<ol>,<li>).

Screenshot of the issue

Technical details:

• MathJax Version: 2.7.7
• Client OS: (e.g., Windows )
• Browser: (Multiple (Chrome, Edge))

I am using the following MathJax configuration (within Svelte):

<script>
    import { onMount, afterUpdate } from 'svelte';

    export let math = '';

    let container;
    let mathJaxScriptLoaded = false;

    function renderMath() {
        if (window.MathJax && window.MathJax.Hub) {
            if (container) {
                container.innerHTML = math;
                window.MathJax.Hub.Queue(["Typeset", window.MathJax.Hub, container]);
            }
        }
    }

    function initMathJax() {
        if (window.MathJax) {
            return Promise.resolve();
        }

        return new Promise((resolve, reject) => {
            const script = document.createElement('script');
            script.src = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML';
            script.async = true;
            script.onload = () => {
                window.MathJax.Hub.Config({
                    tex2jax: {inlineMath: [['$', '$'], ['\\(', '\\)']], displayMath: [['$$', '$$'], ['\\[', '\\]']], processEscapes: true},
                    TeX: {extensions: ["AMSmath.js", "AMSsymbols.js"]},
                    menuSettings: {context: "browser"},
                });
                resolve();
            };
            script.onerror = (err) => reject(err);
            document.head.appendChild(script);
        });
    }

    onMount(async () => {
        if (!mathJaxScriptLoaded) {
            try {
                await initMathJax();
                mathJaxScriptLoaded = true;
            } catch (err) {
                console.error("MathJax script loading error: ", err);
            }
        }
        renderMath();
    });

    afterUpdate(() => {
        renderMath();
    });
</script>

<div bind:this={container}></div>

and loading MathJax via

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"></script>

[dpvc]

I don't know the svelte library, so there could be an interaction with MathJax, but I would be very surprised if what you are experiencing were MathJax's fault. I don't see how that would be the case. Can you say what has lead you to think that MathJax is the culprit?

One thing you might do is to use your browser's console to investigate the DOM tree and see if those elements are actually in the DOM that you are viewing. If not, it may be that svelte is preventing their use in some way.

Also, if you are developing new code, why are you using such an old version of MathJax (the current version is 3.2.2, with 4.0 out in beta release), and even the most current v2 is 2.7.9, not 2.7.7. Why not use a more current version?