Como instalar o interpretador Katex no Blogger. Mais veloz que o Mathjax! 😱

COMPARTILHE:

Aprenda a instalar o Katex no Blogger. Ele é muito mais rápido do que o Mathjax

Para quem utiliza bastante simbologia matemática em Latex, como o site Khan Academy e Brainly, ou em em blogs matemáticos, como este blog e o O Baricentro da Mente, implementar um interpretador Latex que renderize ótimas equações é absolutamente indispensável.

Atualmente esse blog e outros que já criei e ajudo no gerenciamento, executa um interpretador de linguagem Latex. Há alguns bons softwares que oferecem um serviço estético impressionante, como o Mathjax, porém no quesito velocidade esse peca um pouquinho. Já o Katex impressiona demais quanto a sua velocidade em relação ao Mathjax, quanto a estética é o padrão como de costume.

Veja esse comparativo entre o Mathjax e Katex e depois terá a mesma reação que tive: nooossa! 😱 A diferença é gigantesca. E é por isso que escrevi essa postagem.

Depois de tanto tentar, consegui encontrar um jeito de rodar o Katex no Blogger, mas com algumas ressalvas importantes. Fique atento.
ATENÇÃO: Os testes e uso do Katex nesse blog foram instalados com a versão 0.10.0-beta. Antes de instalar em seu blog principal faça alguns testes em outro blog.
Quer instalar o Katex em seu blog? Continue lendo essa postagem.

Como instalar o interpretador Katex no Blogger. Mais veloz que o Mathjax! 😱
IMPORTANTE: O Katex não é um ambiente novo, porém alguns elementos muito úteis para quem escreve em Latex ainda não foram implementados em seus scripts.
Estou me referindo a alguns ambientes específicos como \begin {equation} e \begin{displaymath}, por exemplo.
  • \begin{displaymath} ... \end{displaymath} – para inserir em linhas separadas do texto, sem numeração.
  • \begin{equation} ... \end{equation} – para inserir em linhas separadas do texto, enumeradas

Veja um exemplo de página enumerada usando \begin {equation} no artigo Como Construir uma Espiral Pitagórica do blog O Baricentro da Mente.

E infelizmente esse ambiente específico não está disponível no Katex 0.10.0-beta. Mas, quem sabe em breve. Estou em contato com alguns membros do Khan Academy no Github e espero que melhorias estejam a caminho para as novas vesões, pois muitas pessoas perguntam sobre isso.

Portanto, se você tem um blog matemático ou de outra área que escreve simbologias em Latex usando com muita frequência \begin {equation}, atente para esse fato, não instale em seu blog.

No entanto, se o seu blog (como esse) não usa equações enumeradas automáticas usando o \begin {equation}, instale o Katex em seu blog e seja feliz! 😉

Um pouco sobre o Katex

Como disse anteriormente o Katex não é novo e seu desenvolvimento é muito ativo. Ele foi criado por Emily Eisenberg e Sophie Alpert para o Khan Academy, que oferece suporte a escrita em Latex em seu ambiente educacional. Isso faz toda a diferença para quem estuda por lá.

Acesse essa aula sobre Trigonometria com triângulos retângulos no Khan Academy e veja como a linguagem Latex é importante.

Como instalar o interpretador Katex no Blogger

Atente para essas 3 situações:
  1. O seu blog é novo e não escreve em Latex ainda? Se sim, vai nessa e instale o Katex. Você não precisa entender de Latex para escrever em Latex. Aqui no blog tem muitos artigos com dicas maravilhosas para escrever em Latex.
    1. Dica 1: Escreva equações usando apenas o mouse.
    2. Dica 2: Editor de equações matemáticas para o Chrome.
    3. Dica 3: Alternativa para editor de equações Latex online.
  2. O seu blog não é novo e tem centenas de artigos e ainda usando \begin {equation}? Se sim, não instale o Katex. Continue com o Mathjax que suporta tudo.
  3. O seu blog não é novo e tem um ou dois artigos usando \begin {equation}? Se sim, retire o Mathjax e instale o Katex.

Instalação 1: Katex em um blog novo no Blogger

1º passo: abra o modo HTML do seu blog.

Dê um clique em qualquer área do código HTML e depois dê um Ctrl+F (pesquisar) e no campo de pesquisa que abriu e digite exatamente <head> e tecle ENTER. Esse trecho pesquisado ficará em destaque.

Exatamente abaixo de <head> adicione o código abaixo: É um CSS e dois JavaScript:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.css"
integrity="sha384-9tPv11A+glH/on/wEu99NVwDPwkMQESOocs/ZGXPoIiLE8MU/qkqUcZ3zzL+6DuH" crossorigin="anonymous"/>
<script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.js"
integrity="sha384-U8Vrjwb8fuHMt6ewaCy8uqeUXv4oitYACKdB0VziCerzt011iQ/0TqlSlv8MReCm" crossorigin="anonymous"/>
<script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/contrib/auto-render.min.js"
integrity="sha384-aGfk5kvhIq5x1x5YdvCp4upKZYnA8ckafviDpmWEKp4afOZEqOli7gqSnh8I6enH" crossorigin="anonymous"/>
Se o código não estiver aparecendo acima, copie através do meu Pastebin.

