Math support in reveal.js

rahuldave commented 5 years ago

I changed the slides component code to have:

math: {
                        mathjax: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js',
                        config: 'TeX-AMS_HTML-full', // See http://docs.mathjax.org/en/latest/config-files.html
                        // pass other options into `MathJax.Hub.Config()`
                        tex2jax: {
                            inlineMath: [ ['$','$'], ["\\(","\\)"] ],
                            displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
                            balanceBraces: true,
                            processEscapes: false,
                            processRefs: true,
                            processEnvironments: true,
                            preview: 'TeX',
                            skipTags: ['script','noscript','style','textarea','pre','code'],
                            ignoreClass: 'tex2jax_ignore',
                            processClass: 'tex2jax_process'
                        }
                    },
                    dependencies: [
                        { src: 'reveal.js/plugin/math/math.js', async: true }
                    ]

But this did not get me math support. A bit flummozed. (math.js is there in the node_modules, but I wonder where this gatsby app is picking it from..)

ines commented 5 years ago

I have no idea, sorry – I never really used mathjax before, and the Reveal.js setup is a little hacky to make it work in this chapter-style environment.

I think instead of doing it via the plugin system, you probably want to just set it up directly. Include it in gatsby-browser or the <head> (see components/seo.js) so mathjax is available in the global window, and then apply it to the slides (like the syntax highlighting, see #5).

rahuldave commented 5 years ago

I got it to work doing this:

    componentDidMount() {
        import('reveal.js').then(({ default: Reveal }) => {
            window.Reveal = Reveal
            window.marked = Marked

            import('reveal.js/plugin/markdown/markdown.js').then(({ RevealMarkdown }) => {
                import('reveal.js/plugin/math/math.js').then(() => {
                    RevealMarkdown.init()
                    Reveal.initialize({
                        center: false,
                        progress: false,
                        showNotes: true,
                        controls: true,
                        width: '100%',
                        height: 600,
                        minScale: 0.75,
                        maxScale: 1,
                        math: {
                            mathjax: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js',
                            config: 'TeX-AMS_HTML-full', // See http://docs.mathjax.org/en/latest/config-files.html
                            // pass other options into `MathJax.Hub.Config()`
                            tex2jax: {
                                inlineMath: [ ['$','$'], ["\\(","\\)"] ],
                                displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
                                balanceBraces: true,
                                processEscapes: false,
                                processRefs: true,
                                processEnvironments: true,
                                preview: 'TeX',
                                skipTags: ['script','noscript','style','textarea','pre','code'],
                                ignoreClass: 'tex2jax_ignore',
                                processClass: 'tex2jax_process'
                            }
                        }
                        // dependencies: [
                        //     { src: 'reveal.js/plugin/math/math.js', async: true }
                        // ]
                    })
                })

            })
        })
    }

    componentWillUnmount() {
        // Work around default reveal.js behaviour that doesn't allow
        // re-initialization and clashes with React
        delete window.Reveal
        delete window.marked
        delete require.cache[require.resolve('reveal.js')]
        delete require.cache[require.resolve('reveal.js/plugin/markdown/markdown.js')]
        delete require.cache[require.resolve('reveal.js/plugin/math/math.js')]
    }

inside the slides component...

Seems a bit inverted but atleast it works.. (https://www.dropbox.com/s/c8lz2zn8ljccoik/Screenshot%202019-05-22%2018.41.21.png?dl=0)

noamross commented 5 years ago

I was able to get this to work by including MathJax in the header, here:

https://github.com/noamross/gams-in-r-course/commit/5f9dfcde271ddcdc095c81d2ac9732afa128d9fa

And then adding this to chapter.js to re-render when a chapter opens:

https://github.com/noamross/gams-in-r-course/commit/519c857e4aafe18d1528a3eda389205f7af0f6ae#diff-5851644eb75667fc3cd4d6f1076c6203

rongpenl commented 5 years ago

Thank you very much @noamross . It works very well. Just want to point out that the default inline mode for this solution is \$ formula \$ not $ formula $ .

HeidiSeibold commented 4 years ago

Thanks @noamross this worked for me too!

kskyten commented 4 years ago

Thanks @noamross, this fixed inline math for me. However, I couldn't get display math to work. I tried $$, \[ and \\[, none of them worked.

ines / course-starter-python

Math support in reveal.js #11