My website based on Jekyll does not work with MathJax - jekyll

My problem
So you can have a look on my problem, see my blog post in this link:
https://matheusrabetti.github.io/statistics/bayesian-introduction/
In the end of the post you can see this - "This can be represented with a beta distribution with parameters and ( \beta=219):"
Here my markdown file have the code: This can be represented with a beta distribution with parameters $$\alpha=81$$ and \( \beta=219\):
I was expecting to see the Tex formula, when using $$, on my website and it's returning a blank space.
My path until know
In my _includes folder - check my github repository here https://github.com/MatheusRabetti/matheusrabetti.github.io - I have the following code in the _scripts.html file:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$','$'], ['\\(','\\)']],
displayMath: [ ['$$','$$'], ['\\[','\\]'] ],
processEscapes: true
}
});
</script>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
This javacript code has been in the _header.html and many other files.
I'm using the interpreter:
markdown: kramdown
My _layout posts files are including the _scripts.html:
{% include _scripts.html %}
</body>
</html>
Where my page is blank, inspecting the html page I found that:
The mean is
<script type="math/tex">
\frac{\alpha}{\alpha + \beta} = \frac{81}{81+219} = 0.270
<\script>
As you can see I have little knowledge on Jekyll or Octopress and I will give more informations as the help comes, because I don't know what's the problem and what can help you.

Related

Mathjax in HTML: Cannot select equations

I am using Mathjax to display equations in an HTML. This is my code:
<!DOCTYPE html>
<html>
<head>
<title>Math in HTML</title>
<meta charset="utf-8">
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
},
svg: {
fontCache: 'global'
}
};
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-mml-chtml.js"></script>
</head>
<body>
<h1>Mathematic equations</h1>
<p>I cannot select this equation:
$$\intop_0^1f(x)dx=\pi$$
nor this one $x^2 + 3x - 2 = \zeta$.
</p>
</body>
</html>
The problem is that I cannot select the equations. Previously I was using this in the header:
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true
}
});
</script>
which produces "selectable equations" but raises a deprecation warning. (I tried to insert another snippet with this working example but StackOverflow complained it was too much code.)
I cannot find out how to convert the equations into "selectable".
You are correct that MathJax output can't be copied directly from the page in version 3. Version 3 uses CSS with content properties in order to insert the characters into the page, and content text is not selectable in the page.
In general, copying MathJax output would only be reliable with the simplest of expressions (nothing involving super- or subscripts, fractions, roots, arrays, multi-character stretchy delimiters, accents, etc.), so this was never a supported feature for MathJax.
On the other hand, it would be possible for MathJax to insert the characters directly rather than use content CSS, and an extension to implement that would be possible. Example code for doing that is available in the MathJax User's Forum.

Nu HTML Checker reports mysterious script tag

