17

I would like to make (simple) mathematical presentations using mathjax. Most importantly I want to be able to let text show up step by step. Does anybody here know a program that would allow me to do this without too much hazzle ?

I'm afraid that this is not the right place to ask this, but as I think other mathematicians may find this question also interesting, I hope it is ok to ask it here.

Kasper
  • 13,528
  • well, i know that MS word has its own Equation functionalities. Google Docs also has their own...so they should work fine...however, yes i'm interested about mathjax outputs too. – bryan.blackbee Mar 17 '13 at 10:41
  • 4
    MathJax is a variant of $\LaTeX$ which complies $\LaTeX$ formulas via javascript together with HTML+CSS. It means that MathJax works only in web pages, which seems clearly inadequate for presentation purpose. I recommend you to learn about $\LaTeX$ and the beamer class, as mixedmath pointed out. – Sangchul Lee Mar 17 '13 at 10:47
  • 1
    I would try this: http://dl.dropbox.com/u/7586336/blogger/Cambridge_R_googleVis_with_knitr_and_RStudio_May_2012.html#(2) RStudio is very convenient for using the knitr package, which allows Markdown to html conversion with MathJax. – Stéphane Laurent Mar 17 '13 at 11:11
  • (and this a question for stackoverflow) – Stéphane Laurent Mar 17 '13 at 11:35
  • 1
    Indeed, this is not the right place to ask this. I am sure there are mailing lists and/or other forms of user group fora for mathjax, no? (the argument "other X will find this interesting here" carries little weight, really! :-) Most mathematicians I know have a keen interest in beer and/or sex, say, but you'd be hard pressed to argue that that justifies asking here about either) – Mariano Suárez-Álvarez Mar 17 '13 at 20:22
  • Do you want something like http://stackedit.io? Type LaTeX with dollar signs on the left and it renders them immediately on the right. – endolith Jun 02 '14 at 15:28

6 Answers6

14

Let me show you how the pros (admittedly, in other fields) do it:

Use any HTML/CSS/JS presentation library. For example, a nice one is reveal.js. Usually, they have a sample presentation to get you started.

Add a script pointing to MathJax's CDN or to a local directory (assuming that you might not have a decent Internet connection). For example, I added this at the bottom of the sample presentation of reveal.js:

<script type="text/javascript"
    src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

Then you're good to go. Write whatever you want to appear in LaTex-like format:

<div class="reveal">

    <!-- Any section element inside of this container is displayed as a slide -->
    <div class="slides">

        <section>
             <h1>Reveal.js</h1>
             <h3>Latex Presentations Made Easy</h3>
             <p>
                $$\frac{1}{n}\sqrt{e^\frac{1}{n} - e^\frac{1}{n+1}}\sim\frac{1}{n^2}$$
             </p>
             <p>
            <small>Created by <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small>
             </p>
         </section>
        ... 
    </div>
</div>

The result should be something like this:

enter image description here

In addition of this, reveal.js (and a bunch of other libraries) allow you to write your presentation in Markdown, quotes, snippets of code, link to other slides in your presentation, export your presentation to PDF, among other features.

r_31415
  • 2,934
  • Here is a similar example that uses deck.js instead, but is basically the same idea. It includes his template code so that might be worth looking at. http://checkmyworking.com/2012/10/slides-from-a-talk-about-zero-knowledge-protocols/ – Alex J Best Mar 21 '13 at 22:18
  • Yes, very similar to reveal.js. I like it. – r_31415 Mar 21 '13 at 23:01
  • More easy with Pandoc (no need to have html knowledge). – Stéphane Laurent Mar 22 '13 at 05:52
  • HTML knowledge is barely a problem but if that really worries you, reveal.js supports markdown. – r_31415 Mar 22 '13 at 15:05
  • 1
    @RobertSmith Pandoc can be used by anyone who only knows how to type a post here. It allows conversion from Markdown to several types of html slides (slidy, slideous, dzslides, s5, and maybe it will include Reveal one day) and to Beamer too. – Stéphane Laurent Mar 22 '13 at 22:41
  • @StéphaneLaurent Pandoc is really cool but I wouldn't use it as my first option when there are other projects dedicated to create presentations. Of course, that's just a matter of personal preference. – r_31415 Mar 23 '13 at 01:12
  • @RobertSmith I am under the impression you don't understand. Slidy, Slideous, Dzslides and S5 are projects dedicated to create presentations. For example Slidy: http://www.w3.org/2006/05/Slidy-XTech/#(1). Pandoc only facilitates the use of these projects. – Stéphane Laurent Mar 23 '13 at 07:28
  • @RobertSmith And here is a way to produce Reveal slides with Pandoc :-) https://github.com/jgm/pandoc/wiki/Using-pandoc-to-produce-reveal.js-slides – Stéphane Laurent Mar 23 '13 at 07:33
  • @StéphaneLaurent Great. By the way, do you know something about this: https://gist.github.com/aaronwolen/5017084#comment-803411 ? – r_31415 Mar 23 '13 at 08:08
  • @RobertSmith No sorry, I have just discovered these possibilites to make html slides a few days ago. – Stéphane Laurent Mar 23 '13 at 08:23
