Lien vers la page HTML5 uniquement

Lien vers la page Les bases de CSS3

Lien vers la page Positionner avec CSS3

Lien vers la page Rendre une page interactive avec PHP

Deuxième partie: Utilisation de MathJax avec HTML5

Introduction

MathJax est un logiciel permettant de faciliter l'écriture des formules mathématiques dans une page html. On s'intéresse ci-après aux formules écrites en LaTeX.

Mise en oeuvre de MathJax

Le plus simple consiste à utiliser directement MathJax en écrivant un script reliant le document-source au site officiel de MathJax. Il faut installer ce script dans l'entête de la page entre <head> et </head>:

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

Quelques remarques:

La méthode indiquée précédemment nécessite une connexion internet. Dans le cas où l'on souhaite bénéficier des possibilités de MathJax sans être connecté, il est nécessaire d'installer le logiciel sur le disque dur. Pour les utilisateurs de Linux Ubuntu, la logithèque contient les paquets nécessaires (libjs-mathjax et libjs-mathjax-doc) qu'il suffit d'installer par simple clic. Ce n'est cependant pas la version la plus récente. Si Sage est installé, MathJax fait partie du programme téléchargé et on peut utiliser le script suivant (à adapter):

<script type="text/javascript" src="/home/(nom de l'utilisateur)/sage-5.8-linux-32bit-ubuntu_12.04.2_lts-i686-Linux/devel/sage-main/doc/output/html/en/_static/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> </script>

Le script permettant d'utiliser MathJax obtenu par les paquets Ubuntu:

<script type="text/javascript" src="/usr/share/javascript/mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> </script>

MathJax ne transforme que le mode mathématique de LaTeX, pas le mode texte. Voici un exemple:

Si $a \neq 0 $, alors \(ax^2 + bx + c = 0\) peut avoir 2 solutions:
\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}\]

ce qui donne:

Si $a \neq 0 $, alors \(ax^2 + bx + c = 0\) peut avoir 2 solutions: \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}\]

Attention: il faut utiliser les délimitateurs \( et \) au lieu de $ $. Pour éviter cela, il faut ajouter dans l'entête le script suivant:

<script type="text/x-mathjax-config">
  	MathJax.Hub.Config({
    	tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}
  	});
	</script>

Exemple avec un environnement:

\begin{align}
\dot{x} & = \sigma(y-x) \\
\dot{y} & = \rho x - y - xz \\
\dot{z} & = -\beta z + xy
\end{align}

ce qui donne:

\begin{align} \dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \\ \dot{z} & = -\beta z + xy \end{align}

Le site http://www-lmpa.univ-littoral.fr permet d'obtenir d'autres exemples et d'approfondir MathJax