21/02/2010

Como inserir Latex no Blogger utilizando o script da MathJax

Para que tem um blog de Matemática, Física, Química ou outro de exatas que necessite escrever fórmulas, sempre é um problema encontrar um bom editor de fórmulas que fique com uma boa aparência ao ser publicada no blog. A solução definitiva é escrever fórmulas em comandos $\TeX$.

Infelizmente, o Blogger não oferece esse recurso, de modo que temos de instalar um script de terceiros para podermos usufruir de todos os recursos oferecidos pela linguagem $\LaTeX$.

O script da MathJax foi o melhor interpretador $\LaTeX$ que encontrei, pois é fácil de ser instalado no blogger e a tipografia obtida fica ótima!

Veremos neste artigo como instalar o script da MathJax no Blogger e como customizá-lo.

como-inserir-o-script-interpretador-de-latex-mathjax-no-blog-do-blogger

Inserindo um script da MathJax dentro do código html do blog, podemos usar os comando $\TeX$ e obter uma excelente tipografia na renderização das fórmulas. Para a fórmula da equação de segundo grau, por exemplo, vejam o resultado:
$$
x=\frac{-b \pm \sqrt{b^2-4ac}}{2a}
$$
Ao escrevermos fórmulas in-line, ou seja, no meio de uma frase, devem ser escritas entre os símbolos de $ para que o script interprete corretamente. Por exemplo, para o comando $f(x)=x^2$, obteremos este resultado: $f(x)=x^2$.

Para algumas noções básicas de como inserir fórmulas em $\LaTeX$ no blogger, acesse essa página: Exemplos em $\LaTeX$.

Inserindo o Script MathJax no código html

Para inserir o script da MathJax em seu blog, siga o procedimento abaixo:
  • Começamos abrindo o Painel do Blogger e escolha o blog em que irá instalar o script;
  • Clique em Tema;
  • Em Personalizar, clique na seta para baixo para expandir as opções;
como-inserir-latex-mathjax-no-blogger-como-ntalar-latex-mathjax-no-blogger-1.png

  • Clique em Editar HTML para acessar o código de seu blog;
como-inserir-latex-mathjax-no-blogger-como-ntalar-latex-mathjax-no-blogger

  • Utilize CRTL+F e procure pela tag </body>. Imediatamente acima, cole o seguinte script:


  • Você verá algo semelhante a isso:
como-inserir-latex-mathjax-no-blogger-como-ntalar-latex-mathjax-no-blogger

  • Clique em Visualizar Tema e confira se existe algum erro. Se estiver tudo certo, clique em Salvar.

Teoricamente, basta criar uma postagem e inserir suas fórmulas. Antes de publicar, clique em visualizar para conferir uma prévia.

Sugiro a leitura do artigo Latex em Tempo Real, pois tem algumas dicas e também é possível digitar uma sintaxe e visualizá-la simultaneamente.

Uma informação que acredito ser importante é usar fontes maiores como padrão de texto dos artigos. Se forem muito pequenas, a renderização das fórmulas não ficam tão boas. Eu utilizo fonte 17 e o resultado é muito bom. Caso achem necessário, procurem em outros tutoriais como alterar o tamanho da fonte do seu blog.

Customização

O Script acima vem como default o uso do comando $ (Cifrão simples) para fórmulas inline e $$ cifrões duplos para fórmulas destacadas, ou seja, entre parágrafos. No entanto, podemos alterar estas comandos, caso deseje.

Há alguns anos, havia um script $\TeX$ chamado Greasemonkey, um complemento para o Firefox, que utilizava os comandos [; fórmula ;] para abrir e fechar a sintaxe. Para alterar para este padrão, por exemplo, substitua os cifrões por [; e ;].


Também é possível outros modos, como usar [tex] para abrir e [/tex] para fechar a sintaxe. O mesmo vale para fórmulas destacadas, onde se usam os cifrões duplos. Experimente!


* Artigo atualizado em 24/07/2021: Alteradas as imagens devido à atualização do painel pelo Blogger.

Links para este artigo:


Veja mais:

COMO REFERENCIAR ESSE ARTIGO: Título: Como inserir Latex no Blogger utilizando o script da MathJax. Publicado por Kleber Kilhian em 21/02/2010. URL: . Leia os Termos de uso.


