Affichage des articles dont le libellé est LaTeX. Afficher tous les articles
Affichage des articles dont le libellé est LaTeX. Afficher tous les articles

samedi 3 mars 2012

Comment insérer des équations dans Blogger? (Revisité)

Dans le passé, j'ai indiqué comment ajouter des équations à Blogger en ajoutant des images générées par Microsoft Office ou Libre Office. Cette méthode n'est pas idéale. Si je veux créer une page Web contenant des équations et du contenu interactif, deux logiciels minimum sont utilisés: Libre Office ou Microsoft Office et un éditeur Web. Par la suite, les images des équations sont générées et collées comme image sur la page Web. Pour un site Web avec beaucoup d'équations, ce processus est très long. Si une ou plusieurs équations sont erronées, les images sont modifiées dans le traitement de texte, transformées en images et collées à nouveau dans la page Web. Ouf! Il y a surement une façon plus rapide. Effectivement, en cherchant, il y en a une. Il existe une application JavaScript nommée MathJax qui transforme du code LaTeX en magnifique équation sur le Web. Comme je suis un admirateur inconditionnel de LaTeX, je ne pouvais pas être plus heureux! Si vous n'êtes pas fou de TeX ou LaTeX, MathJax n'est probablement pas pour vous. J'aime LaTeX, car je peux écrire une équation au clavier plus vite qu'avec la souris et une interface graphique.

L'installation de MathJax dans Blogger est simple. Dans le Tableau de Bord de Blogger, aller dans l'onglet Présentation. Choississer le sous-onglet Modifier le code HTML. Chercher pour la balise < /head > . Juste avant cette balise, insérer le code suivant:

Enregistrer le modèle et vous êtes prêt pour insérer des équations avec MathJax. Comment fait-on pour insérer des équations? Commençons avec une équation bien simple: \[ \alpha + \beta = \gamma \] Le code pour cette équation est:
\[ \alpha + \beta = \gamma \]
Les symboles \[ et \] servent de balises à MathJax. Ce n'est pas du LaTeX. Le code à l'intérieur des balises est du code LaTeX. Essayons maintenant d'afficher une équation plus complexe, comme les équations de Maxwell: \[ \begin{aligned} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{aligned} \] Fantastique! La qualité graphique est sublime. Le code LaTeX pour cette équation est:
\[
\begin{aligned}
\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\   
\nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\
\nabla \cdot \vec{\mathbf{B}} & = 0 
\end{aligned}
\]
N'importe quel code LaTeX pour équation fonctionne. N'oubliez pas d'entourer votre code des balises \[ et \], sinon MathJax ne fera rien. Pour plus d'informations, je vous conseille d'aller visiter le site de MathJax.

jeudi 11 août 2011

Comment insérer des équations dans Blogger (Partie 1)?

Certaines personnes m'ont posé des questions qui vont probablement nécessiter d'écrire quelques équations. Le HTML ne permet pas d'écrire des équations aussi facilement que LibreOffice ou Microsoft Word (Word est pénible pour des équations complexes. La notation de LibreOffice est supérieure.). Le site Math in HTML (and CSS) résume bien la situation. Il parle d'un langage d'équations nommé MathML qui permet d'écrire des équations. Voici un exemple d'équation écrite avec MathML:
 a+ß=y (1)  Le code pour cette équation est:
<math display="block" xmlns="http://www.w3.org/1998/Math/MathML">
 <mtable>
  <mtr>
   <mtd>
    <mrow><mi>a</mi><mo>+</mo>< mi>ß</mi><mo>=</mo><mi>y</mi>
    </mrow>
   </mtd>
   <mtd>(1)
   </mtd>
  </mtr>
 </mtable>
</math>

Ouf!!! C'est vraiment pénible! Par exemple en latex, le code serait:
\begin{equation}
\alpha+\beta=\gamma
\end{equation}

Ce qui est beaucoup plus beau et concis.

Je vais être franc, j'ai triché pour écrire le code en MathML. Je ne connais pas MathML et je n'ai aucune intention de l'apprendre. C'est trop complexe. J'ai utilisé un programme nommé LyX. J'ai exporté en XHTML et copier le code dans Blogger. LyX est un traitement de texte WYSIWYM (What You See Is What You Mean) avec une interface graphique qui montre un résultat approximatif du document. Voici une image de l'écran de LyX:
Interface du programme LyX.
LyX formate le texte avec le langage LaTeX. Les formules sont écrites en entrant les commandes LaTeX appropriées. Pour notre formule, nous choisissons dans le menu Insérer->Maths->Formule hors ligne et  entrons \alpha+\beta=\gamma. Le plus beau avec LyX est qu'il n'est pas nécessaire de connaître le LaTeX pour obtenir de fabuleuses équations. Le menu en bas permet au débutant d'entrer tout les symboles qu'il désire comme avec Microsoft Word. Bien entendu, la connaissance de LaTeX accélère grandement la vitesse de saisi des formules.

Une fois les formules créées. Il faut les exporter en HTML. Dans le menu Fichier, sélectionner Exporter et LyXHTML. LyX va générer un fichier XHTML avec votre formule écrire en MathML!  Ouvrer ce fichier avec votre éditeur de texte favori (dans mon cas Notepad++). Repérer la balise <math display="block" xmlns="http://www.w3.org/1998/Math/MathML"> Copier le code à partir du début de cette balise jusqu'à la balise de fermeture </math>. Dans Blogger passer en mode "Modifier le code HTML" et copier le code. Votre formule va apparaître dans votre texte. Cette méthode marche même pour des systèmes d'équations complexes sauf si vous êtes dans Internet Explorer... ou Chrome... Je suis tellement habitué à Firefox que j'oublie les autres fureteurs. IE ne supporte pas par défaut MathML et WebKit le supporte pour les versions 5 et plus. Je dois utiliser des images pour mes équations. Je vais continuer mes recherches et revenir avec une alternative dans le prochain billet.

Anecdote LaTeX.
J'étais au cinéma avec un ami pour voir le film Furtif. Furtif est un film d'action avec Jessica Biel qui raconte l'histoire de trois pilotes choisis pour un programme de développement de drone de combat intelligent. Le drone se nomme E. D. I. Le cerveau d'Edi est une grosse boule censée être un ordinateur quantique. À un moment dans le film, il montre le code source d'Edi. Et quand j'ai reconnu le langage, je me suis mis à rire! J'étais le seul dans la salle à rire et les gens ont dû me trouver étrange. Le langage était LaTeX! Un langage de traitement de texte pour programmer un drone de combat! Oh boy! Pas surprenant qu'Edi soit devenu fou.
Le drone E.D.I., probablement la dactylo la plus chère de l'histoire.