63

I want to write some complex mathematical equation in my web page. Is there any plugin or anything for this?

anan_xon
  • 1,102
  • 1
  • 11
  • 21

7 Answers7

54

Try mathjax http://www.mathjax.org/ . I personally find it very good.

mathematician1975
  • 21,161
  • 6
  • 59
  • 101
26

For complex equations, MathJax is the current practical solution. MathML is a more structural approach in principle, but browser support is rather limited and often of questionable quality.

However, complexity is relative. To some people, E = mc² or ∂/∂t + v ⋅ ∇ might be complex, and such constructs can be written fairly well using just HTML with some help from CSS; see my page Math in HTML (and CSS).

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
6

Quick example using mathjax:

Load the cdn: (make sure to specify a ?config= option as it doesn't come included in the recommended cdn link - default works just fine):

<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=default'></script>

Then, inside your html simply wrap the equation inside $$ {equation here} $$

e.g. $$ {J(\theta) =\frac{1}{2m} [\sum^m_{i=1}(h_\theta(x^{(i)}) - y^{(i)})2 + \lambda\sum^n_{j=1}\theta^2_j} $$

And it should show up as an equation just fine on the page.

Jared Wilber
  • 6,038
  • 1
  • 32
  • 35
5

If you don't want to implement any JavaScript in your HTML, you can use CodeCogs' equation editor tool (http://www.codecogs.com/latex/about.php).

It's really easy to use. All you do is use the button interface to write your equation and an HTML image link is immediately generated. When you run your HTML the image will be generated on CodeCogs' servers and implemented in your site. It's a very comfortable tool.

twernt
  • 20,271
  • 5
  • 32
  • 41
deckele
  • 4,623
  • 1
  • 19
  • 25
3

You could try this. Kind of out of date so not sure how it'll work:

http://www.w3.org/Math/

For Firefox, they have a pretty descriptive article on MathML

aug
  • 11,138
  • 9
  • 72
  • 93
3

I know this is a bit late. But would like to mention about jqMath which I have personally found easier and much lightweight than MathJax.

Find the details here : https://mathscribe.com/author/jqmath.html

The files can be downloaded from https://mathscribe.com/downloads/mathscribe-win-0.4.6.zip

To use this,

  1. Unzip the downloaded file
  2. find the files jqmath-etc-0.4.6.min.js and jqmath-0.4.3.css, and include them in your html
  3. Make sure your html have <meta charset="utf-8"> in the <head> section.
  4. Also include jQuery before using these.

Now you can write mathematical equations and formulae in your html or web page.

Visit the above link to know more about how to write mathematical formulae using jqMath.

Jishad
  • 151
  • 4
  • 14
3

You can use KaTeX https://katex.org/. Just copy and paste the contents in head tag and paste it into your html file. inside body enter latex inside \(latex code here\). You can view it on GitHub It is faster than MathJax. I refered from javascript Katex not renderingYou can view it on Github. it works well with major browser below is a example code with autorendering option. 

<!DOCTYPE html>
<!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly -->
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/katex.min.css" integrity="sha384-D+9gmBxUQogRLqvARvNLmA9hS2x//eK1FhVb9PiU86gmcrBrJAQT8okdJ4LMp2uv" crossorigin="anonymous">

    <!-- The loading of KaTeX is deferred to speed up page rendering -->
    <script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/katex.min.js" integrity="sha384-483A6DwYfKeDa0Q52fJmxFXkcPCFfnXMoXblOkJ4JcA8zATN6Tm78UNL72AKk+0O" crossorigin="anonymous"></script>

    <!-- To automatically render math in text elements, include the auto-render extension: -->
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/contrib/auto-render.min.js" integrity="sha384-yACMu8JWxKzSp/C1YV86pzGiQ/l1YUfE8oPuahJQxzehAjEt2GiQuy/BIvl9KyeF" crossorigin="anonymous"
        onload="renderMathInElement(document.body);"></script>
  </head>
  <body>
      <p>\(x^2 = \sqrt{y}\)</p><br>
      <p style="color:blue;font-size:25px;">\(\frac {-b\pm\sqrt{b^2 - 4ac}}{2a}\)</P>
  </body>
</html>