7

Pandoc provides a very nice way to create slides with various formats from a basic Markdown source file. It is possible to have html slides and beamer slides (pdf output and/or LaTeX source code) from the same source code.

The freely available tool required: Pandoc

Here is the Markdown source file of the example I have just typed.

input.md file:

Slides with Markdown
========================================================

# Contents

- Typing mathematics 

- Including a web application

# Typing mathematics 

Type mathematics as in `math.stackexchange.com` : $\int_0^1 f(x) \mathrm{d}x$

# Including a web application

Type the `html` source code you want:

<iframe src="http://glimmer.rstudio.com/stla/3Dsliced/" style="border: none; width: 500px; height: 700px"></iframe>

And here is a link to the html output file: output.html.

The html output file is obtained with Pandoc by typing the command line

pandoc -s -S -i -t slidy --mathjax input.md -o output.html

where ìnput.md is the name of the Markdown source file.

To get a beamer output type:

pandoc -s -S -i -t beamer input.md -o output.pdf

And here is the link to the pdf output file: output.pdf

To get the source LaTeX file producing the beamer pdf :

pandoc -s -S -i -t beamer input.md -o output.tex

More details about this procedure are availbale in the Pandoc documentation and from here.

Stéphane Laurent
  • 1,974
2

It sounds to me that you want one of the ways of integrating latex into powerpoint. I've heard good things about iguanatex, which is free and would do the job. I should note that $\LaTeX$ actually has a presentation-type documentclass, called 'beamer.' You can read more about that here.

davidlowryduda
  • 91,687
2

If you really want to make presentations using Mathjax, and assuming you have basic knowledge of HTML/JS, I propose:

  • Have each slide you want to present a different <div> element, and after building all of them set them to style="display:none" so they are all hidden when a user browses your site;
  • Code some sort of navigation in your page, for example buttons "Next" and "Previous".

With this, you are able to use Mathjax inside each <div>, hidding all the other slides but the one you're showing, and then you can swift through different <div> elements with the navigation buttons (which through Javascript will hide and show the relevant <div> you want to present at the time).

Something like this example, notice the upper banners (they can be considered as pure image slides, yours would be text+images+latex).

Marcelo
  • 133
  • Does MathJax renders elements not displayed in the document? Maybe we have to manually render each
    s using MathJax.Hub object.
    – Sangchul Lee Mar 17 '13 at 11:08
  • 1
    Based on a quick browse I did before on the documentation, it seems MathJax renders everything once the page is loaded, so that's why I suggested that. In case it didn't do that the javascript function that handles slides changing would need to call the rendering function when showing a new <div>. – Marcelo Mar 17 '13 at 11:18
  • MathJax can't determine the sizes of element in a container that is display:none so you need to use some other techniques to achieve the same result. See the examples in the slides from my talk at the Joint Math Meetings in januarty – Davide Cervone Mar 17 '13 at 13:47
2

I guess you just want the formulas, written in the mathjax syntax. The Mathjax syntax is based on the $\LaTeX$ syntax and $\LaTeX$ itself has a documentclass (not only one) for presentations with beamers (the so called beamer class).
I think it would be strange if you swap to a new slide and mathjax isn't rendered.

Even though the syntax is similar $\LaTeX$ is totally different to Mathjax and it really needs some time till you produce something. If you want to go on with mathematics you should invest the time to learn $\LaTeX$.

When you only have simple formulas and the presentation is in some days, I think you should not try setting it in $\LaTeX$, better use something were you actually see what you are doing.

I just want to add that I think a powerpoint presentation (on this principle based) is in my opinion not really good in math. One usually clicks to fast and so the audience has not enough time to unterstand what is going on.

If you say for what the presentation is intended we could help more specifically.

Dominic Michaelis
  • 19,935
0

I would strongly recommend using the $\LaTeX$ beamer class, which allows you to create presentations that can be uncovered in steps (among others), while retaining the power of $\LaTeX$ for typesetting Maths.

Andreas Caranti
  • 68,873