Como instalar o interpretador Latex MathJax no Blogger?

Neste artigo darei todas as dicas para você instalar o MathJax em seu blog no Blogger e como escrever em Latex em seus artigos.

A grosso modo, um interpretador $\LaTeX$ é um software que transforma um comando digitado em um ambiente, de acordo com parâmetros pré-estabelecidos, em simbologia matemática universal.

Se você tem um blog hospedado na plataforma Blogger e ele trata de artigos sobre ciências exatas, com certeza uma hora precisará usar simbologia matemática adequada (simples ou complexa). No começo desse blog utilizava imagens de equações nos artigos, o que deixava tudo desordenado e nada bonito.

Como o MathJax você terá uma simbologia matemática de rápida renderização, muito organizada e de estética impressionante. Veja um exemplo abaixo de simbologia matemática usando o MathJax.

• [message]
• ##exclamation-triangle## ATUALIZAÇÃO 12/12/21
• Atualmente o blog está utilizando o Katex. Ver post Como instalar o interpretador Katex no Blogger. Mais veloz que o Mathjax! A escolha se deve apenas por causa da velocidade do Katex, visto que não utilizo muitas simbologias complexas que o Katex ainda não suporta. O Mathjax é o mais completo.

$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$$
Já testei alguns interpretadores online e o melhor até então é o MathJax.

Neste artigo darei todas as dicas para você instalar o MathJax em seu blog no Blogger e como escrever em $\LaTeX$ em seus artigos. Veja esse artigo que contém simbologia matemática e note como é importante ter um interpretador $\LaTeX$ em seu blog.

Antes uma dica: Você pode usar o Facebook Messenger para conversar com amigos e tirar dúvidas de Matemática usando Latex. Saiba mais no artigo Agora o Facebook Messenger permite que você escreva fórmulas matemáticas básicas em Latex.

1º passo: abra o modo HTML do seu blog

Acesse o painel do seu blog pelo endereço www.blogger.com. Ver imagem abaixo.

Espere carregar o modo HTML do blog. Clique em qualquer parte do código visível e em seguida tecle Ctrl+F (control F). No campo que abrir na parte superior direita do código fonte, digite </body>.

Automaticamente esse trecho será encontrado e destacado com uma cor amarela. Imediatamente acima de </body> cole o código que está logo abaixo.

[<!-- INICIO SCRIPT LATEX -->
<b:if cond='data:blog.pageType == "item"'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?'type='text/javascript'>   
MathJax.Hub.Config({
HTML:["input/TeX","output/HTML-CSS"],
TeX:{ extensions:["AMSmath.js","AMSsymbols.js"],
equationNumbers:{ autoNumber:"AMS"}},
extensions:["tex2jax.js"],
jax:["input/TeX","output/HTML-CSS"],
tex2jax:{inlineMath:[['$','$'],["\(","\)"]],
displayMath:[['$$','$$'],["\[","\]"]],
processEscapes:true},
"HTML-CSS":{availableFonts:["TeX"],
linebreaks:{automatic:true}}});</script>
</b:if>
<!-- FIM SCRIPT LATEX -->]

Agora basta clicar no botão Salvar modelo.

Se o código mostrar um erro e não puder ser salvo, precisará parsear o código. Veja como é fácil:

1. Copie o código indicado acima.
2. Acesse o endereço https://www.blogcrowds.com/resources/parse_html.php.
3. Cole o código e aperte PARSE.
4. Copie o código parseado e cole no local indicado, que é acima de </body>.

2º passo: entenda o código

Como os comandos em $\LaTeX$ serão inseridos apenas dentro de artigos, não faz sentido o MathJax carregar o seu script na página inicial do blog ou em qualquer outra página, a não ser onde tem códigos em $\LaTeX$.

Os códigos (linhas 1 e 16) abaixo são apenas comentários e servem para achar o código de forma mais rápida usando o Ctrl+F, além de, obviamente, informar onde começa e termia o código.

[<!-- INICIO SCRIPT LATEX -->
<!-- FIM SCRIPT LATEX -->]

