MathLive

A web component for easy math input

Math Web Components

arnog/mathlive cortexjs.io/mathlive mathlive

README

MathLive

A Web Component for Math Input

MathLive is a powerful web component that provides an easy-to-use interface for

editing math formulas. With over 800 built-in LaTeX commands, MathLive

enables beautiful, TeX-quality typesetting. It's designed for mobile

devices with an extensive set of virtual keyboards for math input, and is also

compatible with screen readers, including custom math-to-speech support for

improved accessibility. In addition, MathLive outputs to LaTeX, MathML,

ASCIIMath, and MathJSON formats, making it incredibly versatile. And the best

part? It's easy to customize to your needs!

🚀 Getting Started

Using MathLive is easy! Simply add a `` tag to your page, and itworks just like a `

` or `<button>` element. You can manipulate the<div class="base">mathfield using methods of the element and listen for events to be notified when</div><div class="base">its internal state changes.</div><div class="base"><br></div><div class="code"><ol start="0"><li><span>```html</span></li><li><span class="html-doctype"><!DOCTYPE html></span></li><li><span class="html-label"><html</span><span class="html-type"> lang</span><span>=</span><span class="html-value">"en-US"</span><span class="html-label">></span></li><li><span>  </span><span class="html-label"><body</span><span class="html-label">></span></li><li><span>    </span><span class="html-label"><math</span><span class="html-label">-field></span><span>f(x)=</span><span class="html-label"></math</span><span class="html-label">-field></span></li><li><span>    </span><span class="html-label"><script</span><span class="html-type"> src</span><span>=</span><span class="html-value">"https://unpkg.com/mathlive"</span><span class="html-label">></span><span class="html-label"></script</span><span class="html-label">></span></li><li><span>  </span><span class="html-label"></body</span><span class="html-label">></span></li><li><span class="html-label"></html</span><span class="html-label">></span></li><li><span>```</span></li></ol></div><div class="base"><br></div><div class="base"><h2>Documentation</h2></div><div class="base"><br></div><div class="base">MathLive has an extensive set of documentation to help you get started,</div><div class="base">including guides on interacting with a mathfield, customizing it, executing</div><div class="base">commands, defining custom LaTeX macros, managing inline and keyboard shortcuts,</div><div class="base">controlling speech output, and displaying static math formulas. You can find all</div><div class="base">of these guides on the <a href="https://cortexjs.io/mathlive/" title="MathLive website" target="_blank" rel="nofollow noopener noreferrer">MathLive website</a>.</div><div class="base"><br></div><div class="base">In addition to the guides, you can also find reference documentation of the</div><div class="base">MathLive API on the <a href="https://cortexjs.io/docs/mathlive" title="MathLive SDK page" target="_blank" rel="nofollow noopener noreferrer">MathLive SDK page</a>.</div><div class="base"><br></div><div class="base"><h2>Related Projects</h2></div><div class="base"><br></div><dl>  <dt><a href="https://cortexjs.io/math-json" target="_blank" rel="nofollow noopener noreferrer">MathJSON</a> (on <a href="https://github.com/cortex-js/math-json" target="_blank" rel="nofollow noopener noreferrer">GitHub</a>)</dt>  <dd>A lightweight data interchange format for mathematical notation.</dd>    <dt><a href="https://cortexjs.io/compute-engine" target="_blank" rel="nofollow noopener noreferrer">Compute Engine</a> (on <a href="https://github.com/cortex-js/math-json/tree/master/src/compute-engine" target="_blank" rel="nofollow noopener noreferrer">GitHub</a>)</dt>  <dd>The CortexJS Compute Engine performs calculations on MathJSON expressions</dd>    <dt><a href="https://cortexjs.io/cortex" target="_blank" rel="nofollow noopener noreferrer">Cortex</a> (on <a href="https://github.com/cortex-js/math-json/tree/master/src/cortex" target="_blank" rel="nofollow noopener noreferrer">GitHub</a>)</dt>  <dd>Cortex is a programming language for scientific computing</dd>  </dl><div class="base"><br></div><div class="base"><h2>Contact Us</h2></div><div class="base"><br></div><div class="base">- Join our <a href="https://cortexjs.io/gitter/" title="Gitter forum" target="_blank" rel="nofollow noopener noreferrer">Gitter forum</a></div><div class="base">- Drop a line to arno@arno.org</div><div class="base"><br></div><div class="base"><h2>📃 License</h2></div><div class="base"><br></div><div class="base">This project is licensed under the <a href="https://github.com/arnog/mathlive/blob/master/LICENSE.txt" title="MIT License" target="_blank" rel="nofollow noopener noreferrer">MIT License</a>.</div><div class="base"><br></div></div></div></div><div id="footer"><div class="footer-box"><div class="footer-info"><div class="fi-logo"><img src="/img/footer-logo.png" width="65"/></div><div class="fi-intro"><strong>为什么是最好的 GitHub 项目？</strong><p>技术的发展速度比以往任何时候都快，技术正在全速创新。几乎每天都会发布惊人的开源项目。</p><p><br/></p><strong>如何了解最新趋势？</strong><p>如何快速检查真正重要的项目，现在而不是 6 个月前？</p><p>探客时代每天拍摄 GitHub stars 的 “快照”，以获得 2000 多个项目的精选列表，以检测过去几个月的趋势。</p><p><br/></p><strong>你想要更多的项目吗？</strong><p>我们不会扫描 GitHub 上的所有现有项目，而是根据我们的经验和我们在 Internet 上阅读的内容，专注于我们发现 “有趣” 的精选项目列表。想要了解的项目可以提交给我们。</p></div><div class="fi-qrcode"><h3>关注公众号</h3><img src="/img/qrcode.jpg" width="272" height="272"/></div></div><div class="footer-copyright">© 2022, 北京探客时代网络科技有限公司　<br/><a href="http://beian.miit.gov.cn" target="_blank" rel="nofollow noopener noreferrer">京 ICP 备 2022008592 号</a>　<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11011402012574" target="_blank" rel="nofollow noopener noreferrer">京公网安备 11011402012574 号</a>　<a href="contact.html" target="_blank" rel="nofollow noopener noreferrer">信息举报</a></div></div></div><script>function request(t,e,n){$.ajax({url:t,type:"get",data:e,dataType:"json",success:function(t){n(t.data)}})}function levenshtein(t,e){t=t.toLowerCase(),e=e.toLowerCase();for(var n=t.length,o=e.length,i=[],a=0;a<n+1;a++)i.push(new Array(o+1));for(a=0;a<=n;a++)i[a][0]=a;for(a=0;a<=o;a++)i[0][a]=a;var l,s=t.split(""),r=e.split("");for(a=1;a<=n;a++)for(var c=1;c<=o;c++){l=s[a-1]==r[c-1]?0:1;var u=i[a-1][c-1]+l,h=i[a][c-1]+1,f=i[a-1][c]+1;i[a][c]=Math.min(u,h,f)}return 1-i[n][o]/Math.max(t.length,e.length)}$(function(){var t=[],e=[];request("https://api.tkcnn.com/gh/tag/all",null,function(e){t=e;var n=window.location.href.match(/([\w-]+)\.html/);if(n){var o=t.find(t=>t.code===n[1]);o&&$(".select-set").val(o.name)}}),$(".select-set").on("click input",function(){var n=$(this).val();if(n=n.replace(/(^\s+|\s+$)/g,""),e=[],""===n.replace(/s/g,""))e=t;else{for(var o,i=0;i<t.length;i++)(o=levenshtein(n,t[i].name))>=.1&&e.push({name:t[i].name,code:t[i].code,count:t[i].count,similar:o});e.sort(function(t,e){return e.similar-t.similar})}var a="";for(i=0;i<e.length;i++)a+=`<button>${e[i].name} (${e[i].count})</button>`;$(".select-list").html(a)}),$(".select-list").on("click","button",function(t){$(".select-list").hide(),setTimeout(function(){$(".select-list").css("display","")},200),window.location.href=window.location.origin+`/repo/${e[$(this).index()].code}.html`})});</script></body></html>