Search code examples
javascriptruby-on-railsmathjax

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>
Solution

  • 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.