How to setup `landslide` to work with LaTeX rendering

howto_setup_landslide.md

How to setup landslide to work with LaTeX rendering

This short howto is intended to be a mental note for myself so I don't have to spend all the wasted hours that took me to figure out howto get landslide up and running and beautifully displaying LaTeX on the slides. If you find it useful, good for you ;-)

---

Disclaimer

This is a hack. I'm sure there's a more elegant way to get the same output, but at the end of the day, I've found this gets the job done and, at this point, it's all I need.

---

Dependencies

This is well documented in their website, but for the sake of completeness, you'll need:

* `markdown` (`pip install -U markdown`)
* `docutils` (`pip install -U docutils`)
* `jinja2` (`pip install -U jinja2`)
* `pygments` (`pip install -U pygments`)

If you are intended to render LaTeX notation, the easiest is to have some sort of MathJax, but more on that below.

---

Install landslide

Either pip:

!bash
pip install -U landslide

Or clone it from github:

!bash
git clone https://github.com/adamzap/landslide.git
cd landslide
sudo python setup.py install

---

Render equations

Just by installing landslide, I have not been able to get LaTeX output in the slides (it picks up that it's LaTeX but doesn't render it as such). For that, I've found adding the following JavaScript snipett (borrowed from here) will do the trick:

!html
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    extensions: ["tex2jax.js"],
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
      processEscapes: true
    },
    "HTML-CSS": { availableFonts: ["TeX"] }
  });
</script>
<script type="text/javascript"
    src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

You run landslide as suggested:

!bash
landslide my_presentation.md

and then, in the output (presentation.html for the previous command), you should paste the snipett on the top.

Now this is not a first-best option as you'll have to manually paste it every time you re-run, which is not very interactive. To have it automatically included, you can paste it in the theme template by editing the base.html file of the theme. This can be found under the directory of landslide here (examples for theme default):

!bash
/path_to_landslide_dir/src/landslide/themes/default/base.html

Paste it on the javascripts section and re-run sudo python setup.py install. LaTeX should be rendered correctly now.

---

Local copy of MathJax

The previous guide assumes you will have an internet connection everytime you run landslide (because it needs to call a MathJax server for the rendering, through their CDN). If you are like me, you'll want to have a local copy. Just clone it from github:

!bash
git clone https://github.com/mathjax/MathJax.git mathjax

And adjust the js snipet properly:

!html
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    extensions: ["tex2jax.js"],
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
      processEscapes: true
    },
    "HTML-CSS": { availableFonts: ["TeX"] }
  });
</script>
<script type="text/javascript"
    src="/path_to_mathjax_clone/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

---

Test

If you are seeing beautiful $\LaTeX$ here and a beautiful equation here:

$$y = \alpha + \beta X$$

You are on the right track. Happy landsliding!!!

thanks this helped me.