Использование MathJax с Jekyll

У меня есть блог Jekyll, и я хочу использовать MathJax с ним, в том смысле, что я хочу, чтобы набрать что-то вроде

$$\sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6}$$

в моих файлах разметки и иметь правильное выражение LaTeX, сгенерированное с помощью MathJax, аналогично тому, как это делается на math.stackexchange.

Каков самый простой способ сделать это? В настоящее время у меня есть файл jsmath.js (GitHub gist) в моем каталоге, и я думал, что могу иметь простой файл с именем mathjs в моем _includes с линией

<script src="path/to/jsmath.js></script>

и включите, что в каждом посте через

{% include mathjs %}

но это не работает - при запуске jekyll --server создается страница, но ни одно из содержимого не отображается.

Я собираюсь сделать это правильно? Есть ли лучший способ использовать MathJax с Jekyll?

Ответ 1

Конечно, вы можете использовать mathjax с Jekyll. Чтобы получить эту работу, убедитесь, что

Если вы пишете свой пост в методе уценки, ваш интерпретатор уценки не забивает ваш вход в mathjax. Лучший способ защитить его, который я нашел, - всегда ставить отображаемую математику в <div> элементы и встроенную математику в элементы <span>, которые большинство интерпретаторов уценки оставят в покое.
Правильно ли отображается строка javascript в источнике HTML? Мне легче и быстрее указывать на CDN mathjax, а не предоставлять свою собственную копию. Попробуйте использовать строку

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

(Эти параметры конфигурации позволяют использовать более текс-нотацию для запуска вашей математической среды, например \begin{equation} и т.д.).

Возможно, есть проблема с вашим jsmath.js script; версия CDN будет быстрее и, вероятно, более надежной. (У меня есть загрузка javascript в нижнем колонтитуле на каждой странице, но, конечно, ваша стратегия с включением имеет смысл, если вы не хотите загружать javascript, когда он вам не нужен.)

Мы могли бы помочь больше, если вы дадите нам ссылку на свой блог? Вы можете увидеть несколько примеров в моем блоге (ссылка на установку Jekyll на github тоже, если это помогает).

Ответ 2

Если у вас есть достаточный контроль над процессом публикации (например, вы используете Jekyll самостоятельно), простое решение заключается в том, чтобы переключить парсер разметки на тот, который поддерживает TeX. Например, используя kramdown:

gem install kramdown

Измените строку markdown в _config.yml на

markdown: kramdown

и добавьте что-то вроде

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

до _layouts/default.html. Теперь вы можете просто отметить любую математику в своих сообщениях с помощью $$.

Ответ 3

Если вы используете kramdown в качестве вашего уценки, это легко. Kramdown имеет встроенную поддержку mathjax.

Добавьте это перед тегом </head> в свой макет по умолчанию.

<script type="text/javascript" async 
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?
config=TeX-AMS-MML_HTMLorMML"></script>

Установите значение true в _config.yml, после строки markdown: kramdown.
```
mathjax: true
```
Готово. Для разведения Mathjax
- inline, используйте $ ... $,
- используйте \[ ... \].
  
  Единственное, на что нужно обратить внимание - это экранирование обратного слэша при использовании уценки, поэтому разделители становятся \$ ... \$ и \\[ ... \\] для встроенных и математических блоков соответственно.
Вот пример встроенного рендеринга MathJax \$ 1/x^{2} \$, и вот блок-рендеринг: \\[ \frac{1}{n^{2}} \\].

Я использую это в своем блоге.

Ответ 4

Я написал сообщение в блоге о том, как настроить MathJax некоторое время назад: Latex Math Magic

В сущности, вы должны остановить Markdown от messing с помощью MathJax.

