Стилизация MathJax
Я так смущен этим. Я искал учебники, но не могу найти то, что имеет для меня много смысла, как установить класс CSS для вывода MathJax? Я просто хочу сделать шрифт большим. Текущий ток:
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
В нижней части моей страницы. Renders TEX отлично, но я бы хотел установить CSS на нем!
В идеале я хотел бы передать ему имя класса CSS.
Ответы
Ответ 1
Вы пытались установить параметр scale
в своем выходном процессоре? См. руководство. Вы можете установить параметры конфигурации либо в файле, либо в строке; эта страница описывает процесс.
В основном, вы включаете короткий фрагмент кода JavaScript на своей странице или в файл, который вы включили. Пример:
<script type="text/javascript">
MathJax.Hub.Config({
extensions: ["tex2jax.js"],
"HTML-CSS": { scale: 100}
});
</script>
Кроме того, вы можете просто объединить вещь в div
с применяемым классом CSS. Посмотрите источник на на этой странице.
<div style="font-size: 500%;">
\[
g\frac{d^2u}{dx^2} + L\sin u = 0
\]
</div>
Уравнение просто наследует размер шрифта.
Ответ 2
Обновление:
Как я теперь узнал, не используйте CSS для стилизации TeX в mathjax, это может привести к проблемам с отображением. См. Здесь: https://github.com/mathjax/MathJax/issues/925
Решение состоит в использовании Javascript с блоком Config:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
"HTML-CSS": { scale: 200, linebreaks: { automatic: true } },
SVG: { linebreaks: { automatic:true } },
displayAlign: "left" });
</script>
Устаревшие:
Я загружаю MathJax динамически с помощью JQuery getScript(), только если на странице есть $$
. В этом случае решение выше не работает.
Обходной путь - установить CSS после загрузки:
$(".MathJax").css("font-size","150%");
Вместо размера шрифта в %
вы также можете использовать px
или em
.
Если это не работает, используйте! important для ваших стилей CSS. Например:
.MathJax, .MathJax_Display {
text-align: left !important;
font-size: 130% !important;
}