[feature request] MathJax support
ahmadihamid opened this issue · comments
Can we have MathJax integrated directly to our theme?
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
Ok, I know how to use it in general but haven't tried to integrate it to this theme, and I hope you could,
😁
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
Wow! It just works, thanks.
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>
@mching you can also set ext-js
YAML parameter in the layout file if you want it to be automatic
Tried the head.html update and worked pretty well for me.
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
-
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 version2.7.5
, this always references the latest version! Learn more at MathJax' getting started guide. -
Open
./_config.yml
and add theext-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"
- 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.
@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>
FYI this thread has been linked from the README FAQ section
https://stackoverflow.com/a/46765337/4879610
The easiest solution in my opinion
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.
7 years too late, but I finally decided to officially add mathjax support. You can use the mathjax
YAML parameter now