Я закончил использование блоков кода, которые отлично работали для меня. Поэтому либо используйте по крайней мере 4 пробела, прежде чем писать что-либо или используя острый символ: `; К сожалению, MathJax пропускает теги <code> по умолчанию, так как он не хочет конвертировать код, который он не должен.

Итак, где-то в вашем основном файле макета вам нужно добавить небольшой код javascript:

MathJax.Hub.Config({
  tex2jax: {
    skipTags: ['script', 'noscript', 'style', 'textarea', 'pre']
  }
});

Кроме того, мы должны сказать MathJax игнорировать не-латексовые кодовые блоки или обычные кодовые блоки:

MathJax.Hub.Queue(function() {
    var all = MathJax.Hub.getAllJax(), i;
    for(i=0; i < all.length; i += 1) {
        all[i].SourceElement().parentNode.className += ' has-jax';
    }
});

В его точке все наши блоки кода латекса будут иметь строку has-jax в имени своего класса. Поэтому мы можем применить простой стиль в наших листах css, чтобы придать ему собственный стиль.

code.has-jax {font: inherit; font-size: 100%; background: inherit; border: inherit;}

Возможно, не лучший подход, но он работал в моем блоге последние годы, и я никогда не сталкивался с какой-либо дополнительной проблемой.

Ответ 5

Вы можете попробовать мой статический генератор блога: Jekyde. Jekyde похож на Jekyll, но он хорошо заботится о LaTeX в файле Markdown. Вам нужно всего лишь поместить ваши формулы в $... $и $$... $$. Также Jekyde содержит редактор уценок в браузере с предварительным просмотром LaTeX.

Ответ 6

Некоторые примечания, прежде чем пытаться любой из следующих вариантов

Опция 0 увеличит время сборки даже с --incremental и действительно вариант 1 вероятно, следует использовать в большинстве случаев, однако, это вместе с дополнительным занимаемым пространством может стоить затрат, если вы развертываете в сети с клиентами, которые могут не иметь доступ к CDN.

Оба варианта были протестированы на частном сервере с kramdown в качестве интерпретатора уценки и mathjax: true установленным в файле проекта _config.yml; см. шаг 2 ответа Сохама Бхаттачарьи и его предисловие, а также до первых двух кодовых блоков Карамдира для инструкций по этим битам.

Вариант `0` скачать и скопировать распакованный источник в `project-name`

Скачать исходник

cd ~
mkdir -p git/hub && cd git/hub
git clone --depth 1 https://github.com/mathjax/MathJax.git

Создайте путь к каталогу в вашем проекте и скопируйте файлы из MathJax/unpacked по этому пути

cd ~
mkdir -p git/lan/project-name/assets/JS_3rd_Party/MathJax
cp -r git/hub/MathJax/unpacked/* git/lan/project-name/assets/JS_3rd_Party/MathJax/

Добавьте источник в git tracking

cd git/lan/project-name/
git add assets/JS_3rd_Party/MathJax
git commit -m 'Added MathJax.js unpacked source to git tracking'

Написать включаемый файл

tee ./_includes/MathJax.html 1>/dev/null <<EOF
{%- if jekyll.environment == 'production' and site.mathjax == true -%}
  <script type="text/javascript" src="{{'/assets/javascripts/JS_3rd_Party/latest.js?config=TeX-AMS-MML_HTMLorMML' | relative_url}}"></script>
{%- elsif jekyll.environment != 'production' and site.mathjax == true -%}
  <script type="text/javascript" src="{{'/assets/javascripts/JS_3rd_Party/MathJax.js?config=TeX-AMS-MML_HTMLorMML' | relative_url}}"></script>
{%- endif -%}
EOF

Частные сборки сервера будут использовать MathJax.js где в качестве продакшен среды (GitHub) будет использоваться latest.js с использованием приведенного выше latest.js Liquid if... elsif... endif.

Напишите пост, чтобы проверить это

tee ./_posts/$(date +'%Y-%d-%m')-math-tests.markdown 1>/dev/null <<EOF
---
layout: post
title:  "Math Tests"
date:   $(date +'%Y-%d-%m %H:%M:%S %z')
categories: math
---
{%- include MathJax.html -%}

<span>

for $x,y,z \in \{1, 2,\dots 9\}$
</span>

<span>

$$
\sum_{i=1}^n X_n
$$
</span>
EOF

Я не пробовал это без <span> потому что предложение cboettig, кажется, полностью помогает. Кроме того, дополнительные строки в пределах span являются ошибкой, без них там, где все еще есть проблемы с отображаемым выводом.

Добавьте эти последние файлы для отслеживания git

git add _posts/$(date +'%Y-%d-')math-tests.markdown
git add _includes/MathJax.html

Сборка локально или установка и сборка на удаленном сервере

bundle exec jekyll build --destination /tmp/www/project-name --config _config.yml --incremental

Вариант `1` скопировать только `latest.js` для использования CDN (Сеть доставки контента)

См. Option 0 шаг 1.
Создайте путь к каталогу для сторонних скриптов JavaScripts и скопируйте туда MathJax/unpacked/latest.js

cd ~
mkdir -p git/lan/project-name/assets/JS_3rd_Party/MathJax
cp git/hub/MathJax/unpacked/latest.js git/lan/project-name/assets/JS_3rd_Party/MathJax/

Написать включаемый файл

cd git/lan/project-name
tee ./_includes/MathJax.html 1>/dev/null <<EOF
<script type="text/javascript" src="{{'/assets/javascripts/JS_3rd_Party/latest.js?config=TeX-AMS-MML_HTMLorMML' | relative_url}}"></script>
EOF

См. Option 0 Шаг 5.
Добавьте эти три файла для отслеживания git

git add _includes/MathJax.html
git add _posts/$(date +'%Y-%d-')math-tests.markdown
git add assets/JS_3rd_Party/MathJax
git commit -m 'Added 'MathJax.html', 'latest.js', and a test post to git tracking'

См Option 0 Шаг 7. для локального строительства

Для любого из вариантов

При развертывании на частном сервере вам также может понадобиться определить baseurl в файле вашего проекта _config.yml, особенно если _config.yml схема URL username.tld/project-name, которую GitHub использует на вашем частном сервере.

При развертывании как на частном сервере, так и на GitHub может быть лучше использовать отдельный файл конфигурации и при сборке проблемы --config _config.yml,_config_baseurl.yml, например...

# Write the special config file
tee ./_config_baseurl.yml 1>/dev/null <<EOF
baseurl: "project-name"
EOF

# Build with extra config
bundle exec jekyll build --destination /tmp/www/project-name --config _config.yml,_config_baseurl.yml --incremental

Надеюсь, что это поможет с загрузкой активов через включение.

Ответ 7

Спасибо, я полностью понимаю, что использую именно эту вещь на своем сайте Jekyll. Но я обнаружил некоторые серьезные проблемы, когда я реализовал это на моем сайте показывает нежелательную загрузку скрипта.