Math support in reveal.js
rahuldave opened this issue · 6 comments
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..)
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).
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)
I was able to get this to work by including MathJax in the header, here:
noamross/gams-in-r-course@5f9dfcd
And then adding this to chapter.js to re-render when a chapter opens:
noamross/gams-in-r-course@519c857#diff-5851644eb75667fc3cd4d6f1076c6203
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 $.
Thanks @noamross this worked for me too!