O código (linha 2 e 15) é a condicional do Blogger que exibe simbologia matemática renderizada pelo MathJax apenas dentro das postagens do blog.

[<b:if cond='data:blog.pageType == "item"'>
</b:if>]

Da linha 3 a 14 é código do MathJax.

[<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?' type='text/javascript'>   
MathJax.Hub.Config({
HTML:["input/TeX","output/HTML-CSS"],
TeX:{ extensions:["AMSmath.js","AMSsymbols.js"],
equationNumbers:{ autoNumber:"AMS"}},
extensions:["tex2jax.js"],
jax:["input/TeX","output/HTML-CSS"],
tex2jax:{inlineMath:[['$','$'],["\(","\)"]],
displayMath:[['$$','$$'],["\[","\]"]],
processEscapes:true},
"HTML-CSS":{availableFonts:["TeX"],
linebreaks:{automatic:true}}});</script>]

3º passo: como escrever em $\LaTeX$ dentro de artigos

Escreva seu artigo normalmente como sempre faz. Quando precisar escrever simbologias matemáticas, escreva-as entre os cifrões de dólar. Veja os exemplos abaixo.

Exemplo 1, com comando em linha:
A equação fracionária $\cfrac{2x-4}{5}=\cfrac{1}{7}$, tem como solução real:

Exemplo 1, interpretado em linha:
A equação fracionária $\cfrac{2x-4}{5}=\cfrac{1}{7}$, tem como solução real:

Observe que a equação fica centralizada de acordo a altura da linha onde a escreveu. Lindo né! :D

Se você quiser centralizar simbologias matemáticas, basta usar cifrões duplos. Veja nos exemplos abaixo.

Exemplo 2, com comando centralizado:

A fórmula abaixo é utilizada para calcular raízes de uma equação do 2º grau.

$$x=\cfrac{-b \pm \sqrt{b^{2}-4.a.c}}{2.a}$$

Exemplo 2, interpretado e centralizado:

A fórmula abaixo é utilizada para calcular raízes de uma equação do 2º grau.

$$x=\cfrac{-b \pm \sqrt{b^{2}-4.a.c}}{2.a}$$

Observação: se precisar usar o cifrão dólar em textos (preços de objetos), coloque uma contra barra (antes de $) para que o símbolo $ não atrapalhe outros comando inseridos.

4º passo: não sei escrever em $\LaTeX$

Você não precisa conhecer todos os comandos em $\LaTeX$ para escrever simbolias matemáticas em seus artigos. Você pode escrever em $\LaTeX$ usando outros programas, que permitem apenas tocar em cada símbolo para gerar um código.

Você pode usar o codecogs.

Clique na imagem para ampliar

Você pode usar uma extensão para o Google Chrome, a extensão Daum Equation.

Após escrever o seu artigo, verifique se todos os comandos em $\LaTeX$ estão corretos e em seguida clique em Visualizar. Se tudo aparecer corretamente, publique seu artigo.

Quer testar o MathJax em tempo real? Acesse latex.prof-edigleyalexandre.com.

Atualização: 02/05/2017

O provedor

https://cdn.mathjax.org/mathjax/2.7-latest/MathJax.js?...

Foi trocado por

https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?...

Atualização: 30/05/2017

Para uma renderização mais estilosa, você pode usar o script abaixo. O script no início da postagem mais clássico ainda pode der utilizado.

[<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/javascript">MathJax.Hub.Config({
  tex2jax: {inlineMath: [['$','$'],['[m]','[/m]']], displayMath: [['[mm]','[/mm]'],['$$','$$']]},
  "HTML-CSS": { scale: 100, showMathMenu: false, minScaleAdjust: 100}
});</script>]

Atualização: 11/07/2018

CDN atualizado para versão 2.7.4.

Concluindo

As suas postagens ficarão muita mais estilosas com o MathJax. Além de escrever artigos recheados de simbologia matemática, os visitantes também poderão inserir comentários escritos em $\LaTeX$, mas somente no sistema de comentários do Blogger.

Este artigo conta com informações de O Baricentro da Mente e o MathJax.org.