burgerga/reveal.js-math

Math plugins (MathJax/KaTeX) for reveal.js.

❗ NB: Archived because it was merged in https://github.com/hakimel/reveal.js ❗

reveal.js-math

Math plugins (MathJax/KaTeX) for reveal.js.

Installation

npm

Download and install the package in your project:

npm install --save reveal.js-math

Usage

Add the plugin to your presentation as below:

<script src="node_modules/reveal.js-math/dist/math.umd.js"></script>
<script>
  Reveal.initialize({
    plugins: [ RevealMath.<Variant> ]
  });
</script>

or if you're using ES modules:

<script type="module">
  import RevealMath from "./node_modules/reveal.js-math/dist/math.esm.js";
  Reveal.initialize({
    plugins: [ RevealMath.<Variant> ]
  });
</script>

where <Variant> is one of MathJax2, MathJax3, KaTeX.

Configuration

You can configure math by providing a reveal.js initialization object for your variant. These object have different names to allow easy switching between variants

MathJax2

Adjust options through the mathjax2 configuration object. Below is how the plugin is configured by default. If you don't intend to change these values you do not need to include the mathjax2 config option at all.

Reveal.initialize({
  mathjax2: {
    mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js',
    config: 'TeX-AMS_HTML-full',
    // pass other options into `MathJax.Hub.Config()`
    tex2jax: {
      inlineMath: [ [ '$', '$' ], [ '\\(', '\\)' ] ],
      skipTags: [ 'script', 'noscript', 'style', 'textarea', 'pre' ]
    }
  },
  plugins: [ RevealMath.MathJax2 ]
});

Note that the latest MathJax 2 is loaded from a remote server. To use a fixed version set mathjax to, for example, https://cdn.jsdelivr.net/npm/[email protected]/MathJax.js.

If you want to use MathJax offline you'll need to download a copy of the library (e.g. with npm) and adjust mathjax accordingly.

MathJax3

Adjust options through the mathjax3 configuration object. Below is how the plugin is configured by default. If you don't intend to change these values you do not need to include the mathjax3 config option at all.

Reveal.initialize({
  mathjax3: {
    mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js',
    tex: {
      inlineMath: [ [ '$', '$' ], [ '\\(', '\\)' ]  ]
    },
    options: {
      skipHtmlTags: [ 'script', 'noscript', 'style', 'textarea', 'pre' ]
    },
  },
  plugins: [ RevealMath.MathJax3 ]
});

Note that the latest MathJax 3 is loaded from a remote server. To use a fixed version set mathjax to, for example, https://cdn.jsdelivr.net/npm/[email protected]/tex-mml-chtml.js. Additionally, the config is now part of of the url, by default tex-mml-chtml is loaded which recognizes mathematics in both TeX and MathML notation, and generates output using HTML with CSS (the CommonHTML output format). This is one of the most general configs, but it is also one of the largest, so you might want to consider a smaller one that is more tailored to your needs, e.g. tex-svg.

If you want to use MathJax offline you'll need to download a copy of the library (e.g. with npm) and adjust mathjax accordingly.

KaTeX

Adjust options through the katex configuration object. Below is how the plugin is configured by default. If you don't intend to change these values you do not need to include the katex config option at all.

Reveal.initialize({
  katex: {
    version: 'latest',
    delimiters: [
      {left: '$', right: '$', display: false},
      {left: '$$', right: '$$', display: true},
      {left: '\\(', right: '\\)', display: false},
      {left: '\\[', right: '\\]', display: true}
   ],
   ignoredTags: ['script', 'noscript', 'style', 'textarea', 'pre']
 },
 plugins: [ RevealMath.KaTeX ]
});

Note that by default the latest KaTeX is loaded from a remote server (https://cdn.jsdelivr.net/npm/katex). To use a fixed version set version to, for example, 0.13.18.

If you want to use KaTeX offline you'll need to download a copy of the library (e.g. with npm) and use the local configuration option (the version option will then be ignored), for example:

Reveal.initialize({
  katex: {
    local: 'node_modules/katex',
  },
  plugins: [ RevealMath.KaTeX]
});

reveal.js-math's Issues

Problems using reveal.js-math in conjunction with asciidoctor

I read about the reveal mathjax 3 issue and decided to give your solution a try by using it for the presentation.adoc example of my sample project at https://github.com/aanno/ad-reveal.

If I generate presentation.html, there is a sample equation on slide 3 rendered correctly.

Next step is to hack the resulting presentation.html with the changes you suggests in the readme (after installing reveal.js-math of course). However, I did not arrive at anything. I seems that rendering does not work. Certainly, I'm quite sure that your code works for you. Hence I suspect that there is some interference between reveal.js-math and asciidoctor.js that brakes the rendering.