Home>

I want to display latex as an expression from javascript, and I use katex, but I can't use it for some reason

As in official documentation , for example,

const resultElement = this.refs.result;
katex.render ("\\ frac {3} {4}", resultElement);

I thought it would be possible to display 3/4 in this way,
The result is

\ frac {3} {4} 43

is displayed

The environment is written using React and webpack. The version of katex is 0.10.0-rc.1 and is done for div elements.
Do I have to add something or do I have to do some special processing? Best regards

  • Answer # 1

    When I tried it, it looks like this if the KaTeX CSS file is not loaded.

      

    Note that you have to bundle the stylesheet (katex.css) or include it manually.

      

    Browser KaTeX

    It is necessary to describe loader in webpack.config.js to use CSS files from webpack.
    Loading CSS-Asset Management | webpackjs.org

    In the case of katex.css this time, font files (ttf, woff, woff2) are also loaded from CSS, so it is necessary to set loader for the font file.
    Loading Fonts-Asset Management | webpackjs.org

    The required loader settings are as follows.
    (Don't forgetnpm install --save-dev style-loader css-loader file-loader.)

    // Part of webpack.config.js
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(ttf|woff2?)$/,
        use: [
          'file-loader'
        ]
      }
    ]

  • Answer # 2

    Although not familiar with KaTeX, write \ frac {3} {4} to represent 3/4 in LaTeX.
    In the sample, there were two places with \ and \\, so why not try \\ frac {3} {4}?

    Note: If you cannot enter a backslash \ such as Windows, use \ instead.

  • Answer # 3

    I think the easiest way is to use the Auto-render Extension.

    <! DOCTYPE html>
    <html lang = "en">
      <head>
        <meta charset = "utf-8">
        <title>test</title>
        <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity = "sha384-D + 9gmBxUQogRLqvARvNLmA9hS2x// eK1FhVb9PiU86gmcrBrJAQT8okdJ4LMp2uv "crossorigin =" anonymous ">
        <script defer src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity = "sha384-483A6DwYfKeDa0Q52fJmxFXkcPCFfnXMoXblOkJ4JcA8zATN6Tm78UNL72origin0" "></script>
        <script defer src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity = "sha384-yACMu8JWxKzSp/C1YV86pzGiQ/l1YUfE8oPuahJQxzehAjEt2GiQuy/BIvl9KyeF "crossorigin =" anonymous "
        onload = "renderMathInElement (document.body);"></script>
      </head>
      <body>
        <div>
          \ [
          \ frac {3} {4}
          \]
        </div>
      </body>
    </html>