JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<p>The <code>\fixd</code> macro overrides the MathJax <code>Variable</code> command so the letter <em>d</em> is always written upright.</p>
<code>\[ \fixd{ \int x \, dx} = d. \]</code>
<p>\[ \fixd{ \int x \, dx} = d. \]</p>

<p>The command takes an optional argument specifying which letter to fix.</p>
<code>\[ \fixd[i]{ 2 + 4i } \]</code>
<p>\[ \fixd[i]{ a + bi = c + di } \]</p>

<p>The <a href="https://github.com/mathjax/MathJax/blob/master/unpacked/jax/input/TeX/jax.js">source of the TeX input processor</a> is the best way of finding which commands are defined and which techniques to use.</p>
<p>There's <a href="https://github.com/mathjax/MathJax-docs/wiki/Tutorial-Extension-Authoring">a tutorial on writing extensions</a> in the MathJax docs wiki.</p.

JavaScript

// This extension will add a command \fixd which makes sure the letter 'd' is upright, to denote the infinitesimal.
// This is just an example of how to define a javascript function which meddles with TeX.
// Really, the best way to do such things is with a normal TeX macro.

// This hook is fired when the TeX code is ready. At that point, we can add things to it.
MathJax.Hub.Register.StartupHook("TeX Jax Ready", function() {
    
    var TEX = MathJax.InputJax.TeX;
    
    // TEX.Definitions stores, amazingly enough, the definitions of TeX macros and characters.
    // We can add to it with the .Add method.
    TEX.Definitions.Add({
        macros: {
            'fixd': 'FixDerivative'    // add a macro \fixd which invokes the FixDerivative function.
        }
    });

    // keep track of the original definition of the Variable command, because we're going to wrap round it.    
    var oldVariable = TEX.Parse.prototype.Variable;
    var MML = MathJax.ElementJax.mml;
    
    // the .Augment method adds methods to the TeX parser, which can be used by macros or other methods.
    TEX.Parse.Augment({
        
        // Parser function called 'FixDerivative'. 
        // `name` is the name of the TeX command used to invoke the function.
        // The function can do anything to the parser stack, such as add state information, or produce output MathML.
        'FixDerivative': function(name) {
            // get an argument in square brackets, i.e. the x in \fixd[x]{...}
            // if there's no argument, letter will be `undefined`.
            var letter = this.GetBrackets(name) || 'd';
            
            // get an argument in curly brackets (or just the next token) - this is the TeX the function should apply to.
            var tex = this.GetArgument(name);

            // Store the letter to fix in the stack environment - any future commands will be able to look at this.            
            var fixd = this.stack.env.fixd;
           ...