web-dev-qa-db-fra.com

Utilisation de MathJax avec Jekyll

J'ai un blog Jekyll et je veux utiliser MathJax avec lui, dans le sens où je veux pouvoir taper quelque chose comme

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

dans mes fichiers de démarque et avoir la bonne expression LaTeX générée avec MathJax, d'une manière similaire à la façon dont cela est fait à math.stackexchange .

Quelle est la manière la plus simple de faire ça? Actuellement, j'ai le fichier jsmath.js (GitHub Gist) dans mon répertoire, et j'ai pensé que je pourrais avoir un fichier simple nommé mathjs dans mon _includes répertoire avec la ligne

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

et l'inclure dans chaque message via

{% include mathjs %}

mais cela ne semble pas fonctionner - quand je lance jekyll --server la page est générée, mais aucun contenu n'est visible.

Est-ce que j'y vais de la bonne façon? Existe-t-il une meilleure façon d'utiliser MathJax avec Jekyll?

jekyllmathjax
65
Chris Taylor

Vous pouvez certainement utiliser mathjax avec Jekyll. Pour que cela fonctionne, assurez-vous que

  1. Si vous écrivez votre article dans markdown, votre interprète de markdown ne martèle pas votre entrée mathjax. La meilleure façon de le protéger que j'ai trouvé est de toujours mettre les mathématiques d'affichage dans <div> éléments et mathématiques en ligne dans <span> éléments, que la plupart des interprètes de démarques laisseront seuls.

  2. La ligne javascript s'affiche-t-elle correctement dans la source html? Je trouve plus facile et plus rapide de pointer vers le CDN mathjax plutôt que de fournir ma propre copie. Essayez d'utiliser la ligne

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

