[feature request] MathJax support

[ahmadihamid]

Can we have MathJax integrated directly to our theme?

[daattali]

I haven't used MathJax myself before so I'm not sure what's involved. Do you have an example of how to use it?

…

--- Dean Attali President & CEO AttaliTech Ltd http://attalitech.com

On 10 April 2017 at 08:50, ahmadihamid ***@***.***> wrote: Can we have MathJax integrated directly to our theme? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#195>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA6IFEXRld-GnBhLDsEPv60dVsjnfEfLks5ruiWZgaJpZM4M4vFE> .

[ahmadihamid]

http://docs.mathjax.org/en/latest/index.html

[ahmadihamid]

Sorry for the double post but here the example :
https://github.com/mathjax/MathJax/blob/master/test/sample-tex.html

For now I need to write html in my post to render math formula

[daattali]

Is your question about how to use mathjax in general, in any html or jekyll page? Or do you know how to use it in general and are just having trouble incorporating it with this theme? I'd love to help with the latter but I'd need to see what you came up with first :)

…

On Apr 10, 2017 3:58 PM, "ahmadihamid" ***@***.***> wrote: Sorry for the double post but here the example : https://github.com/mathjax/MathJax/blob/master/test/sample-tex.html For now I need to write html in my post to render math formula — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#195 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA6IFCFv-p33d0y19qD6x5Q9H-ofmeLlks5ruonogaJpZM4M4vFE> .

[ahmadihamid]

Ok, I know how to use it in general but haven't tried to integrate it to this theme, and I hope you could,
😁

[daattali]

I don't have time to go through the full documentation as I'm busy with many projects, but does it simply need to have the javascript file loaded? If so, then you can use the js or ext-js YAML parameters on the page that you want https://github.com/daattali/beautiful-jekyll#yaml-front-matter-parameters

Simply pass in the URL for the mathjax javascript library

[ahmadihamid]

Wow! It just works, thanks.

[mching]

If you use a lot of math notation, it might also work to include the script from the MathJax documentation in the _includes/head.html file. It's not as elegant or efficient as the solution above but it does make it automatic for every page.

<script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

[daattali]

@mching you can also set ext-js YAML parameter in the layout file if you want it to be automatic

[bakera1]

Tried the head.html update and worked pretty well for me.

[ComFreek]

I spent a few minutes figuring out how to embed math. I hope others will find this useful, enjoy 😄

---

1 Minute Guide to Embed Math

1. Get the CDN link for the MathJax version/variant you desire, e.g. https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML
   
   Despite the given version 2.7.5, this always references the latest version! Learn more at MathJax' getting started guide.

2. Open ./_config.yml and add the ext-js key to the default YAML values for a post:

# Default YAML values (more information on Jekyll's site)
defaults:
  -
    scope:
      path: ""
      type: "posts"
    values:
      layout: "post"
      comments: true  # add comments to all blog posts
      social-share: true # add social media sharing buttons to all blog posts
      ext-js: "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"

3. Use $$ ... $$ for display math in your posts!
   
   I cannot get inline math with \( ... \) working. Possibly, \ is stripped in Markdown (?). In any case, $ ... $ does not work by default as it's disabled by MathJax; again, learn more at MathJax' docs on putting mathematics on a web page.

[VincentTam]

@ComFreek Thanks for quick guide. For the convenience of future readers who are used to LaTeX's single $ for inline math, here's a minimal working sample to get things work.

<!DOCTYPE html>
<html>
<head>
<title>MathJax TeX Test Page</title>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript" async
  src="https://example.com/mathjax/MathJax.js?config=TeX-AMS_CHTML">
</script>
</head>
<body>
When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</body>
</html>

[daattali]

FYI this thread has been linked from the README FAQ section