Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[feature request] MathJax support #195

Closed
ahmadihamid opened this issue Apr 10, 2017 · 15 comments
Closed

[feature request] MathJax support #195

ahmadihamid opened this issue Apr 10, 2017 · 15 comments

Comments

@ahmadihamid
Copy link

ahmadihamid commented Apr 10, 2017

Can we have MathJax integrated directly to our theme?

@daattali
Copy link
Owner

daattali commented Apr 10, 2017

@ahmadihamid
Copy link
Author

ahmadihamid commented Apr 10, 2017

@ahmadihamid
Copy link
Author

ahmadihamid commented Apr 10, 2017

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
Copy link
Owner

daattali commented Apr 10, 2017

@ahmadihamid
Copy link
Author

ahmadihamid commented Apr 10, 2017

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
Copy link
Owner

daattali commented Apr 11, 2017

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
Copy link
Author

ahmadihamid commented Apr 11, 2017

Wow! It just works, thanks.

@mching
Copy link

mching commented Jun 1, 2017

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
Copy link
Owner

daattali commented Jun 1, 2017

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

@bakera1
Copy link

bakera1 commented Nov 18, 2018

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

@ComFreek
Copy link

ComFreek commented May 21, 2019

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"
  1. 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
Copy link
Contributor

VincentTam commented Jul 2, 2019

@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
Copy link
Owner

daattali commented Jul 2, 2019

FYI this thread has been linked from the README FAQ section

baihuqian added a commit to baihuqian/baihuqian.github.io that referenced this issue Jul 31, 2019
1aaronscott added a commit to 1aaronscott/1aaronscott.github.io that referenced this issue Aug 2, 2019
@YoniChechik
Copy link

YoniChechik commented Sep 25, 2019

https://stackoverflow.com/a/46765337/4879610

The easiest solution in my opinion

@rafisics
Copy link

rafisics commented Mar 25, 2021

Hi, I am facing problem activating mathjax in a post in my github page.
I have done the following things.

  • Added the ext-js key in the ./_config.yml:
# 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/3.0.0/es5/latest?tex-mml-chtml.js"  
  • Added these lines to _includes/head.html:
  <!-- for mathjax support -->
  {% if page.usemathjax %}
  <script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      tex2jax: {
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
        inlineMath: [['$','$']]
      }
    });
  </script>
  <script type="text/javascript" id="MathJax-script" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.0.0/es5/latest?tex-mml-chtml.js"> </script>
  {% endif %}
  • Added usemathjax: true in the YAML front matter in the markdown file of that post.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants