# Utiliser MathJax pour écrire des mathématiques MathJax est une librairie JavaScript qui permet de rendre des écritures mathématiques de manière élégante et accessible dans les pages web. Pour les enseignants créant des contenus en ligne, MathJax est un outil intéressant pour intégrer des formules mathématiques complexes directement dans les cours, exercices, corrections... ## Comment ça fonctionne ? ### Première option : Déjà intégré dans le modèle de Mkdocs de La Forge MathJax est déjà intégré par défaut grâce à la configuration YAML du projet. Pour s'en assurer, consultez le fichier `mkdocs.ylm` et cherchez une ligne qui charge la librairie Mathjax (cf image ci dessous).  ### Seconde option : Utiliser l'extension Arithmatex pour les mathématiques Une autre option pour intégrer des formules mathématiques dans MkDocs est d'utiliser l'extension `pymdownx.arithmatex`. Cette extension offre une alternative à MathJax en permettant le rendu de LaTeX directement dans le HTML généré, ce qui peut être plus efficace puisque cela réduit la dépendance aux scripts externes. Pour l'activer, ajoutez la configuration suivante dans votre fichier `mkdocs.yml` : ```yaml markdown_extensions: - pymdownx.arithmatex: generic: true ``` Cette configuration nécessite que l'extension `Python pymdown-extensions` soit installée. Ce qui est normalement le cas du modèle `mkdocs` présent sur La Forge des communs numériques. ### Troisième option : Integrer Mathjax dans un modèle Il est aussi possible d'utiliser MathJax avec MkDocs, en l'ajoutant dans la configuration ou dans les fichiers de votre thème. Cela se fait en ajoutant un lien vers la bibliothèque MathJax dans le fichier HTML de base de votre thème MkDocs. ```html <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> ``` ## Quelques exemples d'équation Une fois que MathJax est intégré, vous pouvez commencer à écrire des mathématiques dans vos fichiers Markdown. Voici quelques exemples : ### Introduction MathJax utilise la syntaxe $\LaTeX$ pour la rédaction des équations, ce qui permet une grande flexibilité dans la présentation des formules mathématiques. Pour ceux qui souhaitent approfondir ou consulter les codes spécifiques de cette syntaxe, vous pouvez consulter cette la page [Zeste de savoir - Introduction LaTeX - Des mathématiques](https://zestedesavoir.com/tutoriels/826/introduction-a-latex/1322_completer-vos-documents/5376_des-mathematiques/). Quelques exemples sont également présentés ci-dessous. ### Écrire une équation simple Pour écrire une équation simple centrée sur une nouvelle ligne, on utilise les doubles dollars : ``` $$ x^2 + y^2 = z^2 $$ ``` > $$ x^2 + y^2 = z^2 $$ Un simple `$` permet d'écrire une équation alignée à gauche : ``` La fonction $f$ est définie pour tout $x$ sur $\mathbb{R}$ par l'équation : $f(x)=3x^2+2x+1$ ``` > La fonction $f$ est définie pour tout $x$ sur $\mathbb{R}$ par l'équation : $f(x)=3x^2+2x+1$ ### Équation alignée Pour les équations qui nécessitent un alignement, par exemple pour montrer les étapes de resolution d'une équation ou d'une simplification, on utilise `align`. L'alignement se réalise au niveau du symbole `&` : ``` $$ \begin{align*} x &= y + 1 \\ x - 1 &= y \end{align*} $$ ``` > $$ \begin{align*} x &= y + 1 \\ x - 1 &= y \end{align*} $$ ### Écrire des mathématiques dans le texte On peut aussi intégrer du code directement dans le texte par exemple `$\pi$` et `$\sqrt{2}$` donneront $\pi$ et $\sqrt{2}$. ### Fractions, racines carrées, lettres grecs, vecteurs... MathJax prend en charge une vaste gamme de notations mathématiques, telles que les fractions et les racines carrées : ``` $$ \Delta = b^2 - 4ac \frac{-b \pm \sqrt{b^2-4ac}}{2a} $$ ``` > $$\Delta = b^2 - 4ac$$ > $$\frac{-b \pm \sqrt{b^2-4ac}}{2a}$$ ### Définir de nouvelle commande. Par exemple : La norme d'un vecteur Dans ce code, `\newcommand{\norm}[1]{\left\lVert#1\right\rVert}` définit une nouvelle commande `\norm{}` pour faciliter l'écriture de la norme d'un vecteur sur l'ensemble du document. ``` $$ \newcommand{\norm}[1]{\left\lVert#1\right\rVert} \norm{\vec{v_C}} = \frac{\sqrt{(x_D - x_C)^2 + (y_D - y_C)^2}}{\Delta t} $$ Un autre texte... $$\norm{\vec{u}}$$ ``` >$$ \newcommand{\norm}[1]{\left\lVert#1\right\rVert} \norm{\vec{v_C}} = \frac{\sqrt{(x_D - x_C)^2 + (y_D - y_C)^2}}{\Delta t} $$ Un autre texte... $$\norm{\vec{u}}$$ ## Avantages de l'utilisation de MathJax Utiliser MathJax dans vos cours en ligne présente plusieurs avantages : - **Accessibilité** : Les équations sont rendues de manière à être lisibles par des lecteurs d'écran, ce qui est essentiel pour certains étudiants ayant des besoins spécifiques. - **Qualité visuelle** : Les formules sont affichées avec une belle clarté typographique, ce qui améliore l'expérience d'apprentissage. - **Facilité d'utilisation** : Écrire des mathématiques dans Markdown avec MathJax est, la plupart du temps, aussi simple que d'écrire du texte normal, ce qui réduit la barrière technique pour les enseignants. ## Intégration de MathJax pour des équations chimiques Pour que les formules chimiques et les unités soient correctement rendues, il est essentiel d'utiliser la version complète de MathJax. Dans le fichier `mkdocs.yml`, assurez-vous de charger MathJax comme suit : ``` - https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-chtml-full.min.js ``` Cette version complète prend en charge des extensions comme `mhchem` pour les formules chimiques et `siunitx` pour les unités. ### Syntaxe des Équations 1. **Équation en ligne** : Utilisez `$...$` pour une équation en ligne. Exemple : ``` Équation en ligne : $E = mc^2$ ``` 2. **Équation en bloc** : Utilisez `$$...$$` pour un bloc d'équations. Exemple : ``` $$ E = mc^2 $$ ``` 3. **Avec `\begin{equation}` et `\end{equation}`** : Exemple : ``` \begin{equation} E = mc^2 \end{equation} ``` ### Formules Chimiques et Unités Pour écrire des formules chimiques et des unités, assurez-vous d'utiliser la syntaxe correcte : - **Formule chimique** avec `mhchem` : ``` $\ce{H2O}$ ``` - **Unité** avec `siunitx` : ``` $\pu{123.5 kJ}$ ``` ### Captions pour les Images La syntaxe pour ajouter un titre à une image est la suivante : ```  ``` Cette syntaxe affichera la description si l'image ne se charge pas et le titre apparaîtra en infobulle lorsque vous survolerez l'image avec la souris. ### Exemple Complet Voici un exemple complet de la syntaxe Markdown pour les images et les mathématiques : ```  Équation en ligne : $E = mc^2$ Équation en bloc : $$ E = mc^2 $$ \begin{equation} E=mc^2 \end{equation} Formule chimique : $\ce{H2O}$ Unité : $\pu{123.5 kJ}$ ```