Siga também o blog pelo canal no Telegram.
Achou algum link quebrado? Por favor, entre em contato para reportar o erro.
Para escrever em $\LaTeX$ nos comentários, saiba mais em latex.obaricentrodamente.com.

47 comentários:

  1. Bacana amigo, obrigado por compartilhar!

    ResponderExcluir
  2. Valeu! será muito útil para mim!

    ResponderExcluir
  3. Olá Kleber,

    Existe sim uma forma de colocar Latex no fórum, mas ainda não descobri como. Caso você encontre alguma coisa, por favor me envie.

    Um abraço! Até mais!

    ResponderExcluir
  4. Ok Marcelo, vou dar uma pesquisada.

    Um abraço!

    ResponderExcluir
  5. Olá Kléber, beleza! Também estou quebrando a cabeça com fórmulas e caracteres especiais no editor do blog.Tenho usado vários paliativos, mas dá um trabalho danado.
    Uma das coisas que gostaria de implementar o latex nos comentários do blog.
    Apartir desta semana já começo a fuçar para ver se consigo entender como funciona.
    Se souber de algo, me avise. Abraços.

    ResponderExcluir
  6. Eu instalei o Script acima e consigo fazer uso da sintaxe Latex. Veja este post:

    http://obaricentrodamente.blogspot.com/2008/11/gravitao-universla-e-campo.html

    No link abaixo tem 2 PDFs com símbolos e notações matemáticas na sintaxe Latex:

    http://www.4shared.com/file/239334398/720dd8ad/comprehensive.html

    Procurei sobre usar Latex nos comentários e ainda não encontrei nada. Se souber de alguma coisa te aviso e vice-versa.

    Abraços!

    ResponderExcluir
  7. Acredito que o teu código esteja bichado. Só consegui com o código da fonte citada: http://watchmath.com/vlog/?p=438

    Orival Medeiros

    ResponderExcluir
  8. Obrigado por me avisar, realmente havia um erro. Mas já está corrigido. Abraços!

    ResponderExcluir
  9. Esse código ainda funciona no Blogger?
    Acho que não está dando certo comigo...

    ResponderExcluir
    Respostas
    1. Olá Caroline. Funciona sim. Acabei de fazer um teste: copiei o código e inseri num blog de teste que tenho. Funcionou perfeitamente. Confirme se entrou no modo MODELO >> EDITAR HTML, busque pela tag HEAD e cole o código logo abaixo. Salve e faça uma postagem de teste. Antes de publicar, clique em VISUALIZAR.

      Um abraço.

      Excluir
  10. Teste de equação: Identidade de Euler

    ${ e }^{ i\pi }\quad +\quad 1\quad =\quad 0$

    Att. Romirys Cavalcante

    ResponderExcluir
  11. Implementando por estes dias no Xarlleslb Blog, valeu pelo post!
    Revivendo tex!!!

    ResponderExcluir
    Respostas
    1. Jura, vc conseguiu?No meu blog - A matemática pura - não tou conseguindo colocar de jeito nenhum.

      Excluir
    2. Foi só colocar o código no html e funcionou bem; só tive que rever muitas postagens: trocando imagens por $tex$, em lugares que usei \$ como símbolo de reais tive que adicionar \ antes, formatações e outros...

      Excluir
    3. O código funciona bem. Quanto ao cifrão, temos que refazer essa parte nas pastagens antigas. Agora, realmente é um trabalho grande refazer todas as postagens. Aqui no blog ainda tem várias postagens usando imagens para as formulas. Aos poucos vou atualizando.

      Abraços.

      Excluir
  12. Kleber, apenas uma dúvida... Ele renderiza a fórmula na hora ou só depois que sai a postagem? Eu testei aqui e, quando peguei o celular para ver como ficou, vi que a fórmula não tinha " tomado forma " ainda tava só o código.

    ResponderExcluir
  13. A renderização não é na hora. Há pouco tempo atrás bastava clicar visualizar e abria uma nova tela como o post iria ficar. Parece que o blogger andoj mexendo em algo. Agora, somente depois de mandar publicar. Tem um site da codecogs que tem um formulário online e da para ir testando os codigos antes. Dependendo do template que vc usa, como o meu, as formulas so renderizam no celular se clicar no link la no fim da pagina para versão para web. Tente e se tiver duvida me avise. Abraços.

    ResponderExcluir
  14. Obrigado colega! Funcionou aqui de boa!!

    ResponderExcluir
  15. Obrigada pelo post, me ajudou!

    ResponderExcluir
  16. Valeu! Deu certo $$\underset{n\rightarrow\infty}{lim}\frac{\ln\;n}n$$

    ResponderExcluir
  17. Boa noite
    o código quando inserido está fazendo algumas alterações automaticamente e não está funcionando

    tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ],
    displayMath: [ ['$$','$$'], ["\\[","\\]"] ],

    teria como me ajudar?

    ResponderExcluir
    Respostas
    1. Jonilsin, este script é o que está no meu blog. Tente copia-lo e colar no bloco de notas. Em seguida copie e cole no html.

      De qualquer forma, à noite farei um novo teste.

      Qualquer dúvida envie-me um e-mail.

      Abraços.

      Excluir
    2. Acabei de testar. Está funcionando ok. Envie sua dúvida para meu e-mail para tentarmos encontrar o erro. Abraços.

      Excluir
  18. Mandei no e-mail ,

    Grato

    Jonilson

    ResponderExcluir
  19. Kleber, muito obrigado.
    Bastou apenas mudar para o modelo simples e funcionou.
    Valeu!!!

    ResponderExcluir
  20. Como aceitar latex nos comentários de meu blog no blogger?

    ResponderExcluir
    Respostas
    1. Francisco, no caso do meu blog, ao incluir o código no corpo do html, já serviu para os comentários também. Inclusive nos widgets também funciona. Faça um teste. abraços.

      Excluir
  21. Muito obrigado Kleber! Estive por bastante tempo procurando uma maneira de integrar o LaTeX ao HTML.

    ResponderExcluir
  22. Que achado esta dica! Obrigadaço!

    ResponderExcluir
  23. parabéns pelo blog, vou usar essas dicas em minha agencia de marketing SP parabéns por esse assunto, me ajudou muito mesmo, gostei

    ResponderExcluir
  24. Eu não consigo encontrar a opção "modelo" na página do blog

    ResponderExcluir
    Respostas
    1. O blogger atualizou há alguns dias.

      No painel.do blogger, vá em Tema e depois clique no s 3 pontinhos no lado direito e clique em editar HTML.

      Excluir
    2. Já atualizei o post com novas imagens.

      Excluir
  25. Olá, é possível inserir matrizes com esse código?

    ResponderExcluir
    Respostas
    1. Olá, sim é possível. Veja abaixo. No menu, tem um link para LATEX >> Exemplos em Latex. Tem vários exemplo.

      \begin{equation}
      A =
      \begin{bmatrix}
      a_{11} & a_{12} & a_{13}\\
      a_{21} & a_{22} & a_{23}\\
      a_{31} & a_{32} & a_{33}
      \end{bmatrix}
      \end{equation}

      Excluir
  26. Olá Kleber Kilhian, estou escrevendo um blog sobre algebra e estou com MUITA dificuldade para compilar o comando de matriz. As vezes pega, mas na maioria das vezes não pega. Poderiamos conversar por email? pois preciso de ajuda. Obrigado

    ResponderExcluir
  27. Existe uma forma de usá-lo no Wix? Tenho um site no wix e não consigo utilizar esse script

    ResponderExcluir
  28. Quero começar meu blog de Matemática, mas não consegui inserir o código.

    ResponderExcluir
    Respostas
    1. Olá. O que não conseguiu fazer? Envie-me um email.

      Excluir
  29. Boa tarde. O código latex funciona perfeitamente para o computador, mas para o mobile está apresentando erros. Poderia me ajudar?

    ResponderExcluir
    Respostas
    1. Boa tarde Tiago.

      Me envie um email para eu poder te encaminhar um novo script para testar:

      kleberkilhian@gmail.com

      Abs

      Excluir

Whatsapp Button works on Mobile Device only

Pesquise no blog