Equation Element

Generate an HTML string for displaying an SVG equation in a Github Markdown file.

Installation

$ npm install github-markdown-equation-element

Usage

var createElement = require( 'github-markdown-equation-element' );

createElement( [options] )

Generate an HTML string for displaying an SVG equation in a Github Markdown file.

var html = createElement();
/* returns 
    '<div class="equation" align="center" data-raw-text="" data-equation="">
       <img src="" alt="">
       <br>
     </div>'
*/

The function accepts the following options:

• className: element class name. Default: 'equation'.
• align: element alignment. Default: 'center'.
• raw: raw equation text.
• label: equation label.
• src: image source URL.
• alt: alternative image text.

Each option corresponds an HTML attribute. For example, to set the image source URL, set the src option.

var opts = {
	'src': 'https://cdn.rawgit.com/math-io/gamma/master/docs/img/eqn1.svg'
};

var html = createElement( opts );
/* returns
    '<div class="equation" align="center" data-raw-text="" data-equation="">
      <img src="https://cdn.rawgit.com/math-io/gamma/master/docs/img/eqn1.svg" alt="">
      <br>
    </div>'
*/

To include a raw equation TeX or LaTeX string in the element, set the raw option.

var opts = {
	'raw': '\\Gamma ( n ) = (n-1)!',
	'src': 'https://cdn.rawgit.com/math-io/gamma/master/docs/img/eqn1.svg'
};

var html = createElement( opts );
/* returns 
    '<div class="equation" align="center" data-raw-text="\Gamma ( n ) = (n-1)!" data-equation="">
      <img src="https://cdn.rawgit.com/math-io/gamma/master/docs/img/eqn1.svg" alt="">
      <br>
    </div>'
*/

Examples

var createElement = require( 'github-markdown-equation-element' );

var opts = {
	'className': 'eqn',
	'align': 'left',
	'raw': '\\operatorname{erf}(x) = \\frac{2}{\\sqrt\\pi}\\int_0^x e^{-t^2}\\,\\mathrm dt',
	'label': 'eq:erf',
	'src': 'https://cdn.rawgit.com/math-io/erf/master/docs/img/eqn.svg',
	'alt': 'Error function.'
};

var html = createElement( opts );

console.log( html );
/* returns 
    '<div class="eqn" align="left" data-raw-text="\operatorname{erf}(x) = \frac{2}{\sqrt\pi}\int_0^x e^{-t^2}\,\mathrm dt" data-equation="eq:erf">
      <img src="https://cdn.rawgit.com/math-io/erf/master/docs/img/eqn.svg" alt="Error function.">
      <br>
    </div>'
*/

To run the example code from the top-level application directory,

$ node ./examples/index.js

CLI

Installation

To use the module as a general utility, install the module globally

$ npm install -g github-markdown-equation-element

Usage

Usage: gheqn [options]

Options:

  -h,  --help               Print this message.
  -V,  --version            Print the package version.
       --class name         Element class name. Default: equation.
       --align alignment    Element alignment. Default: center.
       --raw text           Raw equation text.
       --label label        Equation label.
       --src url            Image source URL.
       --alt text           Alternative image text.

Examples

$ gheqn --raw '\Gamma ( n ) = (n-1)!' --src 'https://cdn.rawgit.com/math-io/gamma/master/docs/img/eqn1.svg'
# => <div class="equation" align="center" data-raw-text="\Gamma ( n ) = (n-1)!" data-equation="">\n\t<img src="https://cdn.rawgit.com/math-io/gamma/master/docs/img/eqn1.svg" alt="">\n\t<br>\n</div>

Tests

Unit

This repository uses tape for unit tests. To run the tests, execute the following command in the top-level application directory:

$ make test

All new feature development should have corresponding unit tests to validate correct functionality.

Test Coverage

This repository uses Istanbul as its code coverage tool. To generate a test coverage report, execute the following command in the top-level application directory:

$ make test-cov

Istanbul creates a ./reports/coverage directory. To access an HTML version of the report,

$ make view-cov

Browser Support

This repository uses Testling for browser testing. To run the tests in a (headless) local web browser, execute the following command in the top-level application directory:

$ make test-browsers

To view the tests in a local web browser,

$ make view-browser-tests

License

MIT license.

Copyright

Copyright © 2016. Athan Reines.