Search code examples
javascripthtmlreferenceequationmathjax

MathJax 2.7.7 - \eqref color


I would like to change the color of MathJax links that were created by \eqref{} tags to match the color scheme of my site. How can I achieve this preferably WITHOUT additional CSS?

I'm using MathJax 2.7.7 with SVG outputs and my current config looks like the following:

<!-- Adding MathJax -->
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        extensions: ["tex2jax.js", "TeX/AMSmath.js", "TeX/AMSsymbols.js"],
        jax: ["input/TeX", "output/SVG"],
        tex2jax: {
          inlineMath: [ ['$','$'], ["\\(","\\)"] ],
          displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
          processEscapes: true
        },
        TeX: {
          equationNumbers: {
            autoNumber: "AMS"
          }
        },
        SVG: {
          linebreaks: {
            automatic:true
          },
          font: "Latin-Modern"
        },
        menuSettings: {
          zoom: "Click"
        },
        MathZoom: {
          styles: {
            "#MathJax_Zoom": {
              "background-color": "#040A13"
            }
          }
        }
      });
    </script>
    <script type="text/javascript" async
      src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/latest.js?config=default">
    </script>

Solution

  • After looking for this all day and posting a question on StackOverflow as my last chance, I accidentally found the answer in the source code of the MathJax SVG output style's jax.js file, which happens to be available online in numerous sources.

    The color of the references when using the SVG output style is determined in this by the

    ".mjx-svg-href": {
      fill: "blue", stroke: "blue"
    }
    

    element. You have to style this element in your SVG block in your MathJax configuration like the following by changing the two color tags below appropriately. Eg. you can change color of the \eqref{} links to red as follows:

    <!-- ... mathjax config above ... -->
    SVG:
      styles: {
        svg-href": {
          fill: "red", stroke: "red"
        },
      },
    },
    <!-- ... mathjax config below ... -->