CODEWITHSUNDEEP
htmlcssmathjax
hasanghaforian
hasanghaforian

Reputation: 14022

HTML border around MathJax formula

I want to draw a red border around output of MathJax. So I used this code:

<html>
  <head>
    <script type="text/x-mathjax-config">
    MathJax.Hub.Config({
    extensions: ["tex2jax.js","TeX/noUndefined.js"],
    jax: ["input/TeX","output/HTML-CSS"],
    tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]},
    TeX: {extensions: ["AMSmath.js","AMSsymbols.js"]}
    });
    </script>
    <script type="text/javascript" src="/path/to/MathJax.js">
    </script>
  </head>
  <body>
    <style>
    p1 {
      border: 5px solid #FF0000;
    }
    </style>
    <p1>
      <p>$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$$
      </p>
    </p1>
  </body>
</html>

But the result has two vertical red lines at the left side of the page, instead of red border:

enter image description here

How I can solve this problem?

Note:
I do not want to use MathJax styles.

Upvotes: 1

Views: 723

Answers (1)

ScaisEdge
ScaisEdge

Reputation: 133360

Try use class for p1

style 

.p1 {
  border: 5px solid #FF0000;
  width: 90%;
  min-width: 300px;
}

html 

<p class='p1'>
      $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$$
</p>

Upvotes: 2

Related Questions