Coder Social home page Coder Social logo

markdown-it-math's Introduction

npm Build Status

Note: This is a general markdown-it math plugin. It was originally designed to render MathML. If you intend to use MathJax, markdown-it-mathjax might be a better choise.

markdown-it-math

Pythagoran theorem is $$a^2 + b^2 = c^2$$.

Bayes theorem:

$$$
P(A | B) = (P(B | A)P(A)) / P(B)
$$$
<p>Pythagoran theorem is <math><msup><mi>a</mi><mn>2</mn></msup><mo>+</mo><msup><mi>b</mi><mn>2</mn></msup><mo>=</mo><msup><mi>c</mi><mn>2</mn></msup></math>.</p>
<p>Bayes theorem:</p>
<math display="block"><mi>P</mi><mfenced open="(" close=")"><mrow><mi>A</mi><mo stretchy="true" lspace="veryverythickmathspace" rspace="veryverythickmathspace">|</mo><mi>B</mi></mrow></mfenced><mo>=</mo><mfrac><mrow><mi>P</mi><mfenced open="(" close=")"><mrow><mi>B</mi><mo stretchy="true" lspace="veryverythickmathspace" rspace="veryverythickmathspace">|</mo><mi>A</mi></mrow></mfenced><mi>P</mi><mfenced open="(" close=")"><mi>A</mi></mfenced></mrow><mrow><mi>P</mi><mfenced open="(" close=")"><mi>B</mi></mfenced></mrow></mfrac></math>

Installation

npm install markdown-it-math --save

Usage

var md = require('markdown-it')()
        .use(require('markdown-it-math') [, options]);

where options can be (with defaults)

var options = {
    inlineOpen: '$$',
    inlineClose: '$$',
    blockOpen: '$$$',
    blockClose: '$$$',
    renderingOptions: {},
    inlineRenderer: require('ascii2mathml')(this.rendererOptions),
    blockRenderer: require('ascii2mathml')(Object.assign({ display: 'block' },
                                                         this.renderingOptions))
}

(See ascii2mathml for reference about the default renderer).

Examples

Using comma as a decimal mark

var md = require('markdown-it')()
        .use(require('markdown-it-math'), {
            renderingOptions: { decimalMark: ',' }
        });

md.render("$$40,2$$");
// <p><math><mn>40,2</mn></math></p>

Using TeXZilla as renderer

var texzilla = require('texzilla');
var md = require('markdown-it')()
        .use(require('markdown-it-math'), {
            inlineRenderer: function(str) {
                return texzilla.toMathMLString(str);
            },
            blockRenderer: function(str) {
                return texzilla.toMathMLString(str, true);
            }
        });

md.render("$$\\sin(2\\pi)$$");
// <p><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mo lspace="0em" rspace="0em">sin</mo><mo stretchy="false">(</mo><mn>2</mn><mi>ฯ€</mi><mo stretchy="false">)</mo></mrow><annotation encoding="TeX">\sin(2\pi)</annotation></semantics></math></p>

Using LaTeX style delimiters

var md = require('markdown-it')()
        .use(require('markdown-it-math'), {
            inlineOpen: '\\(',
            inlineClose: '\\)',
            blockOpen: '\\[',
            blockClose: '\\]'
        })

Note there are restrictions on what inline delimiters you can use, based on optimization for the markdown-it parser see here for details. And block level math must be on its own lines with newlines separating the math from the delimiters.

Some text with inline math \(a^2 + b^2 = c^2\)

And block math

\[
e = sum_(n=0)^oo 1/n!
\]

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.