siv rj siv rj - 1 year ago 68
Javascript Question

how to display mathematical symbols in my html page

Hi i am using Rails, Ckeditor. In ckeditor mathematical symbols like summation, pi, are displaying properly. I am saving them to database. While displaying them, proper format is not displaying.

I need some solution. Thank you.

In editor it viewed like this:

x=−b±√2a ​


But i got this format when it saved.

\(x = {-b \pm \sqrt{2a}\)


I need to display in below format in html page.

x=−b±√2a ​


Solution is:

<head>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['\\(','\\)']]}});
</script>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
</head>

<body>
\(x = -b \pm \sqrt{2a}\)
</body>

Answer Source

It look like Ckeditor is saving mathematical symbols in LaTeX. You can use mathjax-rails to render LaTeX for the web.

A barebones usage of Mathjax would be this:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({tex2jax: {inlineMath: [['\\(','\\)']]}});
    </script>
    <script type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
    </script>
  </head>
  <body>
    \(x = -b \pm \sqrt{2a}\)
  </body>
</html>

See this plnkr to view the output.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download