This seems to be a common problem: Stray start tag returned by the Nu HTML Checker. My HTML reads </body>, while the Checker says </body>↩<script>'undef. The only usage of <script> is as follows:
<script src="Sternheimer.js"></script>
<!--<script src="../jquery-2.1.4.min.js"></script>-->
<script src="../jquery-3.1.1.min.js"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$', '$']]
},
menuSettings: { inTabOrder: false }
});
</script>
<script type="text/x-mathjax-config">
if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
MathJax.Hub.Config({
"HTML-CSS": { scale: 90 }
});
}
</script>
<script src="../MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script src="initializeForm.js"></script><!--run on page load-->
<script src="formFields.js"></script><!--reveal additional fields-->
<script src="../smoothScroll.js"></script>
<script src="../backToTop.js"></script>
... which is of course inside <head>. SO search results say the Checker could be misinterpreting comments, which I've checked by getting rid of <!--<script src="../jquery-2.1.4.min.js"></script>--> but the error persists. My markup is always validated using the W3C extension in Brackets. Please see the Nu result here. Any help resolving this mystery will be appreciated.
Update | Viewing the source on my hosting's server, I discovered the following was appended to my original markup: <script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'}),_trfd.push({'ap':'cpsh'},{'server':'a2plcpnl0819'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/tcc/tcc_l.combined.1.0.6.min.js'></script>. Mystery solved, and this appears to be fixable. Thank you for your help.
It is not a bug. I can type curl http://handcrafted.codes/Sternheimer/Sternheimer.htm and see the script tag after the body end tag.
Presumably you are using hosting which injects snoop code at the end of HTML documents.

Blog with mathjax seen on a cellphone

I'm using mathjax in my blogspot blog and it works well when seen in a computer, but formulas don't transform when seen on a cellphone. I found this other blogspot blog where its formulas can be seen on a cellphone. Why? How can I make my blog transform formulas when seen on a cellphone too?
This is happening because the Mathjax script (as seen below) is not loading in the mobile template.
<script src='//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML,http://flengyel.github.io/mathjaxconfig.js,http://sonoisa.github.io/xyjax_ext/xypic.js' type='text/javascript'>
MathJax.Hub.Config({
extensions: ["tex2jax.js"],
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [
['$', '$'],
["\\(", "\\)"]
],
displayMath: [
['$$', '$$'],
["\\[", "\\]"]
],
},
"HTML-CSS": {
availableFonts: ["TeX"]
}
});
</script>
To make it work on Mobile templates, you will have to enable Custom mobile template by going into Theme > Gear Icon > Selecting Custom from the Choose mobile theme dropdown, Refer to the image below -

Convert html containing mathjax markups to pdf

I have come across a tool called princexml that can convert html+css into pdf beautifully (see this video). With this it's even possible to write a PhD thesis using entirely html+css and get a nice pdf output in the end. But it seems it does not handle mathjax well. I guess this is because the mathjax part much be rendered in a browser first.
So I have a simple html file like this:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>test math</title>
<style type="text/css">
</style>
<script src='http://cdn.mathjax.org/mathjax/latest/MathJax.js' type='text/javascript'>
MathJax.Hub.Config({
HTML: ["input/TeX","output/HTML-CSS"],
TeX: { extensions: ["AMSmath.js","AMSsymbols.js"],
equationNumbers: { autoNumber: "AMS" } },
extensions: ["tex2jax.js"],
jax: ["input/TeX","output/HTML-CSS"],
tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
processEscapes: true },
"HTML-CSS": { availableFonts: ["TeX"],
linebreaks: { automatic: true } }
});
</script>
</head>
<body>
$x^2 + y^2 = 1$
</body>
</html>
After conversion using princexml:
prince --javascript x.html -o x.pdf
the equation is rendered verbatim in the pdf.
Is there a way to make this work?
This is because princexml doesn't yet support setTimeout method which Mathjax uses for its asynchronous functions. There are two workarounds:
Render your html in the browser such as Chrome first. Get the entire document (not the source but actual rendered document) saved into html file and then use it as input to prince. You can get entire rendered document from browser javascript console.
Second method is to use a headless browser like phantomjs. See also
https://web.archive.org/web/20150503191319/http://www.lelesys.com/en/media/technology/phantomjs-as-screen-capture-to-generate-image-pdf-files.html

How to use mathjax with mustachejs template

I am using mathjax for display mathematics formula.
It works fine when I write an example like this in my html file:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: { inlineMath: [['$','$'],['\\(','\\)']] }
});
</script>
....
<div id="problems">
\begin{equation}
\frac{n!}{k!(n-k)!}
\end{equation}
</div>
Let's suppose I want to write the formula in a json file.
I load the formula from the json file by using mustache.js
var html = Mustache.to_html(tpl, data);
$( document ).ready(function() {
$('#problems').html(html);
});
It displays the LaTeX Symbols/Script instead of the Math Symbol.
Any idea?
You need to call MathJax.Hub.Queue(["Typeset",MathJax.Hub,"problems"]) after setting the HTML for the problems div. See the MathJax Documentation for details.