MathJax support #25

johnmcdonnell · 2012-09-17T04:27:33Z

MathJax doesn't seem to work out of the box. I assume this is because it's making its pass too early, before the slides have been generated. I'm on a deadline right now but maybe I'll come back and fix this later.

monofon · 2012-09-17T04:43:06Z

Here is one way handle MathJax slides without modifications: https://gist.github.com/3735579.

johnmcdonnell · 2012-09-17T05:05:00Z

Hm that demo actually doesn't work for me in Chrome or FF on OSX.

monofon · 2012-09-17T05:59:20Z

That is the same-origin-policy that is enforced by Chrome and FF and prevents local GET requests from JavaScript. I am loading the markdown from a separate file here. Works locally with Safari or via http with Chrome and FF.

gnab · 2012-09-17T06:05:47Z

@monofon Nice work-around for loading the markdown separately.

I guess some kind of a remark "ready" event running after the conversion from markdown to HTML would solve this and other, similar issues.

gnab · 2012-09-17T17:00:51Z

I've added a ready event to remark now, that is emitted after remark is done loading. Thus, MathJax startup can be delayed in the same fashion @monofon demonstrated:

// <script src=".../remark.js"></script>
// <script src=".../MathJax.js?config=...&delayStartupUntil=configured"></script>

remark.on('ready', function () {
  MathJax.Hub.Configured();
});

The functionality will be included in the next release, but I've added the master bundles to the repository for now (remark.min.js).

johnmcdonnell · 2012-09-26T20:31:59Z

Great thanks guys!

joshbode · 2012-11-13T13:58:27Z

This Gist gives an example of MathJax in action in remark, integrating the hacks from this post to format inline formulae correctly.

gnab · 2012-11-13T14:00:47Z

Thanks for sharing! :)

joshbode · 2012-11-13T14:15:08Z

Thanks for remark! ;)

kynan · 2013-07-02T01:48:36Z

@gnab Has the ready event been removed again? It seems to no longer work in 0.5.1

gnab · 2013-07-02T09:09:00Z

@kynan Since 0.5.0 the ready event has been removed, and the slideshow is "ready" in the same sense as before after the var slideshow = remark.create() line has run, so any MathJax setup and such should simply go after that line.

The reason for the change is that remark slideshows may now be embedded into custom DOM elements, not just as a full-page slideshow, and you may create several ones, if you'd like to. Before, the one-and-only full-page slideshow was automatically created on the document's ready event. Now, the slideshow has to be created explicitly, and will be "ready" immediately - so there's really no need for a ready event.

As you can see in the remark boilerplate HTML, the remark.create call now goes in a <script> tag in the end of the <body> tag, since the document's ready event is no longer used, either.

kynan · 2013-07-03T09:08:49Z

@gnab Thanks for clarifying. I must be doing something wrong, my math isn't rendered with the following at the bottom of the body:

<script src="remark.min.js" type="text/javascript"></script>
<script type="text/javascript">
  var hljs = remark.highlighter.engine;
</script>
<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML&delayStartupUntil=configured">
  var slideshow = remark.create({
      highlightLanguage: 'Python'
    });
  MathJax.Hub.Config({
    tex2jax: {
      skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
      inlineMath: [['$','$'], ['\\(','\\)']]
    }
  });
  MathJax.Hub.Configured();
</script>

gnab · 2013-07-03T09:38:45Z

You're almost there :)

A <script> tag that has a src attribute cannot have JavaScript in it as well, then you need to create an additional <script> tag without the src attribute to contain your code. You have a <script> tag that both links to the MathJax external JavaScript with a src attribute and contains code, so your code never runs.
The highlightLanguage: "python" will interfere with MathJax, so as long as you're using MathJax you need to leave out that configuration option and explicitly specify that you want Python syntax highlighting on every code block.

Here is a demo that'll get you going.

kynan · 2013-07-03T16:56:14Z

@gnab Brilliant, many thanks, your example got me on track. The last piece of the puzzle was that I hadn't wrapped my math in a code block.

gnab added a commit that referenced this issue Sep 17, 2012

#25: Add ready event.

073d1d1

gnab mentioned this issue Sep 17, 2012

Let the user add extra setup to slides #22

Closed

gnab closed this as completed Sep 25, 2012

juanpabloaj mentioned this issue Mar 15, 2015

latex support juanpabloaj/platon#2

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MathJax support #25

MathJax support #25

johnmcdonnell commented Sep 17, 2012

monofon commented Sep 17, 2012

johnmcdonnell commented Sep 17, 2012

monofon commented Sep 17, 2012

gnab commented Sep 17, 2012

gnab commented Sep 17, 2012

johnmcdonnell commented Sep 26, 2012

joshbode commented Nov 13, 2012

gnab commented Nov 13, 2012

joshbode commented Nov 13, 2012

kynan commented Jul 2, 2013

gnab commented Jul 2, 2013

kynan commented Jul 3, 2013

gnab commented Jul 3, 2013

kynan commented Jul 3, 2013

MathJax support #25

MathJax support #25

Comments

johnmcdonnell commented Sep 17, 2012

monofon commented Sep 17, 2012

johnmcdonnell commented Sep 17, 2012

monofon commented Sep 17, 2012

gnab commented Sep 17, 2012

gnab commented Sep 17, 2012

johnmcdonnell commented Sep 26, 2012

joshbode commented Nov 13, 2012

gnab commented Nov 13, 2012

joshbode commented Nov 13, 2012

kynan commented Jul 2, 2013

gnab commented Jul 2, 2013

kynan commented Jul 3, 2013

gnab commented Jul 3, 2013

kynan commented Jul 3, 2013