Monday, October 8, 2012

web slides with python & math using deck.js, syntaxhighlighter, and mathjax

In putting together some slides for class that include both Python code and math models, I realized that it was high time to update the technology stack I'm using. If anyone else finds this useful, please feel free to copy my starting template and use or improve upon it.

I'm hosting my slides directly out of Dropbox since I can do so without uploading them to a web server. It also means I can edit and view them locally without have to go through any sort of manual syncing process. This is possibly the simplest way in existence to share a page on the internet.

Steps:

  1. Create the directories /public/, /public/www/, /public/www/slides/, and /public/www/slides/boilerplate/ in your Dropbox folder.
  2. Download the latest version of deck.js and decompress it into /public/www/deck.js/.
  3. Download SyntaxHighlighter and decompress it into /public/www/syntaxhighlighter/.
  4. Download MathJax and decompress it into /public/www/mathjax/.
  5. Save this template into /public/www/slides/boilerplate/boilerplate.html.

Now to create a new slide deck, copy the boilerplate directory to something new in /public/www/slides/. You should be able to begin with something that looks like this. Search through its source for "slides start" to see how to create slides that show beautifully rendered Python and LaTeX.

Use the left and right arrow keys or the icons that appear when you hover over the left and right of the slides to navigate.

1 comment :

  1. That's very cool!

    Just one thing to keep in mind for Firefox users: if you open those files locally (without a server), then FF's security restrictions need the MathJax fonts to be in a subfolder. See http://docs.mathjax.org/en/latest/installation.html?highlight=origin#firefox-and-local-fonts

    Don't worry, MathJax will still work, but you'll get ugly fallback image-fonts instead of proper webfonts.

    Also, if you're using it via the dropbox-website anyway, you might also link to the MathJax CDN instead to save your Dropbox storage ;) Finally, you could slim down MathJax to <2MB, especially the picture-fonts are not needed, only a fallback (but see the point about Firefox).

    ReplyDelete