How to use katex - 10 common examples

Vue.directive('katex', (el, binding) => {
			// const displayStyle = binding.arg === 'display';
			// const expression = binding.value.expression ? binding.value.expression : binding.value;
			if (binding.value.expression) {
				if (binding.value.options) {
					renderMathInElement(
						el,
						...binding.value.options,
					);
				} else {
					renderMathInElement(
						el,
					);
				}
			} else {
				// console.log(el);
				renderMathInElement(
					el,
					{
						delimiters: [
							{ left: '$$', right: '$$', display: true },
							{ left: '$', right: '$', display: false },
							{ left: '\\[', right: '\\]', display: true },
							{ left: '\\(', right: '\\)', display: false },
						],
					},
				);

mdc.renderer.rules.code_inline = function(tokens, idx) {
  var code = tokens[idx].content;
  if(code.startsWith('$') && code.endsWith('$')) { // inline math
    code = code.substr(1, code.length-2);
    try{
      return katex.renderToString(code);
    } catch(err) {
      return '<code>' + err + '</code>';
    }
  }
  return '<code>' + code + '</code>'; // not math
}

updated: function () {
      // TODO: use smaller scope here
      KatexAutoRender(document.body, {delimiters: [
        {
          left: '$$',
          right: '$$',
          display: false
        }
      ]})
    }
  }

var parseMath = function(text) {
    // NOTE: `katex` is a global. We assume it has been imported somehow.
    //
    // colorIsTextColor is an option added in KaTeX 0.9.0 for backward
    // compatibility. It makes \color parse like \textcolor. We use it
    // in the KA webapp, and need it here because the tests are written
    // assuming it is set.
    return katex.__parse(text, {colorIsTextColor: true});
};

{},
        {
          displayMode: !!props.block,
          errorColor: props.errorColor,
          throwOnError: !!props.renderError
        },
        // you can rewrite all KaTeX options directly
        props.settings
      )
    );

    return (
      
    );
  } catch (error) {
    if (error instanceof KaTeX.ParseError || error instanceof TypeError) {
      return props.renderError ? (
        props.renderError(error)
      ) : (
        
      );
    }

    throw error;
  }
}

for (let i = 0; i < data.length; i++) {
        if (data[i].type === "text") {
            fragment.appendChild(document.createTextNode(data[i].data));
        } else {
            const span = document.createElement("span");
            let math = data[i].data;
            // Override any display mode defined in the settings with that
            // defined by the text itself
            optionsCopy.displayMode = data[i].display;
            try {
                if (optionsCopy.preProcess) {
                    math = optionsCopy.preProcess(math);
                }
                katex.render(math, span, optionsCopy);
            } catch (e) {
                if (!(e instanceof katex.ParseError)) {
                    throw e;
                }
                optionsCopy.errorCallback(
                    "KaTeX auto-render: Failed to parse `" + data[i].data +
                    "` with ",
                    e
                );
                fragment.appendChild(document.createTextNode(data[i].rawData));
                continue;
            }
            fragment.appendChild(span);
        }
    }

    return fragment;
};

renderMath() {
        // This is necessary to render inline math for firefox.
        // s are treated differently.
        renderMathInElement(this, MATH_RENDER_OPTIONS);
    }
    renderOutline() {

);
              node.nodeValue = newText;
            });
          });
        }

        // find the math in code blocks
        const latex = wrapper.querySelectorAll('code.latex.language-latex');
        const asciimath = wrapper.querySelectorAll(
          'code.asciimath.language-asciimath',
        );

        renderBlockElements({ elements: latex, config });
        renderBlockElements({ elements: asciimath, config, isAsciimath: true });

        renderMathInElement(wrapper, config);

        // return html without the wrapper
        return wrapper.innerHTML;
      },
    },

*  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *         http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

import * as katex from 'katex';

export const katexCss = require('katex/dist/katex.css').toString();

const latexFormulaRegex = /^(?:\$)(.+)(?:\$)$/; // match strings like '$e^{i\pi} + 1 = 0$'
const latexCache = {};

export default class LatexRenderer {

    /**
     * Convert given LaTeX formula into HTML representation.
     * @param text - ex. '$e^{i\pi} + 1 = 0$'
     */
    static latexToHtml(text: string): string {
        let [, formula] = text.match(latexFormulaRegex);

        if (latexCache[formula]) {
            return latexCache[formula];
        }

it('renders correctly', () => {
      const math = shallow({ integralFormula });

      expect(math.html()).to.equal(
        `<${wrapperTag}>${ KaTeX.renderToString(integralFormula, { displayMode }) }`
      );
    });