LaTeX au sein d'une page HTML avec jsMath

Rédigé par Yacine - 03 janvier 2013

A l'heure ou j’écris ce billet, mon blog n'a encore que quelques jours et je passe beaucoup de temps à l’améliorer.

Etant donné que j'ai pour objectif d'écrire quelques billets abordant les mathématiques financières, j'ai tout de suite été confronté à un problème, celui de pouvoir écrire des formules mathématiques complexes au sein d'une page HTML.


La solution favorisée par beaucoup est celle de générer une image à partir d'un code LaTeX, puis d'inclure cette image dans le code HTML. Cette solution est par exemple utilisée par Wikipedia, mais cela m'a tout de suite paru très lourd. Une image, ça prend non seulement de la place en terme de mémoire, mais en plus il n'est pas très aisé de l'afficher à l'emplacement souhaité au sein d'un texte HTML, sans parler de la gestion des images au sein des dossiers etc.


La solution à cela ? jsMath. C'est un outil qui permet d'écrire ses formules mathématiques Latex comme on le ferait sur un document Latex classique.

Il s'agit d'un script javascript. L'avantage est très certainement sa facilité d'utilisation et sa réactivité. L'inconvénient (qui n'en est pas vraiment un) est qu'il faut que le navigateur web exécute les scripts javascript. Or tous les navigateurs web, du moins les plus connus et les plus utilisés exécutent le javascript nativement.


Un exemple

En écrivant le code latex suivant (dans sa fenêtre WYSIWYG de son site, ou directement dans le fichier HTML/PHP):

 \left(\, \sum_{k=1}^n a_k b_k \right)^2 \le\left(\, \sum_{k=1}^n a_k^2 \right) \left(\, \sum_{k=1}^n b_k^2 \right)

Nous arrivons au résultat suivant: $\left(\, \sum_{k=1}^n a_k b_k \right)^2 \le \left(\, \sum_{k=1}^n a_k^2 \right) \left(\, \sum_{k=1}^n b_k^2 \right)$


Mettre en place jsMath

Il faut d'abord télécharger deux fichiers zip sur ce lien Sourceforge

  • jsMath-3.6e
  • jsMath-fonts-1.3

Prenez les dernières version évidement. Dezzipez les deux fichiers. Il faut alors couper le dossier fonts issus du fichier zip "jsMath-fonts-1.3.zip" et le coller dans le dossier "jsmath" issu du fichier zip "jsMath-3.6e.zip".

Ça vous fera donc un unique dossier jsmath, à placer à la racine de son site/blog internet.


Il faut ensuite éditer le fichier load.js qui se trouve dans racineDeVotreSite/jsmath/easy/. Cherchez la ligne concernant le paramètres root et y insérez le lien du dossier jsmath ("http://votresite.fr/jsmath/"). Les autres options à modifier dans le fichier load.js sont bien décrites dans les commentaires, je vous laisse le parcourir et le modifier à votre convenance.


Il suffit à présent d'ajouter les lignes suivantes au début de votre code HTML entre deux balises SCRIPT:

SRC="http://shadowblog.fr/jsmath/easy/load.js">
jsMath.Setup.Script("plugins/tex2math.js")

Et celui-ci tout à la fin (il permet de lancer la compilation du code LaTeX):

jsMath.ConvertTeX()


Puis d'écire votre code LaTeX entre deux caracères $ et le tour est joué !


Le panel jsMath

Chose que vous pouvez remarquer est le petit bouton jsMath en bas à droite de la fenêtre du navigateur. Il s'agit du panel jsMath qui vous permet de modifier quelques paramètres d'affichage des formules mathématiques, la taille de la police par exemple.


Dans ma configuration, j'utilise par défaut les police de Tex ("Tex fonts" en anglais). Or tout le monde n'a pas ces police d'installé au sein de leur PC, alors jsMath se met à utiliser des images. Ce qui rend la génération de la page un peu plus lourde. Pour éviter cela, on peut afficher un message d'avertissement soulignant le fait que des images sont utilisées et que l'utilisateur peut télécharger les polices pour un meilleur rendu.


Pour plus de précisions consultez le site officiel : http://www.math.union.edu/~dpvc/jsmath/


Faites virevolter cet article sur internet!

author_avatar

Auteur: Yacine

Ingénieur Financier et Ingénieur Informaticien.

Je suis passionné par la finance et l'économie le jour. Geek invétéré durant les heures les plus sombres, d'où le titre du blog : Le Shadow Blog.

Classé dans : Blogosphère, Mathématiques - Mots clés : Mathématiques, jsMath, Latex

4 commentaires

avatar

la mamounia le mardi 30 avril 2013 à 15:21 #1

Merci pour ce superbe article. Il est très utile pour moi. A bientôt.

avatar

Aubrey le samedi 01 février 2014 à 13:12 #2

Good day! I just want to give a huge thumbs up for the nice data you’ve got right here on this post. I can be coming back to your blog for extra soon.

avatar

max le mardi 11 février 2014 à 16:48 #3

salut!merci pour ton super article!
j'ai une question!concernant le Mathjax,comment vais-je faire si je veux l'utiliser pour une site local? par exemple pour le reseaux de mon université seulement!comment dois-je procéder pour l'installation et que dois-je faire dans la age html?(ou php)

avatar

Yacine le mercredi 12 février 2014 à 04:06 #4

@max :

De la même façon que pour un site en ligne. Il faut ajouter la bibliothèque JS en local, et y faire un lien via la balise script dans ta page HTML.

Écrire un commentaire

Quelle est la cinquième lettre du mot nbkafa ? : 

Réseaux Sociaux

Rechercher

Catégories

Derniers articles

Twitter

Mots clés