title: MathJax and rendering of brackets
body: <p>I am working with a mixture of LaTeX and calculator math input and MathJax output on a website. I have been trying to figure out how to get MathJax to display the brackets around expressions like 5^(x) and A/(2*pi*h + 2*pi).</p>
  
  <p>The ASCIIMath input assumes () to be grouping when a user has ^ or / in their input and so does not show the brackets. These brackets need to be escaped using (( and )). This then affects if a user inputs mismatched brackets. Since the site this is on is aimed at teaching kids maths it is important they see what they are typing in clearly.</p>
  
  <p>Does anyone have some sort of solution for me? I have currently got an extension to MathJax (written in plain JS) that converts some of the input to more correct ASCIIMath that can then be processed correctly.</p>
  
  <p>The best MWE I can give is given below in my edit to this post.</p>
  
  <p><strong>Edit</strong>
  I have the following JS code that is almost working but produces unexpected results in a few cases:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>filterExponentBrackets: function (str) {
        if ((/\^|\/|sqrt/g).test(str)) {
          if ((/\(|\)/g).test(str)) {
            var openingBrackets = str.split("(").length-1;
                closingBrackets = str.split(")").length-1;
                startString = str.substr(0, str.indexOf('('));
                midString = str.substr(str.indexOf('('), str.indexOf(')'));
                endString = str.substr(str.indexOf(')') + closingBrackets);
            if (openingBrackets === closingBrackets) {
                str = startString + '(' + midString + ')' + endString;
            } else {
              if (openingBrackets &lt; closingBrackets) {
                // Some issues here around no opening and some closing
                str = startString + '(' + midString + ')' + endString;
              } else {
                // Think a bit more about this case, need to not show the frac or sqrt or ^
                str = str;
              }
            }
          }
        }
    return str;
    }</code></pre>
  </div>
  </div>
  </p>
  
  <p>And the following mocha tests:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>describe('Mismatched bracket fixes', function() {
      it('Fractions with extra closing brackets', function () {
        assert.equal(mathsFilters.filterExponentBrackets("A/(2*pi*h+2*h))"), "A/((2*pi*h+2*h)))")
      });
  
      it('Fractions with extra opening brackets', function () {
        assert.equal(mathsFilters.filterExponentBrackets("A/((2*pi*h+2*h)"), "A/((2*pi*h+2*h)))")
      });
  
      it('Fractions with equal opening and closing brackets', function () {
        assert.equal(mathsFilters.filterExponentBrackets("A/(2*pi*h+2*h)"), "A/((2*pi*h+2*h))")
      });
  
      it('Fractions with only closing brackets', function () {
        assert.equal(mathsFilters.filterExponentBrackets("A/2*pi*h+2*h)"), "A/2*pi*h+2*h)")
      });
  
      it('Fractions with only opening brackets', function () {
        assert.equal(mathsFilters.filterExponentBrackets("A/(2*pi*h+2*h"), "A/(2*pi*h+2*h")
      });
    });</code></pre>
  </div>
  </div>
  </p>
  
  <p>The extra opening brackets and cases where there are only opening or only closing brackets are not quite right. For only opening or closing brackets the fraction should be A/2 stuff. Extra opening brackets needs to somehow show those extra brackets.</p>