Pular para o conteúdo principal
Version: 2.1.0

Equações Matemáticas

As equações matemáticas podem ser processadas usando KaTeX.

Utilização​

Leia a documentação da KaTeX para obter mais detalhes.

Embutido​

Escreva equações matemáticas em linha envolvendo equações LaTeX entre $:

Let $f\colon[a,b]\to\R$ be Riemann integrable. Let $F\colon[a,b]\to\R$ be
$F(x)=\int_{a}^{x} f(t)\,dt$. Then $F$ is continuous, and at all $x$ such that
$f$ is continuous at $x$, $F$ is differentiable at $x$ with $F'(x)=f(x)$.
http://localhost:3000

Let f ⁣:[a,b]→Rf\colon[a,b] \to \R be Riemann integrable. Let F ⁣:[a,b]→RF\colon[a,b]\to\R be F(x)=∫axf(t) dtF(x)= \int_{a}^{x} f(t)\,dt. Então FF é contínua e xx tal que ff é contínua em xx, FF é derivável xx com F′(x)=f(x)F'(x)=f(x).

Blocos​

Para bloco de equação ou modo de exibição, use quebra de linha e $$:

$$
I = \int_0^{2\pi} \sin(x)\,dx
$$
http://localhost:3000
I=∫02πsin⁡(x) dxI = \int_0^{2\pi} \sin(x)\,dx

Configuração​

Para habilitar o KaTeX, você precisa instalar plugins remark-math e rehype-katex.

npm install --save remark-math@3 rehype-katex@5 hast-util-is-element@1.1.0
warning

Use exatamente as mesmas versões. As versões mais recentes são incompatíveis com o Docusaurus 2.

Importe os plugins no docusaurus.config.js:

const math = require('remark-math');
const katex = require('rehype-katex');

Adicione-os ao seu plugin de conteúdo ou opções de predefinição (geralmente opções @docusaurus/preset-classic):

remarkPlugins: [math],
rehypePlugins: [katex],

Include the KaTeX CSS in your config under stylesheets:

stylesheets: [
  {
    href: 'https://cdn.jsdelivr.net/npm/katex@0.13.24/dist/katex.min.css',
    type: 'text/css',
    integrity:
      'sha384-odtC+0UGzzFL/6PNoE8rX/SPcQDXBJ+uRepguP4QkPCm2LBxH3FA3y+fKSiJ+AmM',
    crossorigin: 'anonymous',
  },
],

Overall the changes look like:

docusaurus.config.js
const math = require('remark-math');
const katex = require('rehype-katex');

module.exports = {
  title: 'Docusaurus',
  tagline: 'Build optimized websites quickly, focus on your content',
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          path: 'docs',
          remarkPlugins: [math],
          rehypePlugins: [katex],
        },
      },
    ],
  ],
  stylesheets: [
    {
      href: 'https://cdn.jsdelivr.net/npm/katex@0.13.24/dist/katex.min.css',
      type: 'text/css',
      integrity:
        'sha384-odtC+0UGzzFL/6PNoE8rX/SPcQDXBJ+uRepguP4QkPCm2LBxH3FA3y+fKSiJ+AmM',
      crossorigin: 'anonymous',
    },
  ],
};

Self-hosting KaTeX assets​

Loading stylesheets, fonts, and JavaScript libraries from CDN sources is a good practice for popular libraries and assets, since it reduces the amount of assets you have to host. In case you prefer to self-host the katex.min.css (along with required KaTeX fonts), you can download the latest version from KaTeX GitHub releases, extract and copy katex.min.css and fonts directory (only .woff2 font types should be enough) to your site's static directory, and in docusaurus.config.js, replace the stylesheet's href from the CDN URL to your local path (say, /katex/katex.min.css).

docusaurus.config.js
module.exports = {
  stylesheets: [
    {
      href: '/katex/katex.min.css',
      type: 'text/css',
    },
  ],
};
tip

Only use the latest version if you actually need the bleeding-edge features of KaTeX\KaTeX. Most users should find the older versions work just as well.

The latest versions of rehype-katex (starting from v6.0.0) has moved to ES Modules, a new module system of JavaScript, which Docusaurus doesn't officially support yet. However, it is possible to import rehype-katex dynamically, using an async config creator. Docusaurus will call this creator function and wait for it to return the config object.

docusaurus.config.js
async function createConfig() {
  // ES Modules are imported with `import()` instead of `require()`, and are imported asynchronously
  const katex = (await import('rehype-katex')).default;
  return {
    // ...
  };
}

In this case, the overall configuration changes will look like:

docusaurus.config.js
const math = require('remark-math');

async function createConfig() {
  const katex = (await import('rehype-katex')).default;
  return {
    title: 'Docusaurus',
    tagline: 'Build optimized websites quickly, focus on your content',
    presets: [
      [
        '@docusaurus/preset-classic',
        {
          docs: {
            path: 'docs',
            remarkPlugins: [math],
            rehypePlugins: [katex],
          },
        },
      ],
    ],
    stylesheets: [
      {
        href: 'https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.css',
        type: 'text/css',
        integrity:
          'sha384-MlJdn/WNKDGXveldHDdyRP1R4CTHr3FeuDNfhsLPYrq2t0UBkUdK2jyTnXPEK1NQ',
        crossorigin: 'anonymous',
      },
    ],
  };
}

module.exports = createConfig;