Como instalar o interpretador Latex MathJax no Blogger?

COMPARTILHE:

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.

Como instalar o interpretador Latex MathJax no Blogger?

$$\begin{equation*}
\left\{\begin{matrix}
-2x & + & y & - & 2z & = & 12\\
3x & + & 2y & + & 2z & = & -1\\
-7x & + & 4y & - & 3z & = & 9
\end{matrix}\right.
\end{equation*}$$
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.

1º passo: abra o modo HTML do seu blog

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 http://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.

Você pode usar o www.codecogs.com.
Clique na imagem para ampliar

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

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.

COMENTÁRIOS

BLOGGER: 6
  1. Olá Prof. Edigley


    Você me salvou :). Meu antigo interpretador de latex tinha parado de funciona no final de semana, e eu tava desesperado


    Muito obrigado

    ResponderExcluir
    Respostas
    1. Olá, Pedro!

      Fiquei feliz em ter ajudado. O novo servidor está funcionando normalmente. Nesse artigo deixei dois scripts: um antigo e outro mais estiloso.

      Um abraço!

      Excluir
  2. Muito boa explicação, tava enrolado em como usar o cifrão e antes de perguntar vi que você explicou! Valeu!

    ResponderExcluir
    Respostas
    1. Olá, Saulo!

      Fico feliz em ter ajudado. Também tinha essa dúvida.

      Um abraço!

      PS: desculpa responder agora, pois não recebi a notificação de novos comentários.

      Excluir
  3. Excelente! Me ajudou demais! Muito obrigado!!!

    ResponderExcluir
    Respostas
    1. Que bom Gustavo, mas atualmente estou usando o Katex. É muito mais rápido e leve.

      Um abraço!

      Excluir

Nome

android,27,aplicações matemáticas,119,Aprender Matemática,30,Artigo Convidado,50,Biologia,1,blog,49,Blogger,3,Camisetas de exatas,3,Carl Sagan Day,1,chrome,9,cinema,12,Concursos,3,Curiosidades matemáticas,102,curso online,10,Desafios matemáticos,44,destaque,1,determinantes,3,Dia do Estudante,1,Dia do Professor,10,Diario Escolar Digital,5,Dica de economia,4,dica de livro,32,Dica para professor,43,divulgação,60,E-book,4,Editorial,21,educação,106,ENEM,1,ensino,139,Entrevista,8,eventos,19,excel,24,extensões,11,Facebook,8,feira do livro,4,firefox,2,frações,6,funções,9,geogebra,78,GifsMatemáticos,5,google,42,história da matemática,40,humor,58,IMO,2,InternetJusta,1,iOS,19,iPad,7,iPhone,3,jogos,27,Katex,1,Latex,20,LibreOffice,11,linux,49,Livro GeoGebra,5,Mapa Mental,1,Matemática e profissões,20,Matemático do dia,27,Materiais GeoGebra,23,Mathjax,2,Netflix,7,Noticias,132,OBMEP,1,One Strange Rock,1,Papel milimetrado,4,Pi Day,16,piadas matemáticas,13,PodCast,4,política,3,premiações,7,professor,6,promoção,13,Quiz,22,Resenhas de Livros,1,Resposta Desafios,1,Sebastião Vieira,22,software,18,Software Livre,50,Tabuada,5,TCC,17,Telegram,8,TexMath,4,TIC,32,Top artigos,4,ubuntu,15,Videos,104,wallpapers matemáticos,23,Widgets,26,windows,41,wolfram alpha,30,Youtube,16,
ltr
item
Prof. Edigley Alexandre - O blog para professores e estudantes de Matemática: Como instalar o interpretador Latex MathJax no Blogger?
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.
https://4.bp.blogspot.com/-2zJclNdtClk/WFa9wcho1YI/AAAAAAAAwIo/YFXBHJ1Xfhsyu6_JZbm4Gd_TuF3IXw_8wCLcB/s1600/como-instalar-interpretador-Latex-MathJax-Blogger.png
https://4.bp.blogspot.com/-2zJclNdtClk/WFa9wcho1YI/AAAAAAAAwIo/YFXBHJ1Xfhsyu6_JZbm4Gd_TuF3IXw_8wCLcB/s72-c/como-instalar-interpretador-Latex-MathJax-Blogger.png
Prof. Edigley Alexandre - O blog para professores e estudantes de Matemática
https://www.prof-edigleyalexandre.com/2016/12/como-instalar-interpretador-latex-MathJax-Blogger.html
https://www.prof-edigleyalexandre.com/
https://www.prof-edigleyalexandre.com/
https://www.prof-edigleyalexandre.com/2016/12/como-instalar-interpretador-latex-MathJax-Blogger.html
true
125900602153146940
UTF-8
Carregar mais posts Não foram encontrados posts VER TODOS Leia mais Responder Cancelar resposta Delete Por Início PÁGINAS POSTS VER TODOS RECOMENDADOS PARA VOCÊ CATEGORIA ARQUIVO PESQUISE TODOS OS POSTS Não foi encontrada nenhuma correspondência de postagem com sua solicitação VOLTAR Domingo Segunda Terça Quarta Quinta Sexta Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez agora mesmo 1 minuto atrás $$1$$ minutes ago 1 hora atrás $$1$$ hours ago Ontem $$1$$ days ago $$1$$ weeks ago mais de 5 semanas atrás Seguidores Seguir ESTE CONTEÚDO PREMIUM ESTÁ BLOQUEADO PASSO 1: Compartilhar em uma rede social PASSO 2: Clique no link da sua rede social Copiar todo o código Selecioinar todo o código Todos os códigos foram copiados para a área de transferência Não é possível copiar os códigos / textos, pressione [CTRL] + [C] (ou CMD + C com Mac) para copiar