Publier des relations mathématiques sur Blogger peut défi, mais il existe plusieurs méthodes pour y parvenir.
Voici une approche simple et élégante, idéale pour intégrer des équations scientifiques longues et complexes, qui dépassent les capacités d'un simple éditeur comme Word, car elles nécessitent de l'écriture de code complexe.
Sur Blogger, cela devient grâce à l'utilisation de MathJax et de TeX.
Ces outils permettent d'afficher des formules mathématiques de manière claire et concise, ce qui est essentiel pour les équations scientifiques complexes.
Comment inclure des relations Scientifiques sur le site Blogger
Pour écrire des équations scientifiques, qu'elles soient des relations mathématiques, physiques ou chimiques, il faut d'abord trois choses qui doivent être nécessaires pour que les équations soient listées avec élégance et sans erreur.
Table des matières 💙💚💛💜
I- Utiliser le site Mathjax
La première étape pour écrire des équations dans un blog consiste à ouvrir le site MathJax, puis à copier le code JavaScript et à le coller dans votre site avant la balise de fermeture </head>.
Code javascript 💧
<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.0.1/es5/tex-mml-chtml.js"></script>
II- Utiliser un éditeur de code en ligne 💙
Il est essentiel d'intégrer des équations scientifiques sur notre site Web. Pour cela, nous avons besoin d'un éditeur d'équations en LaTeX, tel que CodeCogs, qui est l'un des meilleurs éditeurs disponibles en ligne.
Ce site gratuit est sans doute l'option la plus simple et pratique, permettant de rédiger des équations de manière fluide et efficace, bien que certaines configurations puissent être nécessaires.
En utilisant des éditeurs LaTeX en ligne, il est facile de générer des équations mathématiques que l’on peut ensuite copier et coller dans un blog.
Cependant, il ne faut pas oublier de régler quelques détails importants, comme l'agrandissement de la police, le choix du type de police et de la couleur, pour un rendu optimal.
1. Exemple de code Latex inline
\( E = mc^2 \)Ce code affiche l'équation d'Einstein \( E = mc^2 \) directement dans le texte.
2. Exemple de code Latex en mode block
\[ E = mc^2\]Ce code affiche la même équation d'Einstein\[ E = mc^2\]dans un bloc séparé, centré sur la page.
III- Utiliser un réglage concernant le code latex 💚
Pour que le code latex apparaisse avec élégance, en particulier pour les petits écrans et les écrans de téléphone, nous devons ajouter la fonctionnalité ("overflow-x: auto") de code CSS, puis la mettre dans la page html.
1. Exemple de code sans Overflow💧
\[ \int_{0}^{\infty} e^{-x^2} \, dx = \frac{\sqrt{\pi}}{2} \]code Latex
\[ \int_{0}^{\infty} e^{-x^2} \, dx = \frac{\sqrt{\pi}}{2}\]
Ce code latex illustre la représentation de l'intégrale gaussienne, qui allie élégance et simplicité. On l'emploie fréquemment pour mettre en évidence la splendeur des mathématiques en LaTeX.
Il est possible de personnaliser les styles, les couleurs et la taille afin de l'ajuster à vos exigences.
💧Mais il est essentiel de prendre en compte la lisibilité et le redimensionnement des éléments, notamment pour les codes affichés sur des téléphones et autres petits écrans.💦
On ajoute ce style CSS dans la balise `<div>` : `style="overflow-x: auto"`. Cette configuration permet de gérer le défilement horizontal pour les équations.
Exemple avec style (over flow)
<div style="overflow-x: auto">\[ 3x+15=0\]</div>
2. Equation avec overflow-x 💧
La propriété CSS Overflow permet de gérer le contenu qui dépasse des limites d'un conteneur, garantissant ainsi que le code soit responsive sur des plateformes avec de petits écrans, comme les mobiles à faible résolution.
Lors de l'affichage des équations dans votre navigateur, faites un clic droit sur l'équation, sélectionnez "Math Settings", puis "Zoom Trigger" et choisissez "Click".
Vous serez alors émerveillé en voyant l'équation s'afficher dans une police agrandie et distinctive, un véritable hommage au travail réalisé par MathJax.