MathJax автоматический разрыв строки не работает - PullRequest
Новая
       3

MathJax автоматический разрыв строки не работает

0 голосов
/ 10 мая 2019

Я использую MathJax для отображения Math на моей веб-странице.Вот как я загружаю и настраиваю его: 

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    extensions: ["tex2jax.js"],
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
      processEscapes: true
    },
    "HTML-CSS": { fonts: ["TeX"], linebreaks: { automatic: true } }
  });
</script>
<script src="//mathjax.rstudio.com/latest/MathJax.js?config=TeX-MML-AM_CHTML"></script>

Этот скрипт помещается как последняя запись внутри <body>.Перед этим у меня есть какое-то (длинное) математическое уравнение, например: 

<body>
$$
    a + b + c + d + \int_a^b f(x)dx - \sum_k c_k\int g(x)dx = \prod_n \int_{\Omega_k} F(x,y,z) d\omega
$$ 
...

Задача

Когда я загружаю страницу, она прекрасно отображает уравнение.Однако, когда я устанавливаю размер страницы очень узким и обновляю / загружаю страницу;уравнение не отображается таким образом, чтобы соответствовать странице.

MathJax doc утверждает, что linebreaks: { automatic: true } может использоваться для автоматического разбиения длинных выражений.Почему это не работает?

Демонстрация в реальном времени: Я опубликовал Демонстрацию CodePen .

Устранение неполадок

Я также нашел похожие проблемы, как в этот вопрос .Там работает CodePen, я не понимаю, почему мой код не работает.

1 Ответ

2 голосов
/ 10 мая 2019

Проблема связана с тем, что ваша встроенная конфигурация расходится с комбинированным файлом конфигурации, загруженным вместе с MathJax (через строку запроса).

Inline, вы настраиваете вывод HTML-CSS вместе с автоматическим переводом строки для него. Однако объединенный файл конфигурации загружает вывод CommonHTML.

Последнее обновление конфигурации происходит из комбинированного файла конфигурации, поэтому вы получите выход CommonHTML (вы можете проверить это через контекстное меню MathJax, а также переключиться на HTML-CSS там - NB: это устанавливает cookie ).

Таким образом, вы можете либо обновить встроенную конфигурацию, либо переключить комбинированную конфигурацию.

Я бы предложил использовать вывод CommonHTML, который является более новым и более быстрым, чем теперь положительно устаревший вывод HTML-CSS (который был разработан, когда IE8 был новым). Вы также можете добавить -full к строке запроса, чтобы получить большую полезную нагрузку, если вы знаете, что у вас есть контент для рендеринга (в противном случае MathJax сначала ищет контент, прежде чем загружать больше компонентов). 

body { width: 10em}
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    extensions: ["tex2jax.js"],
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
      processEscapes: true
    },
    "CommonHTML": { linebreaks: { automatic: true } }
  });
</script>
<script src="//mathjax.rstudio.com/latest/MathJax.js?config=TeX-MML-AM_CHTML"></script>

$$
    a + b + c + d + \int_a^b f(x)dx - \sum_k c_k\int g(x)dx = \prod_n \int_{\Omega_k} F(x,y,z) d\omega
$$
...