(Ces options de configuration vous permettent d'utiliser plus de notation tex pour démarrer votre environnement mathématique, comme \begin{equation}, etc).

Il y a peut-être un problème avec votre jsmath.js script; la version CDN sera plus rapide et probablement plus fiable. (J'ai le chargement javascript dans mon pied de page sur chaque page, mais bien sûr, votre stratégie avec include a du sens si vous ne voulez pas charger le javascript lorsque vous n'en avez pas besoin.)

Nous pourrions vous aider davantage si vous nous fournissez un lien vers votre blog? Vous pouvez voir quelques exemples sur mon blog (a aussi un lien vers la configuration de Jekyll sur github si cela aide).

47
cboettig

Si vous avez un contrôle suffisant sur le processus de publication (par exemple, vous exécutez Jekyll vous-même), une solution facile consiste à basculer l'analyseur de Markdown vers un qui prend en charge TeX. Par exemple, en utilisant kramdown :

gem install kramdown

Modifiez la ligne markdown dans _config.yml à

markdown: kramdown

et ajouter quelque chose comme

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

à _layouts/default.html. Maintenant, vous pouvez simplement marquez toutes les mathématiques dans vos messages avec $$ .

48
Caramdir

Si vous utilisez kramdown comme saveur de démarque, c'est facile. Kramdown a un support intégré pour mathjax.

  1. Ajoutez-le avant la balise </head> Dans votre mise en page par défaut.

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

  2. Affectez la valeur true à _config.yml, Après la ligne markdown: kramdown.

    mathjax: true

  3. Terminé. Pour renedering Mathjax

    • en ligne, utilisez \( ... \),

    • bloc, utilisez \[ ... \].

      La seule chose à surveiller est l'échappement de la barre oblique inverse lors de l'utilisation de la démarque, de sorte que les délimiteurs deviennent \\( ... \\) et \\[ ... \\] Pour les mathématiques en ligne et en bloc respectivement.

  4. Voici un exemple de rendu en ligne MathJax \\( 1/x^{2} \\), et voici un rendu de bloc: \\[ \frac{1}{n^{2}} \\].

J'utilise ceci sur mon blog.

7
Soham Bhattacharyya

J'ai écrit un article sur la configuration de MathJax il y a quelque temps: Latex Math Magic

En substance, vous devez empêcher le Markdown de jouer avec MathJax.

J'ai fini par utiliser des blocs de code, ce qui a bien fonctionné pour moi. Donc, soit en utilisant au moins 4 espaces avant d'écrire quelque chose, soit en utilisant le symbole aigu: `; Malheureusement, MathJax ignore <code> tags par défaut car il ne veut pas convertir le code qu'il ne devrait pas.

Donc, quelque part dans votre fichier de mise en page principal, vous devez ajouter un petit code javascript:

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

De plus, nous devons dire à MathJax d'ignorer les blocs de code non latex ou les blocs de code normaux:

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';
    }
});

À son stade, tous nos blocs de code en latex vont avoir la chaîne has-jax dans leur nom de classe. Par conséquent, nous pouvons appliquer un style simple dans nos feuilles CSS pour lui donner notre propre style.

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

Ce n'est peut-être pas la meilleure approche, mais cela a fonctionné pour mon blog au cours des dernières années et je n'ai jamais rencontré d'autre problème avec.

5
cwoebker

Vous pouvez essayer mon générateur de blog statique: Jekyde . Jekyde est similaire à Jekyll, mais il prend bien en charge LaTeX dans le fichier Markdown. Il vous suffit de mettre vos formules entre $ ... $ et $$ ... $$. Jekyde contient également un éditeur de démarques dans le navigateur avec un aperçu LaTeX.

2
Z.H.

Quelques notes avant d'essayer l'une des options suivantes

L'option 0 Augmentera les temps de construction même avec --incremental Et vraiment l'option 1 Devrait probablement être utilisée dans les instances la plupart, cependant, ceci avec l'espace supplémentaire occupé peut valoir le coup si vous vous déployez sur un réseau avec des clients qui n'ont peut-être pas accès aux CDN.

Les deux options ont été testées sur un serveur privé avec kramdown comme interpréteur de démarque et mathjax: true Défini dans le fichier _config.yml Du projet; voir Étape 2 de Soham Bhattacharyya la réponse et leur préface, et jusqu'à Caramdir les deux premiers blocs de code pour le mode d'emploi de ces bits.

Option 0 Téléchargez et copiez la source décompressée dans project-name

  1. Téléchargez la source
cd ~
mkdir -p git/hub && cd git/hub
git clone --depth 1 https://github.com/mathjax/MathJax.git
  1. Créez un chemin de répertoire dans votre projet et copiez les fichiers de MathJax/unpacked Vers ce chemin
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/
  1. Ajouter la source au suivi git
cd git/lan/project-name/
git add assets/JS_3rd_Party/MathJax
git commit -m 'Added MathJax.js unpacked source to git tracking'
  1. Écrire un fichier inclus
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

Les builds de serveurs privés utiliseront MathJax.js Alors que l'environnement de production (GitHub) utilisera latest.js En utilisant le liquide ci-dessus if ... elsif ... endif.

  1. Écrivez un article pour le tester
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

Je ne l'ai pas essayé sans <span> S parce que cboettig la suggestion semble pour faire totalement l'affaire. De plus, cette nouvelle ligne supplémentaire dans span est sans erreur , sans qu'il y ait toujours des problèmes avec la sortie rendue.

  1. Ajoutez ces derniers fichiers au suivi git
git add _posts/$(date +'%Y-%d-')math-tests.markdown
git add _includes/MathJax.html
  1. Construire localement ou pousser et construire sur un serveur distant
bundle exec jekyll build --destination /tmp/www/project-name --config _config.yml --incremental

Option 1 Copiez juste latest.js Pour utiliser un CDN (Content Delivery Network)

  1. Voir l'étape Option 01.

  2. Créez un chemin de répertoire pour les scripts Java tiers et copiez-y 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/
  1. Écrire un fichier inclus
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

  1. Voir Option 0 Étape 5.

  2. Ajoutez ces trois fichiers au suivi de 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'
  1. Voir Option 0 Étape 7. Pour construire localement

Pour l'une ou l'autre des options

Si vous déployez sur un serveur privé, vous devrez peut-être également définir baseurl dans le fichier _config.yml De votre projet, surtout si vous émulez le schéma d'URL username.tld/project-name Que GitHub utilise sur votre serveur privé.

Si vous déployez à la fois sur un serveur privé et sur GitHub, il peut être préférable d'utiliser un fichier de configuration distinct et lors de la génération du problème --config _config.yml,_config_baseurl.yml, Par exemple ...

# 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

J'espère que cela vous aidera à charger des actifs via un include.

0
S0AndS0