Styling MathJax
I'm so confused about this开发者_运维技巧. I've searched for tutorials but can't find any that make much sense to me, how do I set a CSS class for MathJax output? I just want to make the font big. The current include is:
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
At the bottom of my page. Renders TEX fine, but I'd like to set some CSS on it!
Ideally I'd like to pass a CSS class name to it.
Have you tried setting the scale
option in your output processor? See the manual. You can set the configuration options either in a file or inline; this page covers the process.
Basically, you include a short snippet of JavaScript in your page, or in a file you include. Example:
<script type="text/javascript">
MathJax.Hub.Config({
extensions: ["tex2jax.js"],
"HTML-CSS": { scale: 100}
});
</script>
Also, you can simply surround the thing in a div
with a CSS class applied. View the source on this page.
<div style="font-size: 500%;">
\[
g\frac{d^2u}{dx^2} + L\sin u = 0
\]
</div>
The equation will simply inherit the font size.
Update:
As I have learned now, do not use CSS to style TeX in mathjax, it could lead to display problems. See here: https://github.com/mathjax/MathJax/issues/925
Solution is to use Javascript with the Config block:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
"HTML-CSS": { scale: 200, linebreaks: { automatic: true } },
SVG: { linebreaks: { automatic:true } },
displayAlign: "left" });
</script>
Obsolete:
I am loading MathJax dynamically with JQuery's getScript(), only in case there are $$
on the page. In this case the solution above does not work.
The workaround is to set the CSS after the loading took place:
$(".MathJax").css("font-size","150%");
Instead of the font size in %
you can also use px
or em
.
If this does not work, use !important for your CSS styles. For instance:
.MathJax, .MathJax_Display {
text-align: left !important;
font-size: 130% !important;
}
精彩评论