Giter Site home page Giter Site logo

aterenin / katex Goto Github PK

View Code? Open in Web Editor NEW

This project forked from katex/katex

0.0 3.0 0.0 20.51 MB

Fast math typesetting for the web.

Home Page: https://khan.github.io/KaTeX/

License: Other

Makefile 0.66% JavaScript 87.63% HTML 0.76% CSS 2.54% Shell 1.02% Python 1.99% Perl 6 5.27% TeX 0.14%

katex's Introduction

KaTeX Build Status

Join the chat at https://gitter.im/Khan/KaTeX

KaTeX is a fast, easy-to-use JavaScript library for TeX math rendering on the web.

  • Fast: KaTeX renders its math synchronously and doesn't need to reflow the page. See how it compares to a competitor in this speed test.
  • Print quality: KaTeX’s layout is based on Donald Knuth’s TeX, the gold standard for math typesetting.
  • Self contained: KaTeX has no dependencies and can easily be bundled with your website resources.
  • Server side rendering: KaTeX produces the same output regardless of browser or environment, so you can pre-render expressions using Node.js and send them as plain HTML.

KaTeX supports all major browsers, including Chrome, Safari, Firefox, Opera, Edge, and IE 9 - IE 11. More information can be found on the list of supported commands and on the wiki.

Usage

You can download KaTeX and host it on your server or include the katex.min.js and katex.min.css files on your page directly from a CDN:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0-alpha2/katex.min.css" integrity="sha384-exe4Ak6B0EoJI0ogGxjJ8rn+RN3ftPnEQrGwX59KTCl5ybGzvHGKjhPKk/KC3abb" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0-alpha2/katex.min.js" integrity="sha384-OMvkZ24ANLwviZR2lVq8ujbE/bUO8IR1FdBrKLQBI14Gq5Xp/lksIccGkmKL8m+h" crossorigin="anonymous"></script>

In-browser rendering

Call katex.render with a TeX expression and a DOM element to render into:

katex.render("c = \\pm\\sqrt{a^2 + b^2}", element);

If KaTeX can't parse the expression, it throws a katex.ParseError error.

Server side rendering or rendering to a string

To generate HTML on the server or to generate an HTML string of the rendered math, you can use katex.renderToString:

var html = katex.renderToString("c = \\pm\\sqrt{a^2 + b^2}");
// '<span class="katex">...</span>'

Make sure to include the CSS and font files, but there is no need to include the JavaScript. Like render, renderToString throws if it can't parse the expression.

Rendering options

You can provide an object of options as the last argument to katex.render and katex.renderToString. Available options are:

  • displayMode: boolean. If true the math will be rendered in display mode, which will put the math in display style (so \int and \sum are large, for example), and will center the math on the page on its own line. If false the math will be rendered in inline mode. (default: false)
  • throwOnError: boolean. If true, KaTeX will throw a ParseError when it encounters an unsupported command. If false, KaTeX will render the unsupported command as text in the color given by errorColor. (default: true)
  • errorColor: string. A color string given in the format "#XXX" or "#XXXXXX". This option determines the color which unsupported commands are rendered in. (default: #cc0000)
  • macros: object. A collection of custom macros. Each macro is a property with a name like \name (written "\\name" in JavaScript) which maps to a string that describes the expansion of the macro. Single-character keys can also be included in which case the character will be redefined as the given macro (similar to TeX active characters).
  • colorIsTextColor: boolean. If true, \color will work like LaTeX's \textcolor, and take two arguments (e.g., \color{blue}{hello}), which restores the old behavior of KaTeX (pre-0.8.0). If false (the default), \color will work like LaTeX's \color, and take one argument (e.g., \color{blue}hello). In both cases, \textcolor works as in LaTeX (e.g., \textcolor{blue}{hello}).
  • maxSize: number. If non-zero, all user-specified sizes, e.g. in \rule{500em}{500em}, will be capped to maxSize ems. Otherwise, users can make elements and spaces arbitrarily large (the default behavior).

For example:

katex.render("c = \\pm\\sqrt{a^2 + b^2}\\in\\RR", element, {
  displayMode: true,
  macros: {
    "\\RR": "\\mathbb{R}"
  }
});

Automatic rendering of math on a page

Math on the page can be automatically rendered using the auto-render extension. See the Auto-render README for more information.

Font size and lengths

By default, KaTeX math is rendered in a 1.21× larger font than the surrounding context, which makes super- and subscripts easier to read. You can control this using CSS, for example:

.katex { font-size: 1.1em; }

KaTeX supports all TeX units, including absolute units like cm and in. Absolute units are currently scaled relative to the default TeX font size of 10pt, so that \kern1cm produces the same results as \kern2.845275em. As a result, relative and absolute units are both uniformly scaled relative to LaTeX with a 10pt font; for example, the rectangle \rule{1cm}{1em} has the same aspect ratio in KaTeX as in LaTeX. However, because most browsers default to a larger font size, this typically means that a 1cm kern in KaTeX will appear larger than 1cm in browser units.

Libraries

Angular2+

  • ng-katex Angular module to write beautiful math expressions with TeX syntax boosted by KaTeX library

Contributing

See CONTRIBUTING.md

License

KaTeX is licensed under the MIT License.

katex's People

Contributors

ariabuckles avatar aterenin avatar blaiprat avatar cbreeden avatar crepererum avatar dbieber avatar edemaine avatar flauschbaellchen avatar gagern avatar gitter-badger avatar jamesplease avatar jeffeverett avatar jeresig avatar jremes-foss avatar kevinbarabash avatar kohler avatar konn avatar mandabrown avatar marcianx avatar mateddy avatar mathiasbynens avatar mathijshenquet avatar mildsunrise avatar mjbshaw avatar mroth avatar ronkok avatar sophiebits avatar tabatkins avatar xsznix avatar xymostech avatar

Watchers

 avatar  avatar  avatar

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.