Skip to content

Latest commit

 

History

History
143 lines (109 loc) · 4.8 KB

README.md

File metadata and controls

143 lines (109 loc) · 4.8 KB

math live

Maintenance GitHub license

Build Status Greenkeeper badge David

Screenshot

MathLive is a JavaScript library to render and edit math.

  • TeX-quality typesetting
  • Easy to use interface for math editing
  • Fast and small
  • Works great on desktop and on mobile devices thanks to an extensive set of virtual keyboards
  • Outputs LaTeX, MathML and JSON (Abstract Syntax Tree, MASTON)
  • And it is easy to customize to your needs!

Try it at mathlive.io

The popover panel A Virtual Keyboard
The Loop Equation

How To Use MathLive

Displaying Math

Render math equations by adding a few lines to your web page.

<!doctype html><html lang="en-US">
<head>
    ...
    <link href="https://unpkg.com/mathlive/dist/mathlive.core.css" rel="stylesheet" >
    <link href="https://unpkg.com/mathlive/dist/mathlive.css" rel="stylesheet" >
</head>
<body>
    <h1>Euler's Identity</h1>
    <p>$$e^{i\pi} + 1 = 0$$</p> 

    <script type='module'> 
        import MathLive from 'https://unpkg.com/mathlive/dist/mathlive.mjs';
        MathLive.renderMathInDocument();
    </script>
</body>
</html>

Editing Math

You can also incorporate a “math field” to edit math just like you would edit text. The MathLive APIs allow you to interact with the math field, including extracting its content, inserting placeholders and more.

<!doctype html><html lang="en-US">
<head>
    ...
    <link rel="stylesheet" href="https://unpkg.com/mathlive/dist/mathlive.core.css">
    <link rel="stylesheet" href="https://unpkg.com/mathlive/dist/mathlive.css">
</head>
<body>
    <div id='mathfield'>f(x)=</div>

    <script type='module'> 
        import MathLive from 'https://unpkg.com/mathlive/dist/mathlive.mjs';
        MathLive.makeMathField('mathfield');
    </script>
</body>
</html>

More Examples

More examples are available at https://mathlive.io/deploy/examples/

Installing MathLive

The examples above use a CDN, which is the fastest and easiest way to get started. However, if you:

  • want to contribute to MathLive
  • use your own CDN
  • make some other changes to MathLive you can also install it locally in your project.

To do so:

$ npm install -s mathlive
$ npm start

This will make a local build of MathLive, run a local HTTP server and open a page with the examples in your browser.

How You Can Help

  • Using MathLive in your project? Want to support the project ongoing maintenance? Consider becoming a patron on Patreon or making a donation with PayPal
  • Something wrong? Got ideas for new features? Write up an issue. Read about Contributing and follow our Code of Conduct
  • Want to use MathLive in your web page? The Usage Guide has all the details.
  • Want to contribute some code for an issue or a feature? Read the Contributor Guide and the docs. Looking for inspiration? Pick one of the good first issues

More Questions?

License

This project is licensed under the MIT License.