web-dev-qa-db-fra.com

Comment prendre en charge le latex dans les pages github?

J'utilise jekyll pour écrire des articles et les afficher dans des pages github. Mon fichier source est écrit avec markdown.

Comment puis-je insérer une formule dans le fichier de démarque?

Je ne veux pas enregistrer la formule dans une image et charger l'image dans le fichier de démarque. Je veux réellement écrire la formule de latex directement dans le fichier de démarque.

jekyllgithub-pages
42
Samuel

Étant donné que les ressources en ligne ont changé concernant cette question, voici une mise à jour sur la prise en charge de LateX avec les pages GitHub.

Notez que le plus proche du rendu Latex sans exporter en tant qu'images et le supporter nativement sur votre site Jekyll serait d'utiliser MathJax.

MathJax est en fait recommandé dans les documents Jekyllrb pour le support mathématique, avec Kramdown, il le convertit également de LaTeX en PNG, plus de détails à ce sujet ici à la documentation Kramdown

Option 1: Écrivez votre équation dans MathURL et incorporez-la.

Vous pouvez écrire l'équation avec MathURL, puis générer une URL qui pointe en permanence vers l'équation et l'afficher dans un <iframe> tag. Cependant, cela cessera de fonctionner si MathURL se déconnecte.

Option 2: Implémenter jsMath

jsMath autorisera une syntaxe similaire à LateX et sera pris en charge dans votre blog si vous l'avez configuré correctement, il y a documentation complète à ce sujet .

Option 3: Mathjax (de loin le plus facile à mon avis)

De nombreux sites ont mentionné que Mathjax est considéré comme un successeur de jsMath et est beaucoup plus facile à implémenter avec Jekyll. MathJax est également utilisé par mathics.stackexchange.com aussi!

  • Étape 1 : demandez à votre site de charger le script dans les sites où vous souhaitez afficher les mathématiques. (généralement fait dans l'en-tête)

  • Facultatif: vérifiez votre analyseur de démarque dans _config.yml. redcarpet ou kramdown est suggéré dans cet exemple. Certains analyseurs comme discount vont interférer avec la syntaxe mais j'ai une solution ci-dessous.

  • Étape 2 : Écrivez vos équations.

Citant ce tutoriel de Gaston Sanchez:

MathJax n'a pas exactement le même comportement que LaTeX. Par défaut, le préprocesseur tex2jax définit les délimiteurs mathématiques LaTeX, qui sont\(... \) pour les mathématiques en ligne et\[... \] pour les équations affichées. Il définit également les délimiteurs TeX $$ ... $$ pour les équations affichées, mais il ne définit pas $ ... $ comme délimiteurs mathématiques en ligne.

Lisez la documentation sur la syntaxe pour plus de détails.

  • Remarque: Utilisation de la balise liquid raw pour garantir que les analyseurs Markdown n'interfèrent pas avec la syntaxe MathJax.
  • Vous pouvez échapper aux barres obliques inverses (par exemple, \\[ \frac{1}{n^{2}} \\]) pour s'assurer qu'ils sont correctement analysés, comme décrit par le tutoriel de Chistopher Poole , ce n'est pas toujours intuitif et semble compliqué. Une solution plus simple consisterait à utiliser la balise liquid raw pour garantir que le texte est ignoré par le processeur Markdown et directement sorti en HTML statique. Cela se fait avec {% raw %}et aussi {% endraw %}

Voici un exemple de code:

 {% raw %}
  $$a^2 + b^2 = c^2$$ --> note that all equations between these tags will not need escaping! 
 {% endraw %}

Enfin, assurez-vous également que les polices prennent en charge l'affichage de LateX car certains ont des problèmes tels que la taille de la police étant trop petite. Alternativement, voici quelques méthodes supplémentaires comme Google Charts et MathML discutées sur le site sœur de latex StackExchange.

35
matrixanomaly

Si vous avez utilisé Jekyll dans vos pages GitHub, vous pouvez ajouter

  <script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      tex2jax: {
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
        inlineMath: [['$','$']]
      }
    });
  </script>
  <script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>

dans le fichier _includes/head.html, puis votre site GitHub Pages prendra en charge MathJax

24
PeaShooter

La façon la plus simple de le faire maintenant est d'utiliser KaTeXextension de rendu automatique . (Notez que cela va aux documents de pré-version, qui sont beaucoup plus complets pour le moment!)

Déposez simplement ce qui suit dans votre <head>:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-yFRtMMDnQtDRO8rLpMIKrtPCD5jdktao2TV19YiZYWMDkUR5GQZR/NOVTdquEx1j" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-9Nhn55MVVN0/4OFx7EE5kpFBPsEMZxKTCnA+4fqDmg12eCTqGi6+BB2LjY8brQxJ" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>

Notez que cela suppose que les délimiteurs suivants apparaissent dans votre code HTML:

$$\LaTeX code$$   (for display)
\\[\LaTeX code\\] (also for display)
\\(\LaTeX code\\) (for inline)

Notez que si vous utilisez Jekyll, vous aurez besoin des éléments suivants dans votre _config.yml:

markdown: kramdown
kramdown:
    math_engine: katex

AVERTISSEMENT: N'utilisez pas math_engine: mathjax. Il rompra cela en supprimant automatiquement les délimiteurs LaTeX.

0
daviewales

La meilleure façon actuellement IMO est d'utiliser le backend MathJax (qui fait partie de kramdown, c'est-à-dire disponible sur les pages GitHub), puis d'utiliser KaTeX sur le frontend pour le rendu. KaTeX est plus léger et plus rapide que MathJax, ce qui en fait un meilleur choix pour un thème de blog.

J'utilise cette technique avec beaucoup de succès pour mon thème Jekyll Hydejack . N'hésitez pas à l'utiliser sur votre propre site, en procédant comme suit:

Dans config.yml, définissez le moteur mathématique sur mathjax:

kramdown:
  math_engine: mathjax

Ajoutez KaTeX à votre site et assurez-vous également que le code suivant s'exécute quelque temps après son chargement.

const mathBlocks = document.querySelectorAll('script[type^="math/tex"]');
Array.from(mathBlocks).forEach((el) => {
  const tex = el.textContent.replace("% <![CDATA[", "").replace("%]]>", "");
  el.outerHTML = window.katex.renderToString(tex, {
    displayMode: el.type === "math/tex; mode=display",
  });
});

Le code que j'utilise est légèrement plus compliqué. Vous pouvez consultez-le sur GitHub .

0
qwtel