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
Related
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.
I have a marketplace/web application with thousands of static single page apps.
Wish to add a Web App Manifest for each single page app in the <head> </head> tag of their corresponding stem_url (The {root}/index.html for all the urls of a given SPA).
The standard method:
<link rel="manifest" href="/manifest.json">
…does not seem like a good way to go forward because this would mean thousands of manifest.js files being dumped into the /public folder (it's a rails app!) and it would eventually make the app/assets compilation job very heavy as this number goes up.
Is there a way we could inline manifest json just like we do the style tags:
<style>
body { // style here }
…
</style>
An equivalent of manifest declaration:
<manifest>
{
"name": "HackerWeb",
"short_name": "HackerWeb",
…
}
</manifest>
You can inline the json by using a data:url. So instead of the standard
<link rel="manifest" href="/manifest.json">
it would be
<link rel="manifest" href='data:application/manifest+json,{ "name": "theName", "short_name": "shortName", "description": "theDescription"}' />
I wanted to inline it too and tried it just now. It works
Improved answer
As mentioned by RADXack, this works great
<link rel="manifest" href='data:application/manifest+json,{ "name": "theName", "short_name": "shortName", "description": "theDescription"}' />
But what if you want to add more attributes like the colors or start_url?
Then on your server you could add:
const manifest = JSON.stringify({
name: "React Doc",
short_name: "React"
start_url: "/",
background_color: "#fffff",
theme_color: "#ff00ff",
display: "standalone",
});
const HTML = `<!DOCTYPE html>
<html lang="en">
<head>
<link rel="manifest" href='data:application/manifest+json,${encodeURIComponent(manifest)}' />
...rest of your code`
encodeURIComponent will convert all special characters for you.
This way, you are sure that whatever the data being passed is, it'll be URL friendly
The main thing to remember is that the manifest request is still just a network request.
So you can Add Query Params
/manifest.json?title=Hello&icon=.....
Or you could do:
/manifest.json?appId=1234
OR you can just use a pretty URL:
/manifest/1234
Then on your server you can return the JSON that you want.
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 -
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.
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.