How to use the katex.render function in katex

To help you get started, we’ve selected a few katex examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

chanzuckerberg / czi-prosemirror / src / ui / renderLaTeXAsHTML.js View on Github

export default function renderLaTeXAsHTML(latex: ?string): string {
  if (cached.hasOwnProperty(latex)) {
    return cached[latex];
  }

  const latexText = latex || '';
  latexEl.innerHTML = '';
  if (!latexText) {
    return latexText;
  }
  try {
    katex.render(latex, latexEl);
  } catch (ex) {
    console.warn(ex.message, latex);
    latexEl.innerHTML = '';
    latexEl.appendChild(document.createTextNode(latexText));
  }
  const html = latexEl.innerHTML;
  latexEl.innerHTML = '';
  cached[latex] = html;
  return html;
}

StochSS / stochss / app / static / modelEditor / forms / reaction-detail.js View on Github

\
";
        }

        View.prototype.render.apply(this, arguments);

        this.listenTo(this.model, 'change', _.bind(this.redrawLatex, this));
        this.listenTo(this.baseModel.species, 'change:name', _.bind(this.redrawLatex, this));
        this.listenTo(this.model.reactants, 'add remove change', _.bind(this.redrawLatex, this));
        this.listenToAndRun(this.model.products, 'add remove change', _.bind(this.redrawLatex, this));

        var options = [];
        var emptyDiv = $( '<div>' );
        katex.render('\\emptyset \\rightarrow A', emptyDiv[0]);
        options.push(['creation', emptyDiv.html()]);
        katex.render('A \\rightarrow \\emptyset', emptyDiv[0]);
        options.push(['destruction', emptyDiv.html()]);
        katex.render('A \\rightarrow B', emptyDiv[0]);
        options.push(['change', emptyDiv.html()]);
        katex.render('A + A \\rightarrow B', emptyDiv[0]);
        options.push(['dimerization', emptyDiv.html()]);
        katex.render('A + B \\rightarrow C', emptyDiv[0]);
        options.push(['merge', emptyDiv.html()]);
        katex.render('A \\rightarrow B + C', emptyDiv[0]);
        options.push(['split', emptyDiv.html()]);
        katex.render('A + B \\rightarrow C + D', emptyDiv[0]);
        options.push(['four', emptyDiv.html()]);
        options.push(['massaction', 'Custom mass action']);
        options.push(['custom', 'Custom propensity']);

        this.renderSubview(
            new SelectView({</div>

joeltg / ozymandias / client / src / graphics / expression.js View on Github

render_latex() {
        this.node.innerText = '';
        this.node.className = 'cm-latex';
        this.child = document.createElement('span');
        this.node.appendChild(this.child);
        katex.render(this.latex, this.child, {displayMode: true, throwOnError: false});
    }
    update(index) {

StochSS / stochss / client / views / reaction-details.js View on Github

renderReactionTypes: function () {
    if(this.model.collection.parent.parameters.length &lt; 1){
      return
    }
    var options = {
      displayMode: true,
      output: 'html'
    }
    katex.render(ReactionTypes['creation'].label, this.queryByHook('select-reaction-type').firstChild.children[1]['0'], options);
    katex.render(ReactionTypes['destruction'].label, this.queryByHook('select-reaction-type').firstChild.children[1]['1'], options);
    katex.render(ReactionTypes['change'].label, this.queryByHook('select-reaction-type').firstChild.children[1]['2'], options);
    katex.render(ReactionTypes['dimerization'].label, this.queryByHook('select-reaction-type').firstChild.children[1]['3'], options);
    katex.render(ReactionTypes['merge'].label, this.queryByHook('select-reaction-type').firstChild.children[1]['4'], options);
    katex.render(ReactionTypes['split'].label, this.queryByHook('select-reaction-type').firstChild.children[1]['5'], options);
    katex.render(ReactionTypes['four'].label, this.queryByHook('select-reaction-type').firstChild.children[1]['6'], options);
  },
});

facebook / draft-js / examples / draft-0-10-0 / tex / js / components / TeXBlock.js View on Github

_update() {
    katex.render(
      this.props.content,
      this.refs.container,
      {displayMode: true},
    );
  }

twosigma / znai / td-documentation-reactjs / src / doc-elements / latex / Latex.js View on Github

katexRender() {
        const {latex} = this.props
        katex.render(latex, this.node, {
            throwOnError: false
        });
    }

StochSS / stochss / client / views / reaction-details.js View on Github

renderReactionTypes: function () {
    if(this.model.collection.parent.parameters.length &lt; 1){
      return
    }
    var options = {
      displayMode: true,
      output: 'html'
    }
    katex.render(ReactionTypes['creation'].label, this.queryByHook('select-reaction-type').firstChild.children[1]['0'], options);
    katex.render(ReactionTypes['destruction'].label, this.queryByHook('select-reaction-type').firstChild.children[1]['1'], options);
    katex.render(ReactionTypes['change'].label, this.queryByHook('select-reaction-type').firstChild.children[1]['2'], options);
    katex.render(ReactionTypes['dimerization'].label, this.queryByHook('select-reaction-type').firstChild.children[1]['3'], options);
    katex.render(ReactionTypes['merge'].label, this.queryByHook('select-reaction-type').firstChild.children[1]['4'], options);
    katex.render(ReactionTypes['split'].label, this.queryByHook('select-reaction-type').firstChild.children[1]['5'], options);
    katex.render(ReactionTypes['four'].label, this.queryByHook('select-reaction-type').firstChild.children[1]['6'], options);
  },
});

StochSS / stochss / app / static / modelEditor / forms / reaction-collection.js View on Github