2º passo: último código.

Mais uma vez dê um clique em qualquer área do código HTML e depois dê um Ctrl+F (pesquisar) e no campo de pesquisa que abriu e digite exatamente </body> e tecle ENTER.Esse trecho pesquisado ficará em destaque.

Exatamente acima de </body> adicione o código abaixo: É um JavaScript:
<!-- KATEX - INICIO -->
<script>
      renderMathInElement(
          document.body,
          {
              delimiters: [
                  {left: &quot;$$&quot;, right: &quot;$$&quot;, display: true},
                  {left: &quot;\\[&quot;, right: &quot;\\]&quot;, display: true},
                  {left: &quot;$&quot;, right: &quot;$&quot;, display: false},
                  {left: &quot;\\(&quot;, right: &quot;\\)&quot;, display: false}
              ]
          }
      );
    </script>
<!-- KATEX - FIM -->
Se o código não estiver aparecendo acima, copie através do meu Pastebin.

Pronto! Agora clique em Salvar tema. Clique no botão abaixo ver todas as funções que suporta o Katex.

Katex - Suporte

Instalação 2: Tirando o Mathjax e instalando o Katex no Blogger

Esse processo se aplica somente se você instalou o Mathjax através do artigo Como instalar o interpretador Latex MathJax no Blogger? publicado no blog em 18 de dezembro de 2016 e atualizado em 11 de julho de 2018.

Se seguiu outro processo diferente do referenciado acima, não recomendo retirar o Mathjax e instalar o Katex.

1º passo: abra o modo HTML do seu blog.

Dê um clique em qualquer área do código HTML e depois dê um Ctrl+F (pesquisar) e no campo de pesquisa que abriu e digite exatamente INICIO SCRIPT LATEX e tecle ENTER. Esse trecho pesquisado ficará em destaque.

Se você encontrar o código como mostrado na imagem abaixo, basta deletá-lo. Selecione de INICIO SCRIPT LATEX até FIM SCRIPT LATEX.

Deletar Mathjax do Blogger

Depois de ter deletado, clique em Salvar tema.

2º passo: instalando o Katex.

Basta seguir os mesmos passos descritos em Instalação 1: Katex em um blog novo no Blogger e tem poucos artigos usando \begin{equation}.

Sobre os delimitadores do Katex

Como descritos no 2º passo da Instalação 1, os delimitadores que ativei com true e false, correspondem a utilizar os comandos em Latex, entre cifrão dólar simples $ e duplo $$.

Para escrever simbologia matemática inline (na mesma linha do texto) use cifrão simples.

Para escrever simbologia matemática em destaque (centralizada) use cifrão duplo.

Veja os exemplos abaixo:

Exemplo com cifrão simples: $\displaystyle f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x} \,d\xi$.

O texto digitado foi:

Exemplo com cifrão simples: $\displaystyle f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x} \,d\xi$

Exemplo com cifrão duplo a equação ficará destacada (centralizada): $$\displaystyle f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x} \,d\xi$$.

O texto digitado foi:

Exemplo com cifrão duplo a equação ficará destacada (centralizada): $$\displaystyle f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x} \,d\xi$$

Concluindo

O Katex é uma bala! 😂

Se você encontrar alguma simbologia matemática em Latex sem ser renderizada, por favor me informe através desse formulário.

COMENTÁRIOS

TOTAL
Nome

android,27,aplicações matemáticas,118,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,107,ENEM,1,ensino,140,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,71,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,21,Matemático do dia,27,Materiais GeoGebra,23,Mathjax,2,Netflix,7,Noticias,133,OBMEP,1,One Strange Rock,1,Papel milimetrado,4,Pi Day,16,piadas matemáticas,15,PodCast,4,política,4,premiações,7,professor,7,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,Tirinhas,18,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 Katex no Blogger. Mais veloz que o Mathjax! 😱
Como instalar o interpretador Katex no Blogger. Mais veloz que o Mathjax! 😱
Aprenda a instalar o Katex no Blogger. Ele é muito mais rápido do que o Mathjax
https://4.bp.blogspot.com/-asesqz5IEBA/W1CsfVAgZnI/AAAAAAAA8z0/l0V4KymxarwfnLiPJGOHFd1Yf0XPHySEACLcBGAs/s1600/como-instalar-interpretador-Katex-Blogger-mais-veloz-que-Mathjax.png
https://4.bp.blogspot.com/-asesqz5IEBA/W1CsfVAgZnI/AAAAAAAA8z0/l0V4KymxarwfnLiPJGOHFd1Yf0XPHySEACLcBGAs/s72-c/como-instalar-interpretador-Katex-Blogger-mais-veloz-que-Mathjax.png
Prof. Edigley Alexandre - O blog para professores e estudantes de Matemática
https://www.prof-edigleyalexandre.com/2018/07/como-instalar-interpretador-Katex-Blogger-mais-veloz-que-Mathjax.html
https://www.prof-edigleyalexandre.com/
https://www.prof-edigleyalexandre.com/
https://www.prof-edigleyalexandre.com/2018/07/como-instalar-interpretador-Katex-Blogger-mais-veloz-que-Mathjax.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