<li><a href="#" tabindex="-1" data-hook="creation"></a></li> \
    <li><a href="#" tabindex="-1" data-hook="destruction"></a></li> \
    <li><a href="#" tabindex="-1" data-hook="change"></a></li> \
    <li><a href="#" tabindex="-1" data-hook="dimerization"></a></li> \
    <li><a href="#" tabindex="-1" data-hook="merge"></a></li> \
    <li><a href="#" tabindex="-1" data-hook="split"></a></li> \
    <li><a href="#" tabindex="-1" data-hook="four"></a></li> \
    <li><a href="#" tabindex="-1" data-hook="massaction">Custom mass action</a></li> \
    <li><a href="#" tabindex="-1" data-hook="custom">Custom propensity</a></li> \
   \
';

        this.button = $( this.buttonTemplate ).appendTo( $( this.el ) );

        katex.render('\\emptyset \\rightarrow A', $( this.el ).find('[data-hook=creation]')[0]);
        katex.render('A \\rightarrow \\emptyset', $( this.el ).find('[data-hook=destruction]')[0]);
        katex.render('A \\rightarrow B', $( this.el ).find('[data-hook=change]')[0]);
        katex.render('A + A \\rightarrow B', $( this.el ).find('[data-hook=dimerization]')[0]);
        katex.render('A + B \\rightarrow C', $( this.el ).find('[data-hook=merge]')[0]);
        katex.render('A \\rightarrow B + C', $( this.el ).find('[data-hook=split]')[0]);
        katex.render('A + B \\rightarrow C + D', $( this.el ).find('[data-hook=four]')[0]);

        $( this.el ).find('[data-hook=creation]').click( _.bind(_.partial(this.submitCallback, 'creation'), this));
        $( this.el ).find('[data-hook=destruction]').click( _.bind(_.partial(this.submitCallback, 'destruction'), this));
        $( this.el ).find('[data-hook=change]').click( _.bind(_.partial(this.submitCallback, 'change'), this));
        $( this.el ).find('[data-hook=dimerization]').click( _.bind(_.partial(this.submitCallback, 'dimerization'), this));
        $( this.el ).find('[data-hook=merge]').click( _.bind(_.partial(this.submitCallback, 'merge'), this));
        $( this.el ).find('[data-hook=split]').click( _.bind(_.partial(this.submitCallback, 'split'), this));
        $( this.el ).find('[data-hook=four]').click( _.bind(_.partial(this.submitCallback, 'four'), this));
        $( this.el ).find('[data-hook=massaction]').click( _.bind(_.partial(this.submitCallback, 'massaction'), this));
        $( this.el ).find('[data-hook=custom]').click( _.bind(_.partial(this.submitCallback, 'custom'), this));
    }

StochSS / stochss / app / static / modelEditor / forms / reaction-collection.js View on Github

<li><a href="#" tabindex="-1" data-hook="destruction"></a></li> \
    <li><a href="#" tabindex="-1" data-hook="change"></a></li> \
    <li><a href="#" tabindex="-1" data-hook="dimerization"></a></li> \
    <li><a href="#" tabindex="-1" data-hook="merge"></a></li> \
    <li><a href="#" tabindex="-1" data-hook="split"></a></li> \
    <li><a href="#" tabindex="-1" data-hook="four"></a></li> \
    <li><a href="#" tabindex="-1" data-hook="massaction">Custom mass action</a></li> \
    <li><a href="#" tabindex="-1" data-hook="custom">Custom propensity</a></li> \
   \
';

        this.button = $( this.buttonTemplate ).appendTo( $( this.el ) );

        katex.render('\\emptyset \\rightarrow A', $( this.el ).find('[data-hook=creation]')[0]);
        katex.render('A \\rightarrow \\emptyset', $( this.el ).find('[data-hook=destruction]')[0]);
        katex.render('A \\rightarrow B', $( this.el ).find('[data-hook=change]')[0]);
        katex.render('A + A \\rightarrow B', $( this.el ).find('[data-hook=dimerization]')[0]);
        katex.render('A + B \\rightarrow C', $( this.el ).find('[data-hook=merge]')[0]);
        katex.render('A \\rightarrow B + C', $( this.el ).find('[data-hook=split]')[0]);
        katex.render('A + B \\rightarrow C + D', $( this.el ).find('[data-hook=four]')[0]);

        $( this.el ).find('[data-hook=creation]').click( _.bind(_.partial(this.submitCallback, 'creation'), this));
        $( this.el ).find('[data-hook=destruction]').click( _.bind(_.partial(this.submitCallback, 'destruction'), this));
        $( this.el ).find('[data-hook=change]').click( _.bind(_.partial(this.submitCallback, 'change'), this));
        $( this.el ).find('[data-hook=dimerization]').click( _.bind(_.partial(this.submitCallback, 'dimerization'), this));
        $( this.el ).find('[data-hook=merge]').click( _.bind(_.partial(this.submitCallback, 'merge'), this));
        $( this.el ).find('[data-hook=split]').click( _.bind(_.partial(this.submitCallback, 'split'), this));
        $( this.el ).find('[data-hook=four]').click( _.bind(_.partial(this.submitCallback, 'four'), this));
        $( this.el ).find('[data-hook=massaction]').click( _.bind(_.partial(this.submitCallback, 'massaction'), this));
        $( this.el ).find('[data-hook=custom]').click( _.bind(_.partial(this.submitCallback, 'custom'), this));
    }
});

How to use the katex.render function in katex

To help you get started, we’ve selected a few katex examples, based on popular ways it is used in public projects.

katex

Package Health Score

Popular katex functions

Similar packages